Pour démarrer avec les mini-programmes, lisez cet article

Explication

L'article porte sur les expériences de pièges et les solutions en combat réel. En même temps, c'est ma propre revue de projet. Je la partage avec tout le monde ici, j'espère qu'elle pourra aider tout le monde. Si vous trouvez l'article utile, n'hésitez pas à l'aimer, merci ! Pardonnez-moi d'être une tête d'affiche :)

Autorisation de connexion

L'autorisation (informations de base, numéro de téléphone portable) doit utiliser le composant bouton natif du mini programme, puis spécifiez open- Les informations utilisateur peuvent être obtenues par rappel après le type. Le code est le suivant :

index.wxml
<view wx:if="{{!getUserInfo}}">
       <view>你还未登录，请先授权登录</view>
            <button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">
                授权登录
            </button>
        </view>
        <view wx:if="{{getUserInfo && !getPhone}}">
            <view>你还未绑定手机号，请先去绑定</view>
            <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
                立即绑定
            </button>
</view>
index.js
page({
    // ... 
    data: {
        hasUserInfo: false,
        canIUse: wx.canIUse(&#39;button.open-type.getUserInfo&#39;),
        userInfo: {},
        getUserInfo: false,
        getPhone: false,
        hasAuth: false
    },
    onLoad: async function () {
        var that = this;
        // 查看是否授权
        wx.getSetting({
            success: function (res) {
                if (res.authSetting[&#39;scope.userInfo&#39;]) {
                    wx.login({
                        success: loginRes => {
                            // 获取到用户的 code 之后：loginRes.code
                            wx.getUserInfo({
                                success: async function (res) {
                                    // 这里处理业务逻辑
                                }
                            })
                        }
                    })
                } else {
                    // 用户没有授权
                }
            }
        });
    },
    bindGetUserInfo: function (e) {
        // 需要什么信息都从e中拿到 以下部分业务逻辑
        if (e.detail.userInfo) {
            //用户按了允许授权按钮
            var that = this;
            // 获取到用户的信息
            wx.login({
                success: async res => {
                    const aUserModel = new UserModel();
                    const params = {
                        code: res.code,
                        encryptedData: e.detail.encryptedData,
                        iv: e.detail.iv
                    }
                    const { data } = await aUserModel.login({ ...params })
                    if(data.roles){
                        // do ...
                    }
                    if (data.mobile) {
                        // do ...
                    }
                }
            });
            //授权成功后,通过改变 isHide 的值，让实现页面显示出来，把授权页面隐藏起来
            that.setData({
                isHide: false
            });
        } else {
            //用户按了拒绝按钮
            wx.showModal({
                title: &#39;警告&#39;,
                content: &#39;拒绝授权，您将无法使用小程序&#39;,
                showCancel: false
            });
        }
    },
    getPhoneNumber: async function (e) {
        if (e.detail.encryptedData) {
            //用户按了允许授权按钮
            const aUserModel = new UserModel();
            const params = {
                userId: userInfo.id,
                encryptedData: e.detail.encryptedData,
                iv: e.detail.iv
            }
            // do ...
        } else {
            //用户按了拒绝按钮
            wx.showModal({
                title: &#39;警告&#39;,
                content: &#39;拒绝授权，您将无法使用小程序&#39;,
                showCancel: false
            })
        }
    },
    // ...
})

Route

Vous pouvez vous rendre sur le site officiel pour apprendre les différentes méthodes de saut d'itinéraire. Voici les pièges rencontrés. NavigateTo itinéraire jump ne peut aller qu'à 10. niveaux, donc lors de l'utilisation, vous devez vous demander si des enregistrements historiques sont absolument nécessaires. Pourquoi tu dis ça ? Scénario : Une page de liste (comme indiqué ci-dessous), le profil de l'utilisateur peut être modifié. Si vous utiliseznavigaTo pour sauter (/page/archivesEdit?id=1923XXXX), utiliseznavigaTo (/page/archivesList) pour modifier et enregistrer, de sorte que vous pouvez modifier et sauter d'avant en arrière. Les clics ne seront plus autorisés à sauter après 10 fois.

Solution : Pensez-y, puis-je utiliser 2 redirectTo ? redirectTo ferme l'enregistrement de l'historique actuel et passe à la page suivante. En conséquence, j'ai sauté vers la page de modification et cliqué sur la propre fonction de retour de WeChat, qui a directement ignoré la page de liste et a sauté à la page d'accueil. À ce moment-là, la fille testée doit à nouveau soumettre un ticket de bug. . .
Posture parfaite : utilisez simplement NavigTo et NavigBack. Lorsque je modifie et enregistre, j'utilise naviguerBack pour revenir. De cette façon, la pile de routage du mini-programme se situera entre les couches 2 et 3. Bien sûr, parfois l'interface doit être appelée à nouveau sur la page de liste. À ce stade, le saut de routage fournit plusieurs fonctions de hook importantes onShow et onHide. Nous pouvons appeler l'interface de liste pendant onShow.

Ces deux fonctions de hook nous suffisent pour sauter simplement. Dans des scénarios plus complexes, nous pouvons revenir à la page précédente pour le fonctionnement en enregistrant les paramètres d'accès tels que le stockage. Cela ne semble pas élégant, mais. il n'y a pas de bonne solution.

Stockage

---

Scénario : Il existe 2 façons d'obtenir du stockage lorsque vous utilisez directement wx.getStorageSync('xxx') pour obtenir un identifiant. , accédez à L'interface de requête a peut-être été envoyée avant que la requête ne soit obtenue, ce qui a entraîné un bug.

Parce que wx.getStorageSync('xxx') est asynchrone, nous pouvons utiliser async/await pour l'utiliser facilement

onLoad: async function (options) {
        const editListParams = await wx.getStorageSync('editListParams')
        this.findReportDetails(editListParams)
}

webView

---

Webview n'est pas utilisé sur une certaine page, à cette époque, je pensais que c'était quelque chose comme une iframe intégrée à la page. L'attitude d'utilisation correcte est de créer une nouvelle page, puis d'accéder à cette page pour l'utiliser. Par exemple, accédez à l'article du compte officiel associé au mini programme :

other.wxml
<navigator url="/pages/webView/webView"  hover-class="none">跳转到webView</navigator>
webView.wxml
<web-view src="https://mp.weixin.qq.com/s/xxxx"></web-view>

request

---

La propre demande de WeChat sous le réseau, bien que vous puissiez l'utiliser si vous le pouvez, s'il n'est pas encapsulé, cela entraînera une redondance du code. Vous pouvez vous référer à l'emballage suivant

ajax.js

import { baseURL } from '../config/interfaceURL' // baseUrl

class AJAX {
    AJAX ({ url, methods = 'GET', data = {} }) {
        return new Promise((resolve, reject) => {
            this.request(url, resolve, reject, methods, data)
        })
    }
    request (url, resolve, reject, methods, data) {
        wx.request({
            url: baseURL + url,
            method: methods,
            data: data,
            header: {
                'content-type': 'application/json'
            },
            success: res => {
                const code = res.statusCode.toString()
                if (code.startsWith('2')) {
                    resolve(res)
                } else {
                    reject()
                    const errorMessage = res.data.message
                    AJAX.showError(errorMessage)
                }
            },
            fail: err => {
                reject()
                AJAX.showError("网络异常，请稍后重试！")
            }
        })
    }
    static showError (errorMessage) {
        wx.showToast({
            title: errorMessage,
            icon: 'error',
            duration: 2000
        })
    }
    static serializeLink (obj) { // 序列化get请求
        let temp = '?'
        for (let index in obj) {
            if(obj.hasOwnProperty(index)){
                temp += (index + '=' + obj[index] + '&')
            }
        }
        return temp.substr(0, temp.length - 1)
    }
}
export default AJAX

// model层调用
UserModel.js
import AJAX from '../utils/AJAX'

export class UserModel extends AJAX {
    // 小程序授权登陆
    login (params) {
        return this.AJAX({
            url: `/service/api/users/applet/login`,
            data: params,
            methods: 'POST'
        })
    }
}
// control调用
index.js
async onLoad (options){
    const aUserModel = new UserModel()
    const params = {
        code: loginRes.code,
        encryptedData: res.encryptedData,
        iv: res.iv
    }
    const { data } = await aUserModel.login({ ...params })
    // 其他
}

npm ecology et framework d'interface utilisateur tiers

---

Il n'y a pas de fichier package.json dans le projet d'applet WeChat qui est initialisé directement. Il est donc inutile d'utiliser npm install xxx. Nous devons donc exécuter nous-mêmes npm init dans le répertoire racine du dossier. Ce n'est qu'alors que npm pourra être construit via les outils de développement WeChat. Un répertoire sera généré si la construction réussit. Il est recommandé d'utiliser la version vant mini du programme Youzan. La communauté est plus active et il n'y aura pas beaucoup d'embûches lors de son utilisation.

Liaison bidirectionnelle

---

Pour les développeurs habitués à utiliser vue, ce sucre de syntaxe du modèle V est manquant. Gérer la liaison bidirectionnelle des formulaires peut être pénible. Il faut donc encore parler de la liaison bidirectionnelle dans le mini-programme.

file:index.js

Page({
    data: {
       list: []
    },
    onLoad: function (options) {
      // do ...
    },
    onInput (e) {
        let value = e.detail.value
        let temp = e.target.dataset.name.split(',')
        let tempKey = temp[1]
        let tempIndex = temp[0]
        let tempSubIndex = temp[2]
        let targetKey = `list[${tempIndex}].children[${tempSubIndex}].${tempKey}`
        this.setData({
            [targetKey]: value
        })
    }
})

file:index.wxml
<block  wx:for="{{item.children}}"  wx:for-item="subItem"  wx:key="{{index}}">
    <view class="td" style="height: {{ 100 / item.children.length}}%;">
      <input placeholder-style="color:#ccccccc;"  type="text" placeholder="未填写" value="{{subItem.testResult}}" data-name="{{idx}},testResult,{{index}}"  bindinput="onInput"/>
    </view>
</block>

Télécharger des images et autorisation de téléchargement d'image

---

Le scénario ici consiste à télécharger une image de ressource statique fixe. Les images réseau doivent être configurées avec un domaine de téléchargement. nom avant qu'elles puissent prendre effet. La méthode Comme suit :

 savePhoto () {
        const _this = this;
        wx.getImageInfo({
            src: '/static/images/home/Qr.png',
            success: function (res) {
                wx.saveImageToPhotosAlbum({
                    filePath: res.path,
                    success (result) {
                        _this.setData({ show: false });
                        wx.showToast({
                            title: '保存成功',
                            icon: 'success',
                            duration: 2000
                        })
                    },
                    fail (err) {
                        if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") {
                            wx.openSetting({
                                success (settingdata) {
                                    if (settingdata.authSetting['scope.writePhotosAlbum']) {
                                        _this.savePhoto()
                                    } else {
                                        wx.showToast({
                                            title: '获取权限失败,无法保存图片',
                                            icon: 'success',
                                            duration: 2000
                                        })
                                    }
                                }
                            })
                        }
                    }
                })
            }
        })
    }

La sauvegarde des images nécessite également une autorisation, il suffit de regarder le code et le tour est joué.

Autres

---

textarea aura une valeur de remplissage sur iOS. C'est un piège pour moi. J'utilise soit toutes les zones de texte, soit toutes les entrées pour remplir le formulaire. Il existe également quelques autres problèmes de style, un peu comme IE. ! ! Utilisez davantage flex float pour résoudre certaines différences~

Conclusion

---

Chaque point de l'article est un problème rencontré lors du développement de petits programmes. Ma capacité est limitée. , tout le monde est invité à poser des questions, à échanger et à apprendre dans la zone de commentaires, et vous pouvez également suivre le compte officiel de Haoxiangjia pour obtenir davantage d'articles de haute qualité.

Tutoriel recommandé : "Programme 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!