Notes de développement de l'applet WeChat, collectionnez-les ! !

Tutoriel de développement du programme WeChat MinicolonneAujourd'hui, je vais vous présenter les notes de développement du programme WeChat Mini, jetez-y un œil.

Récemment, je développe une applet WeChat et j'enregistre les points de connaissances que je rencontre souvent dans le projet afin de pouvoir les réviser lors du prochain développement.
Pour développer de petits programmes, il est recommandé d'utiliser vscode pour écrire du code, et les outils de développement WeChat sont utilisés pour visualiser les effets et déboguer.

1. Barre de titre personnalisée

De nos jours, les exigences de l'interface utilisateur sont de plus en plus élevées et les titres personnalisés apparaissent fréquemment. .Statut de la colonne

"navigationStyle": "custom"复制代码

2. Obtention des informations sur l'utilisateur

L'autorisation utilisateur est utilisée dans chaque mini-programme Oui, vous peut écrire votre propre logique selon votre propre processus de projet. Autorisation de l'utilisateur

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>复制代码

rrree

Si autorisé, appelez 「wx.getUserInfo」, 「wx.getSetting」 pour déterminer si l'utilisateur est autorisé

bindGetUserInfo (e) {    console.log(e.detail.userInfo) // 获取到用户信息}复制代码

3. Définir le style d'espace réservé pour la saisie

wx.getSetting({  success (res){    if (res.authSetting['scope.userInfo']) {      // 已经授权，可以直接调用 getUserInfo 获取头像昵称      wx.getUserInfo({        success: function(res) {          console.log(res.userInfo)        }      })    } else {        // 未授权    }  }})复制代码

<input placeholder="请输入手机号码" placeholder-class="placeholderinput"></input>复制代码

Routage

Les sauts d'itinéraire sont beaucoup utilisés. Chaque fois que je saute, je ne sais pas quelle méthode utiliser. Écrivez-la pour approfondir votre impression.
Accédez à la page TabBar et fermez toutes les autres pages non-tabBar

.placeholderinput {  color: #CCCCCF;  font-size: 36rpx;}复制代码

Accédez à une page de l'application, mais n'autorisez pas le passage à la page Tabbar et fermez la page actuelle

wx.switchTab({    url: '../../index/index'})复制代码

Conservez la page actuelle et accédez à une page de l'application. Mais vous ne pouvez pas accéder à la page de la barre d'onglets.

wx.navigateTo({    url: '../../index/index'})复制代码

5、image组件常用mode合法值梳理

为什么详细讲解image，每次后台上传的图片和我们前端界面的尺寸不一样，我们前端就要进行处理了，还有就是测试老是回提出一些图片变形上的问题，为了不让他们提出这些问题，我们详细分析一下，如果有不正确欢迎交流指正。 在固定宽高的情况下：

 <image src="/images/pic.jpg" class="pic" mode="aspectFill"></image>复制代码

.pic {  width: 600rpx;  height: 500rpx;  border: 1rpx solid #ccc;}复制代码

设置以下属性图片会发生什么变化

• scaleToFill  图片的宽高完全拉伸至填满 image 元素，会改变图片的宽高比，图片变形

  

• aspectFit 图片完整的展示出来，图片的宽高比不变。

  

• aspectFill 图片的宽高比不变，为完整的展示，会发生裁切  
  

  

常用的「aspectFit」  「aspectFill」这两个

6、设置input的「confirm-type」 的合法值

设置键盘右下角按钮的文字，type="text"时生效

• envoyer Le bouton dans le coin inférieur droit est "Envoyer"
• rechercher Le bouton dans le coin inférieur droit est "Rechercher"
• suivant Le bouton dans le coin inférieur droit est "Suivant"
• go Le bouton dans le coin inférieur droit est "Go"
• terminé Le bouton dans le coin inférieur droit est "Terminé"

Afin d'obtenir des paramètres de type de confirmation unifiés pour Android et iOS, il est également nécessaire de définir la valeur par défaut. La valeur est effectuée, la valeur par défaut d'Android est Entrée et la valeur par défaut d'iOS est Terminé, donc les quatre premiers sont les mêmes.

Recommandations d'apprentissage gratuites associées : Tutoriel de développement de programmes WeChat Mini

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!