What are the difficulties in mini program development?-Mini Program Development-php.cn

What are the difficulties in mini program development?

王林

Release： 2020-12-16 09:19:18

forward

4300 people have browsed it

What are the difficulties in mini program development?

This article lists several difficult knowledge for developing small programs, I hope it can help everyone.

(Learning video sharing: Programming video)

1. Mini program generates QR code

Mini program generates QR code Mini program generates 2 The QR code actually needs to be called by the backend, and then the frontend can call the backend interface.

In the following example, we pass additional parameters to the backend scene (the maximum length is 32 characters, only supports numbers, uppercase and lowercase English and some special characters: !#$&'()*, /:;=?@-._~, please encode other characters into legal characters by yourself), which are used in the opened applet.

    let scene = &#39;t=3&n=&#39;+ this.inputVal+&#39;&sale=&#39;+this.saleId;
    request(qcode,{isHyaline:false,qrcodeType:2,scene:scene,width:255,color:{r:&#39;255&#39;,g:&#39;255&#39;,b:&#39;255&#39;}})
      .then(res=>{})
    })

Copy after login

The pitfall here is how the front-end obtains the parameters of users by scanning the QR code

  onLoad(opts){
    var scene = decodeURIComponent(opts.scene); // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
     
  }

Copy after login

2. Mini program jumps to mini program

The mini program calls toMiniProgram, here I am Made a simple package

function toMiniProgram(appid, path, extraData) {
  wx.navigateToMiniProgram({
    appId: appid,  // 要打开的小程序 appId
    path: path,   // 打开的页面路径
    envVersion: &#39;develop&#39;,  //要打开的小程序版本。仅在当前小程序为开发版或体验版时此参数有效。
    extraData: extraData,  // 需要传递给目标小程序的数据
    success: function (res) {
      console.log(&#39;打开成功&#39;)
    },
    fail: function (res) {}
  })
}

Copy after login

Use

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

Copy after login

on the page to get the parameters in another small program

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

Copy after login

3. Implementation of the ceiling effect

The principle of the ceiling effect is to rearrange the tabs scrolled to a certain height into fixed

html

<view class="tab-ctn">
  <view class="tabs flex flex-justify {{isTabFixed?&#39;fixed&#39;:&#39;&#39;}}" id="tabs">
    <view class="item pr {{tabIndex===0?&#39;on&#39;:&#39;&#39;}}" @tap="toggleTab(0)">商品介绍</view>
    <view class="item pr {{tabIndex===1?&#39;on&#39;:&#39;&#39;}}" @tap="toggleTab(1)">规格参数</view>
  </view>
</view>

Copy after login

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;
}

Copy after login

data={
    detailTopH:300, 
}
onLoad(){
    this.getElHeight(&#39;&#39;) // tab上面元素的高度
}
/**封装根据id获取元素高度 */
getElHeightById(id){
  return new Promise(function(resolve,reject){
    const query = wx.createSelectorQuery()
    query.select(&#39;#&#39;+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
    }
  }

Copy after login

4 , encapsulation timestamp

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(&#39;-&#39;);
  } else if (type == "all") {
    return [year, month, day].map(formatNumber).join(&#39;-&#39;) + &#39; &#39; + [hour, minute, second].map(formatNumber).join(&#39;:&#39;)
  } else if (type == "time") {
    return [hour, minute, second].map(formatNumber).join(&#39;:&#39;)
  } else if (type == "time2") {
    return [hour, minute].map(formatNumber).join(&#39;:&#39;)
  } else if (type == &#39;month&#39;) {
    return [month, day].map(formatNumber).join(&#39;-&#39;);
  }
 
}
/**niu 封装时间戳格式化辅助,将年月日先转为字符串，再判断是否加0*/
function formatNumber(n) {
  n = n.toString()
  return n[1] ? n : &#39;0&#39; + n
}
 
formatTime(1236547891,&#39;all&#39;) // 2019-11-02 03:11:11
formatTime(1236547891,&#39;time&#39;)  // 03:11:22
formatTime(1236547891,&#39;time2&#39;)  // 03:11
formatTime(1236547891,&#39;month&#39;)  // 03-03
formatTime(1236547891,&#39;date&#39;)  // 2019-11-02

Copy after login

Related recommendations:小program development

The above is the detailed content of What are the difficulties in mini program development?. For more information, please follow other related articles on the PHP Chinese website!