文中列举了几个开发小程序的难点知识，希望能帮助到大家。
（学习视频分享：编程视频）
1、小程序 生成二维码
小程序生成二维码 小程序生成二维码其实是需要后端调用，然后前端调用后端接口即可。
在下面的例子中，我们传给后端scene就是额外参数(长度最大为32个字符，只支持数字，大小写英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符请自行编码为合法字符)，在打开的小程序用到的。
let scene = 't=3&n='+ this.inputval+'&sale='+this.saleid; request(qcode,{ishyaline:false,qrcodetype:2,scene:scene,width:255,color:{r:'255',g:'255',b:'255'}}) .then(res=>{}) })
这里的坑在于前端如何获取用户通过扫二维码如何获取参数
onload(opts){ var scene = decodeuricomponent(opts.scene); // scene 需要使用 decodeuricomponent 才能获取到生成二维码时传入的 scene }
2、小程序 跳小程序
小程序调用tominiprogram，我这里做了个简单的封装
function tominiprogram(appid, path, extradata) { wx.navigatetominiprogram({ appid: appid, // 要打开的小程序 appid path: path, // 打开的页面路径 envversion: 'develop', //要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。 extradata: extradata, // 需要传递给目标小程序的数据 success: function (res) { console.log('打开成功') }, fail: function (res) {} })}
在页面中使用
tominiprogram('appid','pages/customer/goods-detail?id='+id+'&saleid='+this.saleid,{});
在另一个小程序中获取参数
onload(opts){ this.goodsid=opts.id this.saleid=opts.saleid}
3、吸顶效果的实现
吸顶效果的原理是将滚动到一定高度的tab 重新布局为fixed
html
<view class="tab-ctn"> <view class="tabs flex flex-justify {{istabfixed?'fixed':''}}" id="tabs"> <view class="item pr {{tabindex===0?'on':''}}" @tap="toggletab(0)">商品介绍</view> <view class="item pr {{tabindex===1?'on':''}}" @tap="toggletab(1)">规格参数</view> </view></view>
css
.tabs{ padding:0 176rpx; font-size:30rpx; height:90rpx; border-bottom:0.5px solid #e4e4e4;}.item{ height:100%; position:relative; padding-top:20rpx; color:#999; &.on{ color:#fd343b; font-weight:bold; }}.fixed{ position:fixed; top:0; left:0; right:0; z-index:9;}
js
data={ detailtoph:300, }onload(){ this.getelheight('') // tab上面元素的高度}/**封装根据id获取元素高度 */getelheightbyid(id){ return new promise(function(resolve,reject){ const query = wx.createselectorquery() query.select('#'+id).boundingclientrect() query.selectviewport().scrolloffset() query.exec(function (res) { resolve(res[0].height) }) })}// 调用 getelheight(id){ this.getelheightbyid(id).then(res=>{ this.detailtoph = res }) }/**监听页面滚动事件 */ onpagescroll(e){ if(e.scrolltop>=this.detailtoph && !this.istabfixed){ this.istabfixed=true }else if(e.scrolltop<=this.detailtoph && this.istabfixed){ this.istabfixed=false } }
4、封装时间戳
function formattime(timestamp, type = "date") { var date = new date(timestamp); var year = date.getfullyear() var month = date.getmonth() + 1 var day = date.getdate() var hour = date.gethours() var minute = date.getminutes() var second = date.getseconds() if (type == "date") { return [year, month, day].map(formatnumber).join('-'); } else if (type == "all") { return [year, month, day].map(formatnumber).join('-') + ' ' + [hour, minute, second].map(formatnumber).join(':') } else if (type == "time") { return [hour, minute, second].map(formatnumber).join(':') } else if (type == "time2") { return [hour, minute].map(formatnumber).join(':') } else if (type == 'month') { return [month, day].map(formatnumber).join('-'); } }/**niu 封装时间戳格式化辅助,将年月日先转为字符串，再判断是否加0*/function formatnumber(n) { n = n.tostring() return n[1] ? n : '0' + n} formattime(1236547891,'all') // 2019-11-02 03:11:11formattime(1236547891,'time') // 03:11:22formattime(1236547891,'time2') // 03:11formattime(1236547891,'month') // 03-03formattime(1236547891,'date') // 2019-11-02
相关推荐：小程序开发
以上就是小程序开发有哪些难点的详细内容。