About mini programs

Notes to articles. Welcome to discuss with you. Please point out if there are errors in the article.

1. Some operations that require access to variables in data. We can use ES6 object destructuring and assignment to simplify it. We can use this method not only in small programs but also in vue.

// 例子(小程序)
let a = this.data.a;
let b = this.data.b;
// ES6对象解构赋值
let {a,b} = this ; // vue
let {a,b} = this.data; //小程序

2. The component public property hidden of the applet is hidden. If you don’t pay attention to the document, you may miss this public property. Equivalent to display:none; in CSS, it can be applied to nodes that switch frequently.

<view></view>
 <!--  false 为显示   true为隐藏 -->

Quote from the official: "Generally speaking, wx:if has a higher switching cost and hidden has a higher initial rendering cost. Therefore, if frequent switching is required, It is better to use hidden. If the conditions are unlikely to change during runtime, wx:if is better. "

3. About text bloggers using formatting in wxml when they first start writing small programs Pitfalls I encountered while documenting

<!-- 这样的写法会出现换行的效果 -->
<text>
    SevenDream 
    SevenDream 
</text>
<!-- 如果不需要换行的效果-->
<text>SevenDream SevenDream</text>

4. About image When you need to render images, you will find a white seam in the middle of consecutive images. If it is sliced ​​in the product details in the mall, it will be unsightly to have white stripes in the middle. Just add display:bolck to the image tag.

<image></image>

5. About jump

• If the maximum page stack processing method is exceeded (more than 10 pages), the jump will be encapsulated .

//utils.js
export function navigateTo(url) {
   let Type = getCurrentPages().length >= 10 ? 'redirectTo' : 'navigateTo'
    return new Promise((resolve, reject) => {
      wx[Type]({
        url,
        success: res => {
          resolve()
        },
        fail: err => {
          reject(err)
        },
      })
    })
}
// 其他页面js
import {navigateTo} from '../../utils/utils';
navigateTo('pages/index/index')

• Refresh when returning to the previous page (such as returning to the personal center)

wx.switchTab({
    url: '/pages/my/my',
    success:function(){
        var page  =  getCurrentPages().pop(); //当前页面
        page.onLoad(); // 调用 onload
    }})

• Set the value of the previous page when returning to the previous page

    var pages = getCurrentPages(); // 获取页面栈
    var prevPage = pages[pages.length - 2];  //上一页
    prevPage.setData(data);
    wx.navigateBack({
      delta: 1
    })

6.this.setData If you want to change an object or array

  //data
  data: {
    obj: {
      a: 1
    },
    array: ['1']
  },
  //改变对象
  setOBJ:function(){
    var name = 'a'
    var obj = 'obj.a'
    this.setData({
      [obj]:2
    })
  },
  //改变数组
  setArr: function () {
    var num = 0
    var arr = `array[${num}]`
    this.setData({
      [arr]: 2
    })
  }

• If we have a form that needs to be bound to many bindinputs, use the above solution and add data-*. There is no need to write many methods, just one is enough

  <input>
  <input>
  <input>

// 写入
  data:{
    FromOBJ:{
      name:'',
      phone:'',
      address:''
    }
  },
  onInput: function (e) {
      let name =  e.currentTarget.dataset.name
      let value = e.detail.value
      let valueObj = `FromOBJ.${name}`;
      this.setData({
        [valueObj]:value
      })
  }

7. Encapsulation of wx.request (There are many encapsulation solutions for wx.requset on the Internet, here is the encapsulation solution of the original poster) )

//API.js
const HTTP_URL = 'https://xxxx.xxx.xxx/'

function Request(url, data={},method='get',ContentType='application/json;charset=utf-8') {
    return new Promise((resolve, reject) => {
        wx.request({
            url: HTTP_URL.http + url,
            method: method,
            header: {
                'Content-Type': ContentType,
                'xxxx': 'xxxx'  // 其他header头
            },
            data: data,
            success: function (res) {
                resolve(res.data)
            },
            fail: function (err) {
                reject(err)
            }
        })
    })
}

export function getApi(data) {
    var url = '/getapi';
    return Request(url, data)
}
// 其他页面js
import {getApi} from '../../utils/api';
getApi({a:1,b:2}).then(res=>console.log(res)).catch(err=>console.log(err))

8. Other issues to note

• If iconfont is used, all files are put in at one time0 Be sure to delete iconfont.js. An error message will appear when using a real machine. White screen fails to load.

• When making animation effects, it is recommended to use the official Animation Api or CSS3 animation. Use transition with caution

• Finally, let me talk about a pitfall encountered by the poster. (Maybe my way of handling it is wrong). Do not use the animation transition effect of height change or width change on the map component level. WeChat Animation Api and css3 transition Animation attributes will get stuck and become stuck in ppt. Try to use their (WeChat API, CSS3) "transform" to solve the problem.

Recommended tutorial: "WeChat Mini Program"

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