小程序入門就看這篇

這篇文章主要介紹了小程序入門就看這篇，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

說明

文章為實戰中踩坑經歷，以及解決方案。同時是自己的一個項目回顧，在這里分享給大家，希望能幫助到大家，如果覺得文章對你有用，請點個贊，謝謝！原諒我也是個標題黨：）

登錄授權

授權（基本信息，手機號碼 ）必須使用小程序原生的的button組件，然后指定open-type 后通過回調才能拿到用戶信息。代碼入下：

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('button.open-type.getUserInfo'),
        userInfo: {},
        getUserInfo: false,
        getPhone: false,
        hasAuth: false
    },
    onLoad: async function () {
        var that = this;
        // 查看是否授權
        wx.getSetting({
            success: function (res) {
                if (res.authSetting['scope.userInfo']) {
                    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: '警告',
                content: '拒絕授權，您將無法使用小程序',
                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: '警告',
                content: '拒絕授權，您將無法使用小程序',
                showCancel: false
            })
        }
    },
    // ...
})

路由

路由跳轉的各個方法可以去官網學習，這里提遇到的坑，navigateTo路由跳轉最多只能10層，所以使用的時候需要考慮是不是確定需要歷史記錄。為什么要這么說呢。 場景：一個列表頁面（如下圖），用戶的檔案是可以修改的，如果用navigateTo跳轉（/page/archivesEdit?id=1923XXXX）,修改保存用navigateTo（/page/archivesList），這樣來回編輯跳轉10次就不讓點擊跳轉了。

解決：思考那我用2個redirectTo 行不行？redirectTo是關閉當前歷史記錄跳轉到下一頁面。造成了我跳轉到修改頁面點擊微信自帶的返回是直接跳過列表頁面跳轉到首頁。這個時候測試小姐姐就又要提bug單了。。。
完美姿勢： 就是用navigateTo和navigateBack。我再編輯保存的時候返回用navigateBack返回。這樣小程序的路由棧就一會在2-3層之間。當然有時候在列表頁面會遇到要重新調用接口，這時候路由跳轉提供了幾個重要的鉤子函數onShow，onHide，我們可以在onShow的時候可以調用一下列表的接口。

這2個鉤子函數足夠我們簡單的跳轉，更復雜的場景下可以通過存Storage這種存取參數來返回到上一個頁面進行操作，感覺不是優雅，但是沒有好的辦法解決了。

Storage

場景：storage有2種方式獲取，當你直接wx.getStorageSync('xxx')獲取一個id，去請求接口的可能是獲取不到就已經發送請求了，導致出現bug。

因為wx.getStorageSync('xxx')是異步的 我們可以利用 async/await去方便的使用

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

webView

webview不是在某個頁面使用的，當時我以為是類似iframe這種東西嵌入到頁面。正確的使用態度是新建一個page頁面，然后跳轉到這個page去使用。例如跳轉到小程序關聯的公眾號文章：

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

微信自帶的網絡下的request，雖然能拿來就用，如果不封裝就會造成代碼冗余。大家可自行參考如下封裝

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生態以及第三方ui框架

直接通過初始化的微信小程序項目里面沒有package.json文件。所以在使用npm install xxx 是沒有卵用。所以我們要自己在文件夾根目錄下執行npm init 。這時候才能通過微信開發者工具構建npm，構建成功會生成一個目錄。推薦用有贊的vant小程序版,社區較活躍，使用起來不會有很多坑。

雙向綁定

對于習慣使用vue的開發者來說，少了這個v-model語法糖。在處理表單的雙向綁定會顯得比較蛋疼。所以還是有必要說下小程序里面的雙向綁定是怎么樣的。

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>

下載圖片和下載圖片授權

這里場景是下載一個固定的靜態資源圖片，網絡圖片需先配置download域名才能生效,方法如下：

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

保存圖片也是需要授權的，看代碼就完事了。

其他

textarea 在ios上表現會有padding值。我曹 這個就坑了。我采用要不全是textarea或者全是input 這種去實現表單的填寫。 其他樣式問題也蠻多的，有點ie的味道。！！ 多用flex float去解決一些差異吧~

感謝你能夠認真閱讀完這篇文章，希望小編分享的“小程序入門就看這篇”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!