Um mit Miniprogrammen zu beginnen, lesen Sie diesen Artikel-Mini-Programmentwicklung-php.cn

Erklärung

Der Artikel handelt von Fallstrickerfahrungen und Lösungen im tatsächlichen Kampf. Gleichzeitig ist es eine eigene Projektrezension, die ich mit allen hier teile. Wenn Sie den Artikel für Sie nützlich finden, geben Sie ihm bitte ein „Gefällt mir“. Verzeihen Sie, dass ich ein Headliner bin:)

Anmeldeautorisierung

Die Autorisierung (grundlegende Informationen, Mobiltelefonnummer) muss über die native Schaltflächenkomponente des Miniprogramms erfolgen und dann Geben Sie open an. Die Benutzerinformationen können durch einen Rückruf nach dem Typ abgerufen werden. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Route

Sie können die verschiedenen Methoden des Routensprungs kennenlernen. Hier sind die Fallstricke aufgeführt, auf die man stößt 10 Ebenen, daher müssen Sie bei der Verwendung berücksichtigen, ob historische Aufzeichnungen unbedingt erforderlich sind. Warum sagst du das? Szenario: Auf einer Listenseite (wie unten gezeigt) kann das Profil des Benutzers geändert werden. Wenn Sie „navigateTo“ zum Springen verwenden (/page/archivesEdit?id=1923XXXX), verwenden Sie „navigateTo“ (/page/archivesList) zum Ändern und Speichern Sie können bearbeiten und hin und her springen. Nach 10 Klicks ist das Springen nicht mehr möglich.

Um mit Miniprogrammen zu beginnen, lesen Sie diesen Artikel

Lösung: Denken Sie darüber nach, kann ich 2 „redirectTo“ verwenden? „redirectTo“ schließt den aktuellen Verlaufsdatensatz und springt zur nächsten Seite. Als Ergebnis sprang ich zur Änderungsseite und klickte auf die WeChat-eigene Rückgabefunktion, wodurch die Listenseite direkt übersprungen und zur Startseite gesprungen wurde. Zu diesem Zeitpunkt muss das Testmädchen erneut ein Fehlerticket einreichen. . .
Perfekte Haltung: Verwenden Sie einfach „navigationTo“ und „navigationBack“. Wenn ich bearbeite und speichere, verwende ich „navigationBack“, um zurückzukehren. Auf diese Weise liegt der Routing-Stack des Miniprogramms zwischen den Schichten 2 und 3. Natürlich muss die Schnittstelle manchmal auf der Listenseite erneut aufgerufen werden. Zu diesem Zeitpunkt bietet Routing Jump mehrere wichtige Hook-Funktionen onShow und onHide. Wir können die Listenschnittstelle während onShow aufrufen.

Diese beiden Hook-Funktionen reichen aus, um einfach zur vorherigen Seite zu springen, indem wir Zugriffsparameter wie Speicher speichern. Es fühlt sich aber nicht elegant an Es gibt keine gute Lösung.

Speicher

Szenario: Es gibt zwei Möglichkeiten, Speicher zu erhalten, wenn Sie direkt wx.getStorageSync('xxx') verwenden, um eine ID zu erhalten , gehen Sie zu Die Anforderungsschnittstelle wurde möglicherweise gesendet, bevor die Anforderung erhalten wurde, was zu einem Fehler führte.

Da wx.getStorageSync('xxx') asynchron ist, können wir async/await verwenden, um es bequem zu verwenden

onLoad: async function (options) {
        const editListParams = await wx.getStorageSync(&#39;editListParams&#39;)
        this.findReportDetails(editListParams)
}

Nach dem Login kopieren

webView

Webview wird auf einer bestimmten Seite nicht verwendet. Damals dachte ich, es sei so etwas wie ein in die Seite eingebetteter Iframe. Die richtige Nutzungseinstellung besteht darin, eine neue Seite zu erstellen und dann zu dieser Seite zu springen, um sie zu verwenden. Springen Sie beispielsweise zum offiziellen Kontoartikel zum Miniprogramm:

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>

Nach dem Login kopieren

Anfrage

WeChats eigene Anfrage im Netzwerk, obwohl Sie sie verwenden können Wenn dies möglich ist, führt dies zu Coderedundanz, wenn es nicht gekapselt ist. Sie können sich auf die folgende Verpackung beziehen:

ajax.js

import { baseURL } from &#39;../config/interfaceURL&#39; // baseUrl

class AJAX {
    AJAX ({ url, methods = &#39;GET&#39;, 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: {
                &#39;content-type&#39;: &#39;application/json&#39;
            },
            success: res => {
                const code = res.statusCode.toString()
                if (code.startsWith(&#39;2&#39;)) {
                    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: &#39;error&#39;,
            duration: 2000
        })
    }
    static serializeLink (obj) { // 序列化get请求
        let temp = &#39;?&#39;
        for (let index in obj) {
            if(obj.hasOwnProperty(index)){
                temp += (index + &#39;=&#39; + obj[index] + &#39;&&#39;)
            }
        }
        return temp.substr(0, temp.length - 1)
    }
}
export default AJAX

// model层调用
UserModel.js
import AJAX from &#39;../utils/AJAX&#39;

export class UserModel extends AJAX {
    // 小程序授权登陆
    login (params) {
        return this.AJAX({
            url: `/service/api/users/applet/login`,
            data: params,
            methods: &#39;POST&#39;
        })
    }
}
// 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 })
    // 其他
}

Nach dem Login kopieren

npm ecology und UI-Framework von Drittanbietern

Es gibt keine package.json-Datei im WeChat-Applet-Projekt wird direkt initialisiert. Daher ist es sinnlos, npm install xxx zu verwenden. Wir müssen also npm init selbst im Stammverzeichnis des Ordners ausführen. Erst dann kann npm über die WeChat-Entwicklertools erstellt werden. Wenn der Build erfolgreich ist, wird ein Verzeichnis generiert. Es wird empfohlen, die Vant-Mini-Programmversion von Youzan zu verwenden. Die Community ist aktiver und es gibt nicht viele Fallstricke bei der Verwendung.

Zwei-Wege-Bindung

Für Entwickler, die es gewohnt sind, Vue zu verwenden, fehlt dieser V-Modell-Syntaxzucker. Der Umgang mit der bidirektionalen Bindung von Formularen kann nervig sein. Daher ist es immer noch notwendig, über die bidirektionale Bindung im Miniprogramm zu sprechen.

file:index.js

Page({
    data: {
       list: []
    },
    onLoad: function (options) {
      // do ...
    },
    onInput (e) {
        let value = e.detail.value
        let temp = e.target.dataset.name.split(&#39;,&#39;)
        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>

Nach dem Login kopieren

Bilder herunterladen und Bildautorisierung durchführen

Das Szenario hier besteht darin, ein festes statisches Ressourcenbild herunterzuladen, das mit einer Download-Domäne konfiguriert werden muss Name, bevor sie wirksam werden können. Die Methode lautet wie folgt:

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

Nach dem Login kopieren

Das Speichern von Bildern erfordert auch eine Autorisierung. Schauen Sie sich einfach den Code an und fertig.

Andere

textarea hat auf iOS einen Füllwert. Das ist eine Falle für mich. Ich verwende entweder den gesamten Textbereich oder die gesamte Eingabe, um das Formular auszufüllen. Es gibt auch einige andere Stilprobleme, ähnlich wie beim IE. ! ! Verwenden Sie Flex Float mehr, um einige Unterschiede zu lösen. Jeder ist herzlich eingeladen, im Kommentarbereich Fragen zu stellen, sich auszutauschen und zu lernen. Sie können auch dem offiziellen Konto von Haoxiangjia folgen, um weitere hochwertige Artikel zu erhalten.

Empfohlenes Tutorial: „WeChat Mini-Programm“

Das obige ist der detaillierte Inhalt vonUm mit Miniprogrammen zu beginnen, lesen Sie diesen Artikel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!