小編給大家分享一下小程序開(kāi)發(fā)的難點(diǎn)分析，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都創(chuàng)新互聯(lián)公司專(zhuān)注于中大型企業(yè)的網(wǎng)站設(shè)計(jì)、做網(wǎng)站和網(wǎng)站改版、網(wǎng)站營(yíng)銷(xiāo)服務(wù)，追求商業(yè)策劃與數(shù)據(jù)分析、創(chuàng)意藝術(shù)與技術(shù)開(kāi)發(fā)的融合，累計(jì)客戶(hù)千余家，服務(wù)滿意度達(dá)97%。幫助廣大客戶(hù)順利對(duì)接上互聯(lián)網(wǎng)浪潮，準(zhǔn)確優(yōu)選出符合自己需要的互聯(lián)網(wǎng)運(yùn)用，我們將一直專(zhuān)注成都品牌網(wǎng)站建設(shè)和互聯(lián)網(wǎng)程序開(kāi)發(fā)，在前進(jìn)的路上，與客戶(hù)一起成長(zhǎng)！

1、小程序 生成二維碼

小程序生成二維碼 小程序生成二維碼其實(shí)是需要后端調(diào)用，然后前端調(diào)用后端接口即可。

在下面的例子中，我們傳給后端scene就是額外參數(shù)(長(zhǎng)度最大為32個(gè)字符，只支持?jǐn)?shù)字，大小寫(xiě)英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~，其它字符請(qǐng)自行編碼為合法字符)，在打開(kāi)的小程序用到的。

    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=>{})
    })

這里的坑在于前端如何獲取用戶(hù)通過(guò)掃二維碼如何獲取參數(shù)

  onLoad(opts){
    var scene = decodeURIComponent(opts.scene); // scene 需要使用 decodeURIComponent 才能獲取到生成二維碼時(shí)傳入的 scene
     
  }

2、小程序 跳小程序

小程序調(diào)用toMiniProgram，我這里做了個(gè)簡(jiǎn)單的封裝

function toMiniProgram(appid, path, extraData) {
  wx.navigateToMiniProgram({
    appId: appid,  // 要打開(kāi)的小程序 appId
    path: path,   // 打開(kāi)的頁(yè)面路徑
    envVersion: 'develop',  //要打開(kāi)的小程序版本。僅在當(dāng)前小程序?yàn)殚_(kāi)發(fā)版或體驗(yàn)版時(shí)此參數(shù)有效。
    extraData: extraData,  // 需要傳遞給目標(biāo)小程序的數(shù)據(jù)
    success: function (res) {
      console.log('打開(kāi)成功')
    },
    fail: function (res) {}
  })
}

在頁(yè)面中使用

 toMiniProgram('appid','pages/customer/goods-detail?id='+id+'&saleId='+this.saleId,{});

在另一個(gè)小程序中獲取參數(shù)

onLoad(opts){
    this.goodsId=opts.id
    this.saleId=opts.saleId
}

3、吸頂效果的實(shí)現(xiàn)

吸頂效果的原理是將滾動(dòng)到一定高度的tab 重新布局為fixed

html

  
    商品介紹
    規(guī)格參數(shù)
  

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上面元素的高度
}
/**封裝根據(jù)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)
    })
  })
}
// 調(diào)用
  getElHeight(id){
    this.getElHeightById(id).then(res=>{
      this.detailTopH = res
    })
  }
/**監(jiān)聽(tīng)頁(yè)面滾動(dòng)事件 */
  onPageScroll(e){
    if(e.scrollTop>=this.detailTopH && !this.isTabFixed){
      this.isTabFixed=true
    }else if(e.scrollTop<=this.detailTopH && this.isTabFixed){
      this.isTabFixed=false
    }
  }

4、封裝時(shí)間戳

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 封裝時(shí)間戳格式化輔助,將年月日先轉(zhuǎn)為字符串，再判斷是否加0*/
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : '0' + n
}
 
formatTime(1236547891,'all') // 2019-11-02 03:11:11
formatTime(1236547891,'time')  // 03:11:22
formatTime(1236547891,'time2')  // 03:11
formatTime(1236547891,'month')  // 03-03
formatTime(1236547891,'date')  // 2019-11-02

以上是“小程序開(kāi)發(fā)的難點(diǎn)分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！