解説
この記事は、実戦での落とし穴体験と解決策についての記事です。同時に、これは私自身のプロジェクトのレビューでもあります。ここで皆さんと共有します。皆さんのお役に立てれば幸いです。記事が役に立ったと思ったら、「いいね！」をお願いします。ありがとうございます!ヘッドライナーであることをお許しください:)
ログイン認証
認証 (基本情報、携帯電話番号) では、ミニ プログラムにネイティブなボタン コンポーネントを使用する必要があります。 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
})
}
},
// ...
})Routing
公式 Web サイトにアクセスして、ルート ジャンプのさまざまな方法を学ぶことができます。ここでは、遭遇する落とし穴を紹介します。NavigateTo ルート ジャンプは、最大までしか実行できません。レベルは10なので、使用する場合は史料が確実に必要かどうかを考慮する必要があります。なぜそんなことを言うのですか？ シナリオ: リスト ページ (以下に示すように) では、ユーザーのプロフィールを変更できます。navigateTo を使用してジャンプする場合 (/page/archivesEdit?id=1923XXXX)、変更して保存するには navigateTo (/page/archivesList) を使用します。編集したり、前後にジャンプしたりできます。10 回クリックするとジャンプできなくなります。
解決策: 考えてみてください。2 つの redirectTo を使用できますか? redirectTo は、現在の履歴レコードを閉じて、次のページにジャンプします。その結果、変更ページにジャンプし、WeChat 独自の戻る機能をクリックすると、一覧ページをスキップしてホームページに直接ジャンプしました。このとき、テストガールは再度バグチケットを提出する必要があります。 。 。
完璧な姿勢: navigateTo と navigateBack を使用するだけです。編集して保存するときは、navigateBack を使用して戻ります。このようにして、ミニ プログラムのルーティング スタックはレイヤー 2 ～ 3 の間に配置されます。もちろん、リスト ページで再度インターフェイスを呼び出す必要がある場合があります。このとき、ルーティング ジャンプには、いくつかの重要なフック関数 onShow および onHide が用意されています。onShow 中にリスト インターフェイスを呼び出すことができます。
単純なジャンプを行うには、これら 2 つのフック関数で十分です。より複雑なシナリオでは、ストレージなどのアクセス パラメーターを保存することで、前のページに戻って操作できます。エレガントではありません。 、しかし、良い解決策はありません。
ストレージ
シナリオ: ストレージを取得するには、wx.getStorageSync('xxx') で ID を直接取得する 2 つの方法があります。リクエストを取得する前にリクエスト インターフェイスが送信された可能性があり、バグが発生しました。
wx.getStorageSync('xxx') は非同期なので、async/await を使用すると便利です
onLoad: async function (options) {
const editListParams = await wx.getStorageSync('editListParams')
this.findReportDetails(editListParams)
}webView
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
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 フレームワーク
双方向バインディング
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
結論
WeChat ミニ プログラム 」
以上がミニ プログラムを始めるには、この記事をお読みくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
