广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

文中列举了几个开发小程序的难点知识，希望能帮助到大家。

（学习视频分享：编程视频）

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

相关推荐：小程序开发

以上就是小程序开发有哪些难点的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~