This article shares some WeChat mini program development tips for everyone, hoping to help the majority of developers.

1. Use of global variables

Each mini program needs to call the App method in app.js to register the mini program example and bind the life cycle callback function. Error monitoring and page monitoring functions do not exist, etc.
For detailed parameter meanings and usage, please refer to the App reference document.

The entire mini program has only one App instance, which is shared by all pages. Developers can obtain a globally unique App example through the getApp method, obtain data on the App, or call functions registered by developers on the App.

When we make small programs, we often need a large number of requests, and the domain names requested are also the same. We can store the domain name in a global variable, which will facilitate the modification of the domain name requested later. . (Frequently used ones such as user_id, unionid, user_info can be placed in global variables)

//app.js
App({
 globalData: {
  user_id: null,
  unionid:null,
  url:"https://xxx.com/index.php/Home/Mobile/",   //請(qǐng)求的域名
  user_info:null
 }
})

Remember to quote app.js when using it on the page, the mini program has provided methods

//index.js
//獲取應(yīng)用實(shí)例
const app = getApp()  //獲取app
//let url = app.globalData.url; //使用方法，可先定義或者直接使用app.globalData.url
wx.request({
  url: app.globalData.url + 'checkfirst', //就可以直接在這里調(diào)用
  method:'POST',
  header:{"Content-Type":"application/x-www-form/"}
  data:{},
  success:(res)=>{}

2. The use of arrow functions

When we call an interface request and change the page data through the data returned by the request, we often use a temporary pointer to save this pointer.

But if you use ES6 arrow functions, you can avoid it

Use temporary pointers

onLoad: function (options) {
  let that = this //保存臨時(shí)指針
  wx.request({
   url: url + 'GetCouponlist',
   method: 'POST',
   header: { 'Content-Type': 'application/x-www-form-urlencoded' },
   data: { },
   success(res) {
    that.setData({  //使用臨時(shí)指針
     coupon_length:res.data.data.length
    })
   }
  })

Use ES6 arrow functions ( ) => {}

success:(res) => {
    this.setData({  //此時(shí)this仍然指向onLoad
     coupon_length:res.data.data.length
    })
   }

3. Encapsulation of HTTP request method

In small programs, http requests are very frequent, but typing wx.request every time is very annoying, and the code is also redundant. There is more, so we need to encapsulate it
First we need to create a new js in the utils folder, I named it request.js, and encapsulate the post and get requests in it. Remember to declare it at the end

//封裝請(qǐng)求
const app = getApp()
let host = app.globalData.url

/**
 * POST 請(qǐng)求
 * model:{
 * url:接口
 * postData:參數(shù) {}
 * doSuccess:成功的回調(diào)
 *  doFail:失敗回調(diào)
 * }
 */
function postRequest(model) {
 wx.request({
  url: host + model.url,
  header: {
   "Content-Type": "application/x-www-form-urlencoded"
  },
  method: "POST",
  data: model.data,
  success: (res) => {
   model.success(res.data)
  },
  fail: (res) => {
   model.fail(res.data)
  }
 })
}

/**
 * GET 請(qǐng)求
 * model:{
 *  url:接口
 *  getData:參數(shù) {}
 *  doSuccess:成功的回調(diào)
 *  doFail:失敗回調(diào)
 * }
 */
function getRequest(model) {
 wx.request({
  url: host + model.url,
  data: model.data,
  success: (res) => {
   model.success(res.data)
  },
  fail: (res) => {
   model.fail(res.data)
  }
 })
}

/**
 * module.exports用來(lái)導(dǎo)出代碼
 * js中通過 let call = require("../util/request.js") 加載
 */
module.exports = {
 postRequest: postRequest,
 getRequest: getRequest
}

This step is very important, remember to add it!

module.exports = {
postRequest: postRequest,
getRequest: getRequest
}

When used, it is called at the top of the corresponding page, outside the Page

let call = require("../../utils/request.js")

When used, ↓

get

//獲取廣告圖
  call.getRequest({
   url:'GetAd',
   success:(res)=>{   //箭頭函數(shù)沒有指針問題
    this.setData({
     urlItem: res.data
    })
   }
  })

post

call.postRequest({
   url: 'addorder',
   data: {
    shop_id: that.data.shop_id,
    user_id: app.globalData.user_id,
    coupon_sn: that.data.coupon_sn,
    carType: that.data.car_type,
    appointtime: that.data.toTime
   },
   success:(res)=>{
    console.log(res)
    wx.navigateTo({
     url: '../selectPay/selectPay?order_sn=' + res.data.order_sn + '&fee=' + res.data.real_pay + "&order_id=" + res.data.order_id,
    })
   }
  })

4. In the search input, how to click the search button to search and modify the button style

Normally we will add a search button to the search box and click to search, but the mini program It does not operate on the dom, so it cannot directly obtain the value in the input, so it needs to be searched through another method.

(1) Through the bindconfirm attribute in the input component (confirm-type="search", you can change the completion button of the soft keyboard to "search")

<input class=&#39;search_input&#39; type=&#39;text&#39; confirm-type=&#39;search&#39; bindconfirm=&#39;toSearch&#39; ></input>
//js部分
toSearch(e){
 console.log(e.detail.value) //e.detail.value 為input框輸入的值
}

(2) Use the form submission to complete the submission of the click button (input needs to add the name attribute)

Search button

Use button instead of form submission ( form-type="submit"), please note that you cannot use view, you must use button

You need to modify the default style of the button yourself (the border of the button must be modified in button::after)

//wxml部分
<form bindsubmit="formSubmit" bindreset="formReset">
 <input class=&#39;search_input&#39; type=&#39;text&#39; confirm-type=&#39;search&#39; name="search" bindconfirm=&#39;toSearch&#39; >
 <button class=&#39;search_btn&#39; form-type=&#39;submit&#39;>搜索</button></input>
</form>

//js部分
formSubmit(e){
 console.log(e.detail.value.search) //為輸入框的值，input記得添加name屬性
}

Related recommendations: Mini Program Development Tutorial

The above is the detailed content of Summarize some small program development skills. For more information, please follow other related articles on the PHP Chinese website!