小程序入门就看这篇

文章为实战中踩坑经历，以及解决方案。同时是自己的一个项目回顾，在这里分享给大家，希望能帮助到大家，如果觉得文章对你有用，请点个赞，谢谢！原谅我也是个标题党：）

登录授权

授权（基本信息，手机号码 ）必须使用小程序原生的的button组件，然后指定open-type 后通过回调才能拿到用户信息。代码入下：

index.wxml

       你还未登录，请先授权登录
            
                授权登录
            
        
        
            你还未绑定手机号，请先去绑定
            
                立即绑定
            

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

路由

路由跳转的各个方法可以去官网学习，这里提遇到的坑，navigateTo路由跳转最多只能10层，所以使用的时候需要考虑是不是确定需要历史记录。为什么要这么说呢。 场景：一个列表页面（如下图），用户的档案是可以修改的，如果用navigateTo跳转（/page/archivesEdit?id=1923XXXX）,修改保存用navigateTo（/page/archivesList），这样来回编辑跳转10次就不让点击跳转了。

场景：storage有2种方式获取，当你直接wx.getStorageSync(&＃39;xxx&＃39;)获取一个id，去请求接口的可能是获取不到就已经发送请求了，导致出现bug。

因为wx.getStorageSync(&＃39;xxx&＃39;)是异步的 我们可以利用 async/await去方便的使用

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

webView

webview不是在某个页面使用的，当时我以为是类似iframe这种东西嵌入到页面。正确的使用态度是新建一个page页面，然后跳转到这个page去使用。例如跳转到小程序关联的公众号文章：

other.wxml
跳转到webView
webView.wxml

request

微信自带的网络下的request，虽然能拿来就用，如果不封装就会造成代码冗余。大家可自行参考如下封装

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

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(&＃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

    
      
    

下载图片和下载图片授权

这里场景是下载一个固定的静态资源图片，网络图片需先配置download域名才能生效,方法如下：

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

保存图片也是需要授权的，看代码就完事了。

其他

textarea 在ios上表现会有padding值。我曹 这个就坑了。我采用要不全是textarea或者全是input 这种去实现表单的填写。 其他样式问题也蛮多的，有点ie的味道。！！ 多用flex float去解决一些差异吧~

结语

文章每个点都是开发小程序的时候遇到的问题，本人能力有限，欢迎大家在评论区提问题交流学习，也可以关注好享家公众号获取更多优质文章。

推荐教程：《微信小程序》

以上就是小程序入门就看这篇的详细内容，更多请关注其它相关文章！