Summarize some small program development skills

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/",   //请求的域名
  user_info:null
 }
})

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

//index.js
//获取应用实例
const app = getApp()  //获取app
//let url = app.globalData.url; //使用方法，可先定义或者直接使用app.globalData.url
wx.request({
  url: app.globalData.url + 'checkfirst', //就可以直接在这里调用
  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 //保存临时指针
  wx.request({
   url: url + 'GetCouponlist',
   method: 'POST',
   header: { 'Content-Type': 'application/x-www-form-urlencoded' },
   data: { },
   success(res) {
    that.setData({  //使用临时指针
     coupon_length:res.data.data.length
    })
   }
  })

Use ES6 arrow functions ( ) => {}

success:(res) => {
    this.setData({  //此时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

//封装请求
const app = getApp()
let host = app.globalData.url

/**
 * POST 请求
 * model:{
 * url:接口
 * postData:参数 {}
 * doSuccess:成功的回调
 *  doFail:失败回调
 * }
 */
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 请求
 * model:{
 *  url:接口
 *  getData:参数 {}
 *  doSuccess:成功的回调
 *  doFail:失败回调
 * }
 */
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用来导出代码
 * 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)=>{   //箭头函数没有指针问题
    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!