À propos des mini-programmes

Notes aux articles. Bienvenue pour discuter avec vous. Veuillez signaler s'il y a des erreurs dans l'article.

1. Certaines opérations qui nécessitent la récupération de variables dans les données. Nous pouvons utiliser la déstructuration et l'affectation d'objets ES6 pour le simplifier. Nous pouvons utiliser cette méthode non seulement dans de petits programmes mais aussi dans vue.

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

2. L'attribut public du composant de l'applet caché Si vous ne faites pas attention au document, vous risquez de manquer cet attribut public. Équivalent à display:none; en CSS, il peut être appliqué aux nœuds qui changent fréquemment.

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

a cité le dicton officiel : « De manière générale, wx:if a un coût de commutation plus élevé et caché a un coût de rendu initial plus élevé. Par conséquent, si des commutations fréquentes sont nécessaires, il est préférable d'utiliser caché . S'il est peu probable que les conditions changent pendant l'exécution, wx:if est préférable. Pièges rencontrés lors de la documentation

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

4. À propos de l'image Lorsque vous devez restituer des images, vous trouverez une couture blanche dans le fichier. milieu d’images consécutives. S'il est tranché dans les détails du produit dans le centre commercial, il sera inesthétique d'avoir des rayures blanches au milieu. Ajoutez simplement display:bolck à la balise d'image.

<image></image>

5. À propos du saut

Si la méthode de traitement de la pile de pages maximale est dépassée (plus de 10 pages), le saut sera encapsulé.

• //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')

Actualiser lors du retour à la page précédente (comme le retour au centre personnel)

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

Définissez la valeur de la page précédente lors du retour à la page précédente

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

6.this.setData Si vous souhaitez modifier l'un des objets ou tableaux

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

Si nous avons un formulaire qui doit être lié à de nombreuses entrées de liaison, utilisez la solution ci-dessus et ajoutez data-*. Il n'est pas nécessaire d'écrire plusieurs méthodes, une seule suffit

•   <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. Encapsuler wx.request (il existe de nombreuses solutions de packaging pour wx.requset sur Internet, ici est la solution d'emballage originale de l'affiche originale) )

//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 Autres problèmes à noter

Si iconfont est utilisé, tous les fichiers sont insérés en même temps. Assurez-vous de supprimer iconfont.js. Un message d'erreur apparaîtra lors de l'utilisation d'une vraie machine. L'écran blanc ne parvient pas à se charger.

• Lors de la création d'effets d'animation, il est recommandé d'utiliser l'API d'animation officielle ou l'animation CSS3 avec prudence

• Enfin, permettez-moi. parler d'un écueil rencontré par l'affiche. (Peut-être que ma façon de le gérer est fausse). N'utilisez pas l'effet de transition d'animation du changement de hauteur ou de largeur au niveau du composant de la carte. Les attributs d'animation de transition WeChat Animation Api et CSS3 resteront bloqués et resteront bloqués dans ppt. Essayez d'utiliser leur "transformation" (API WeChat, CSS3) pour résoudre le problème.

• Tutoriel recommandé : "
Mini programme WeChat

"

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!