Summary of some problems with small procedures

Write down any problems you encounter in your small program development. Remember what comes to mind

1, a newline

Carriage return newlines are only supported in
,
not.

2. Dynamic head

In the custom interface, the custom head will slide away when sliding. It is necessary to define a head fixed in the head, which is not good to display directly. Add some animation and record the code

You need to do scrolling, so you need to put all the code of the page inside the scroll view, and the scroll view is the parent element that wraps all the code.

<view>
  <scroll-view bindscroll="scroll" scroll-y class="scrollBox" scroll-top="{{scrollTop}}">
    <! -- Other HTML code -->
  </scroll-view>
</view>
Copy the code

Style, scroll view needs to use the screen height.

.scrollBox{
  height: calc(100vh - 120rpx);
  width: 100%;
}
Copy the code

Js inside need to judge the height of the task bar, and do the judgment, add animation

Page({
  data: {
    h: 0.// height
    scrollTop: 0.opacity:0.animationOpacity: null.// Animation instance
  },
  onShow: function () {
    let h = app.globalData.navHeight;
    let top = this.data.top;
    if (top > 50) {
      this.setData({ opacity: 1 });
    } else {
      this.setData({ opacity: 0 });
    }
    this.setData({ h: h });
  },
  / / rolling
  scroll(e) {
    var top = e.detail.scrollTop;
    this.setData({ top: top });
    if (e.detail.scrollTop > 20) {
      var animation = wx.createAnimation({
        duration: 650.timingFunction: 'ease-in'
      })
      animation.opacity(1).step();
      this.setData({ animationOpacity: animation.export() });
    } else {
      var animation = wx.createAnimation({
        duration: 650.timingFunction: 'ease-out'
      })
      animation.opacity(0).step();
      this.setData({ animationOpacity: animation.export() }); }}})Copy the code

3. Skeleton screen

The project needs to add a skeleton screen, I realized one by myself.

The HTML code

<view wx:if="{{! isSkeleton}}">
<! -- Other business code displayed after loading -->
</view>

<! -- Skeleton screen -->
<view wx:if="{{isSkeleton}}" class="skeleton">
  <view>
    <view class="text1 {{isSkeleton ? 'animation' : ''}}"></view>
    <view class="content1 {{isSkeleton ? 'animation' : ''}}"></view>
  </view>
  <view>
    <view class="text1 {{isSkeleton ? 'animation' : ''}}"></view>
    <view class="content1 {{isSkeleton ? 'animation' : ''}}"></view>
  </view>
  <view>
    <view class="text1 {{isSkeleton ? 'animation' : ''}}"></view>
    <view class="content1 {{isSkeleton ? 'animation' : ''}}"></view>
  </view>
  <view>
    <view class="text1 {{isSkeleton ? 'animation' : ''}}"></view>
    <view class="content1 {{isSkeleton ? 'animation' : ''}}"></view>
  </view>
  <view>
    <view class="text1 {{isSkeleton ? 'animation' : ''}}"></view>
    <view class="content1 {{isSkeleton ? 'animation' : ''}}"></view>
  </view>
  <view>
    <view class="text1 {{isSkeleton ? 'animation' : ''}}"></view>
    <view class="content1 {{isSkeleton ? 'animation' : ''}}"></view>
  </view>
  <view>
    <view class="text1 {{isSkeleton ? 'animation' : ''}}"></view>
    <view class="content1 {{isSkeleton ? 'animation' : ''}}"></view>
  </view>
</view>
Copy the code

Styles and animations

/* Introduce app.wxss, remove the common style */
@import '/app.wxss';  

/* The style of each page */
.skeleton{
  width: 100%;
  padding: 40rpx;
  box-sizing: border-box;
}
.text1{
  width: 45%;
  height: 40rpx;
  background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 25%.hsla(0.0%.73%.0.23) 37%.hsla(0.0%.74.5%.2) 63%);
}
.content1{
  width: 100%;
  height: 150rpx;
  background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 25%.hsla(0.0%.73%.0.23) 37%.hsla(0.0%.74.5%.2) 63%);
  margin: 40rpx 0;
}

/* The CSS implemented by the animation is removed from app.js */

@keyframes mymove{
  from {
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 25%.hsla(0.0%.73%.0.23) 37%.hsla(0.0%.74.5%.2) 63%);
  }
  5%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 30%.hsla(0.0%.73%.0.23) 42%.hsla(0.0%.74.5%.2) 68%);
  }
  10%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 35%.hsla(0.0%.73%.0.23) 47%.hsla(0.0%.74.5%.2) 73%);
  }
  15%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 40%.hsla(0.0%.73%.0.23) 52%.hsla(0.0%.74.5%.2) 78%);
  }
  20%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 45%.hsla(0.0%.73%.0.23) 57%.hsla(0.0%.74.5%.2) 83%);
  }
  25%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 50%.hsla(0.0%.73%.0.23) 62%.hsla(0.0%.74.5%.2) 88%);
  }
  30%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 55%.hsla(0.0%.73%.0.23) 67%.hsla(0.0%.74.5%.2) 93%);
  }
  35%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 60%.hsla(0.0%.73%.0.23) 72%.hsla(0.0%.74.5%.2) 98%);
  }
  40%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 3%.hsla(0.0%.74.5%.2) 65%.hsla(0.0%.73%.0.23) 77%);
  }
  45%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 8%.hsla(0.0%.74.5%.2) 70%.hsla(0.0%.73%.0.23) 82%);
  }
  50%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 13%.hsla(0.0%.74.5%.2) 75%.hsla(0.0%.73%.0.23) 87%);
  }
  55%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 18%.hsla(0.0%.74.5%.2) 80%.hsla(0.0%.73%.0.23) 92%);
  }
  60%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 23%.hsla(0.0%.74.5%.2) 85%.hsla(0.0%.73%.0.23) 97%);
  }
  65%{
    background-image: linear-gradient(90deg.hsla(0.0%.73%.0.23) 2%.hsla(0.0%.74.5%.2) 28%.hsla(0.0%.74.5%.2) 90%);
  }
  70%{
    background-image: linear-gradient(90deg.hsla(0.0%.73%.0.23) 7%.hsla(0.0%.74.5%.2) 33%), hsla(0.0%.74.5%.2) 95%;
  }
  75%{
    background-image: linear-gradient(90deg.hsla(0.0%.73%.0.23) 12%.hsla(0.0%.74.5%.2) 38%), hsla(0.0%.74.5%.2) 5%;
  }
  80%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 5%.hsla(0.0%.73%.0.23) 17%.hsla(0.0%.74.5%.2) 43%);
  }
  85%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 10%.hsla(0.0%.73%.0.23) 22%.hsla(0.0%.74.5%.2) 48%);
  }
  90%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 15%.hsla(0.0%.73%.0.23) 27%.hsla(0.0%.74.5%.2) 53%);
  }
  95%{
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 20%.hsla(0.0%.73%.0.23) 32%.hsla(0.0%.74.5%.2) 58%);
  }
  to {
    background-image: linear-gradient(90deg.hsla(0.0%.74.5%.2) 25%.hsla(0.0%.73%.0.23) 37%.hsla(0.0%.74.5%.2) 63%); }}.animation{
  animation:mymove 1.5 s infinite;
  -webkit-animation:mymove 1.5 s infinite; 
}

Copy the code

Js according to the variables to determine whether the load is finished, in the interface processing

Page({
  data: {isSkeleton: true
  },
  onShow: function(){
    let that = this;
    // Load the page data
    wx.request({
      url: url,
      method: "GET".header: app.header(),
      success: function (res) {
        if (app.checkRes(res)) {
          // Other business logic, then cancel skeleton screen
          that.setData({ isSkeleton: false}); }}}); }})Copy the code

4. Set the corner label in the upper right corner of the navigation bar

wx.setTabBarBadge({
  index: 1.text: 1
})
wx.hideTabBarRedDot({index:1})
Copy the code

Index is an index.

5. Detect version updates

const updateManager = wx.getUpdateManager()
updateManager.onUpdateReady(function () {
  wx.showModal({
    title: 'Update Prompt'.content: 'The new version is ready. Do you want to restart the application? '.success(res) {
      if (res.confirm) {
        // The new version has been downloaded. Call applyUpdate to apply the new version and restart
        updateManager.applyUpdate()
      }
    }
  })
})
Copy the code

6. Obtain user information

Retrieving user information in the code is required in the wx.getUserInfo() callback

wx.getUserInfo({
  success(e) {
    var userInfo = e.userInfo;
    let data: {
      name: userInfo.nickName,
      avatar: userInfo.avatarUrl,
      gender: userInfo.gender
    }
  }
})
Copy the code

7. Service Number notification

When the user finishes placing an order, he/she needs to push a notification to the user, such as getting the food code. The template needs to be set first. The template is set in the background of the applet.

1. Log in to the applet background
2. Function – Subscribe to messages
3. Select a template

After setting, there will be a template ID, which is passed in the code. When the user clicks, an authorization popup window will pop up. After the authorization is completed, the user wants to close the popup window in the upper right corner of the mini program.

wx.requestSubscribeMessage({
  tmplIds: ['idxxxxxxx'],
  success (res) {
    // Business code
  },
  complete (){
    // This function needs to be approved by the user, and can also be rejected}})Copy the code

Other configuration needs background cooperation, The background of document at https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/uniform-message/uniformMessage.send.html

8, canvas

The canvas of the applet can only be rendered once with the same ID. If wx:if is hidden and opened again, it cannot be rendered again, the applet official answer is that it does not work.

Additional procedures to try to draw a TWO-DIMENSIONAL code can be used: app.qrcode.esm.js.

9, the image

You can use onload to check whether the image loads successfully

<image onload="imgOnload" ></image>
Copy the code

10. User information display

The display of user information does not need to retrieve the wechat interface to obtain user information, and it is good to display it directly.

<view class="listItem flex between">
  <view class="title">Head portrait</view>
  <view class="con img"><open-data type="userAvatarUrl"></open-data></view>
</view>

<view class="listItem flex between">
  <view class="title">gender</view>
  <view class="con"><open-data type="userGender" lang="zh_CN"></open-data></view>
</view>

<view class="listItem flex between">
  <view class="title">The user name</view>
  <view class="con"><open-data type="userNickName"></open-data></view>
</view>
Copy the code

11. Some requirements of small programs

Now the various rules of small programs are more and more complex, the development of some feel that there will be problems with the requirements of the recommended first look at these specifications, no problem and then develop.

The official documentation address: https://developers.weixin.qq.com/community/develop/article/doc/000a62dc6c8a88125129cdc055bc13