Résumer quelques compétences en matière de développement de petits programmes

Cet article partage quelques conseils de développement de mini-programmes WeChat, dans l'espoir d'aider la majorité des développeurs.

1. Utilisation de variables globales

Chaque mini-programme doit appeler la méthode App dans app.js pour enregistrer l'exemple de mini-programme et lier la fonction de rappel du cycle de vie . Les fonctions de surveillance des erreurs et de surveillance des pages n'existent pas, etc.
Pour connaître la signification et l'utilisation détaillées des paramètres, veuillez vous référer au document de référence de l'application.

L'ensemble du mini-programme n'a qu'une seule instance d'application, qui est partagée par toutes les pages. Les développeurs peuvent obtenir un exemple d'application unique au monde via la méthode getApp, obtenir des données sur l'application ou appeler des fonctions enregistrées par les développeurs sur l'application.

Quand on réalise des petits programmes, on a souvent besoin d'un grand nombre de requêtes, et les noms de domaine demandés sont tous les mêmes On peut stocker le nom de domaine dans une variable globale, ce qui facilitera la modification. du nom de domaine demandé ultérieurement. (Ceux fréquemment utilisés tels que user_id, unionid, user_info peuvent être placés dans des variables globales)

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

N'oubliez pas de citer app.js lorsque vous l'utilisez sur la page, le mini programme a fourni des méthodes

//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. Utilisation des fonctions fléchées

Lorsque nous appelons une requête d'interface et modifions les données de la page via les données renvoyées par la requête, nous utilisons souvent un pointeur temporaire pour enregistrer ce pointeur.

Mais si vous utilisez les fonctions fléchées ES6, vous pouvez l'éviter

Utilisez des pointeurs temporaires

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
    })
   }
  })

Utilisez les fonctions fléchées ES6 ( ) => >

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

3. Encapsulation de la méthode de requête HTTP

Dans le mini programme, les requêtes http sont très fréquentes, mais taper wx.request à chaque fois est très ennuyeux, et le code est également redondant. Il ne reste plus rien, nous devons donc l'encapsuler
Nous devons d'abord créer un nouveau js dans le dossier utils, je l'ai nommé request.js, encapsuler la publication et y recevoir les requêtes. à la fin

//封装请求
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
}

Cette étape est très importante, pensez à l'ajouter !

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

Lorsqu'il est utilisé, il est appelé en haut de la page correspondante, en dehors de la Page

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

Lorsqu'il est utilisé, ↓

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. Dans la saisie de recherche, comment cliquer sur le bouton de recherche pour rechercher et modifier le style du bouton

Normalement, nous ajouterons un bouton de recherche au champ de recherche. et cliquez pour rechercher, mais le mini programme Il ne fonctionne pas sur le dom, il ne peut donc pas obtenir directement la valeur dans l'entrée, il doit donc être recherché via une autre méthode.

(1) Utilisez l'attribut bindconfirm dans le composant d'entrée (confirm-type="search" pour changer le bouton de complétion du clavier logiciel en "recherche")

<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) Utilisez le formulaire de soumission pour terminer la soumission du bouton de clic (la saisie doit ajouter l'attribut de nom)

Bouton de recherche

Utiliser le bouton au lieu de soumission du formulaire ( form-type="submit"), veuillez noter que vous ne pouvez pas utiliser la vue, vous devez utiliser le bouton

Vous devez modifier vous-même le style par défaut du bouton (la bordure du bouton doit être modifié dans bouton :: après)

//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属性
}

Recommandations associées : Tutoriel de développement de mini-programmes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!