小程序入门就看这篇-小程序开发-PHP中文网

首页

微信小程序

小程序开发

小程序入门就看这篇

hzc

Jun 16, 2020 am 10:42 AM

微信小程序

说明

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

登录授权

授权（基本信息，手机号码）必须使用小程序原生的的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(&#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次就不让点击跳转了。

解决：思考那我用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(&#39;editListParams&#39;)
        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 &#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
<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: &#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去解决一些差异吧~

结语

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

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

以上是小程序入门就看这篇的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文转载于：掘金社区。如有侵权，请联系admin@php.cn删除