How to develop WeChat mini programs

This time I will show you how to develop WeChat mini programs and what are the precautions for developing WeChat mini programs. The following is a practical case, let's take a look.

no.1 The background image is not displayed

The WeChat applet allows users to customize the background image, but the path and address of the background image are limited. Previously, it had been Use a relative path to write, and the background image is also displayed in the WeChat developer tools. I mistakenly thought that there was no problem, but when I previewed it, I found that the background image was not displayed on the phone. This is the first pitfall introduced today. The background image is not allowed to be Local pictures.

Solution:

First, use the method of converting online pictures to base64 code. The advantage of this method is that the pictures are not stored locally. Or on the server, it takes up less space and is easy to modify. The disadvantage is that the processing effect of small pictures is better. The code for large pictures is quite long. If it is too long, I don’t want to look at it...

Second, upload the picture

To the server, just quote the image address, which is convenient and fast, but it is troublesome to modify and takes up server space.

no.2 Pull-down does not trigger onPullDownRefresh

//下拉事件
onPullDownRefresh: function() {
 console.log("好用不?")
 wx.showToast({
  title: '没事儿别乱拉',
  icon: 'success',
  duration: 2000
 })
},
//上拉事件
onReachBottom: function() {
 wx.showToast({
  title: '没事儿别乱拽',
  icon: 'success',
  duration: 2000
 })
}

The above code is completely fine, but after previewing it, I found that only pulling up is easy to use, and pull-down does not work at all. The reaction is depressing. Is there something wrong with the official method?

In fact, no, the reason is because the official default is to turn off the drop-down event. Just go to the app.json file and modify the parameters in the windows. The code is as follows:

"window": {
 "enablePullDownRefresh":true //开启下拉功能
}

no .3 How to cancel monitoring of gravity sensing API

The WeChat applet does not provide a shake API interface, but it provides a gravity sensing API "wx.onAccelerometerChange(CALLBACK)", we can use this Method to simulate the WeChat shake function, the code is as follows:

Page({
 onShow: function () {
  wx.onAccelerometerChange(function (e) {
   console.log(e.x)
   console.log(e.y)
   console.log(e.z)
   if (e.x > 1 && e.y > 1) {
    wx.showToast({
     title: '摇一摇成功',
     icon: 'success',
     duration: 2000
    })
   }
  })
 },
 onHide: function(){
  
 }
})

But if the mini program needs to enable the tabbar, enabling the gravity sensing API will cause all pages under the tabbar to monitor the gravity sensing data, resulting in simulated shake The result of shaking will appear on all pages. This is not what we want. We just want to allow one of the pages under the tabbar to obtain the gravity sensing data. Then we need to add a check whether it is on the current page. Judgment, enable monitoring of the gravity sensing API based on the judgment result, the code modification is as follows:

Page({
 isShow: false,
 onShow: function () {
  var that = this;
  this.isShow = true;
  wx.onAccelerometerChange(function (e) {
   if(!that.isShow){
    return
   }
   console.log(e.x)
   console.log(e.y)
   console.log(e.z)
   if (e.x > 1 && e.y > 1) {
    wx.showToast({
     title: '摇一摇成功',
     icon: 'success',
     duration: 2000
    })
   }
  })
 },
 onHide: function(){
  this.isShow = false;
 }
})

After modification, recompile the preview to achieve the effect we want.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of Vue key modifier processing event steps

How to use JS to implement a hash table

The above is the detailed content of How to develop WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!