미니 프로그램을 시작하려면 이 기사를 읽어보세요.

설명

이 글에는 실제 전투에서의 함정 경험과 해결책이 담겨 있습니다. 동시에 제가 작성한 프로젝트 리뷰입니다. 모든 사람에게 도움이 되기를 바랍니다. 도움이 되셨다면 좋아요를 눌러주세요. 헤드라이너가 되어 죄송합니다 :)

로그인 권한

인증(기본정보,휴대폰번호)은 미니프로그램의 기본버튼 컴포넌트를 이용하시고, 콜백을 통해 사용자 정보를 얻으실 수 있도록 오픈형을 지정해주셔야 합니다. 코드는 다음과 같습니다:

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

routing

공식 웹사이트에 가서 다양한 루트 점프 방법을 배울 수 있습니다. NavigateTo 루트 점프는 최대 10레벨까지만 가능하므로, 이력 기록이 필요한지 고려해야 합니다. 왜 그런 말을 합니까? 시나리오: 목록 페이지(아래 참조)에서 사용자 프로필을 수정할 수 있습니다. 편집하고 앞뒤로 이동할 수 있습니다. 10번 이후에는 클릭이 더 이상 허용되지 않습니다.

해결책: 생각해 보세요. 2개의 리디렉션을 사용할 수 있나요? RedirectTo는 현재 기록 레코드를 닫고 다음 페이지로 이동합니다. 그러다 보니 수정페이지로 점프해서 위챗 자체 반품 기능을 클릭했는데, 위챗 자체의 복귀 기능이 바로 목록 페이지를 건너뛰고 홈페이지로 점프하게 되었습니다. 이때, 테스트 소녀는 버그 티켓을 다시 제출해야 합니다. . .
완벽한 자세: NavigateTo 및 NavigationBack을 사용하세요. 편집하고 저장할 때 NavigateBack을 사용하여 돌아갑니다. 이러한 방식으로 미니 프로그램의 라우팅 스택은 레이어 2-3 사이에 있게 됩니다. 물론 목록 페이지에서 인터페이스를 다시 호출해야 하는 경우도 있습니다. 이때 라우팅 점프는 onShow 및 onHide에서 몇 가지 중요한 후크 기능을 제공합니다.

이 두 가지 후크 기능은 간단한 점프를 하기에는 충분합니다. 더 복잡한 시나리오에서는 Storage와 같은 액세스 매개변수를 저장하여 이전 페이지로 돌아갈 수 있지만 좋은 방법은 없습니다. 그것을 해결하기 위해.

Storage

---

시나리오: wx.getStorageSync('xxx')를 사용하여 ID를 직접 얻을 때 ID를 얻을 수 없는 경우 요청 인터페이스가 이미 요청을 보냈을 수 있습니다. 오류가 발생합니다.

wx.getStorageSync('xxx')는 비동기식이므로 async/await를 이용하면 편리하게 사용할 수 있습니다

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

webView

---

webview는 당시 특정 페이지에서는 사용하지 않는 줄 알았습니다. iframe과 같은 것이 페이지에 포함되어 있습니다. 올바른 사용 태도는 새 페이지를 만든 다음 이 페이지로 이동하여 사용하는 것입니다. 예를 들어, 미니 프로그램과 관련된 공식 계정 글로 이동하세요:

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

---

WeChat 자체 네트워크의 요청은 즉시 사용할 수 있지만, 캡슐화하지 않으면 코드 중복이 발생합니다. 직접 참조하려면 다음 패키지를 참조하세요.

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 프레임워크

---

WeChat 애플릿 프로젝트에는 직접 초기화되는 package.json 파일이 없습니다. 따라서 npm install xxx를 사용하는 것은 쓸모가 없습니다. 따라서 폴더의 루트 디렉터리에서 npm init을 직접 실행해야 합니다. 그런 다음에만 WeChat 개발자 도구를 통해 npm을 빌드할 수 있습니다. 빌드가 성공하면 디렉터리가 생성됩니다. Youzan의 vant mini 프로그램 버전을 사용하는 것이 좋습니다. 커뮤니티가 더 활발해지고 사용에 있어 많은 어려움이 없을 것입니다.

양방향 바인딩

---

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>

이미지 다운로드 및 이미지 인증 다운로드

---

여기의 시나리오는 고정된 정적 리소스 이미지를 다운로드하는 것입니다. 네트워크 이미지를 적용하려면 다운로드 도메인 이름을 구성해야 합니다.

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

이미지를 저장하려면 인증도 필요합니다. 코드를 참조하세요.

Others

---

텍스트 영역은 iOS에서 패딩 값을 갖습니다. 이것은 나에게 함정이다. 양식을 작성하기 위해 모든 텍스트 영역 또는 모든 입력을 사용합니다. IE와 비슷한 몇 가지 다른 스타일 문제도 있습니다. ! ! 차이점을 해결하려면 flex float를 더 사용하세요~

결론

---

기사의 모든 내용은 작은 프로그램을 개발할 때 직면하는 문제입니다. 제 능력이 부족해서 교환하고 배울 수 있습니다. , Haoxiangjia 공식 계정을 팔로우하면 더 많은 고품질 기사를 얻을 수도 있습니다.

추천 튜토리얼: "WeChat 미니 프로그램"

위 내용은 미니 프로그램을 시작하려면 이 기사를 읽어보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!