ホームページ >WeChat アプレット >ミニプログラム開発 >ミニ プログラムを始めるには、この記事をお読みください
ミニ プログラムを始めるには、この記事をお読みください
- hzc転載
- 2020-06-16 10:42:092761ブラウズ
解説
この記事は、実戦での落とし穴体験と解決策についての記事です。同時に、これは私自身のプロジェクトのレビューでもあります。ここで皆さんと共有します。皆さんのお役に立てれば幸いです。記事が役に立ったと思ったら、「いいね！」をお願いします。ありがとうございます!ヘッドライナーであることをお許しください:)
ログイン認証
認証 (基本情報、携帯電話番号) では、ミニ プログラムにネイティブなボタン コンポーネントを使用する必要があります。 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
#あるページで #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 ミニ プログラム バージョンを使用することをお勧めします。コミュニティがより活発で、これを使用する際に落とし穴が少なくなります。
双方向バインディング
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
textarea には、ios のパディング値が含まれます。これは私にとって罠です。すべてのテキストエリアまたはすべての入力を使用してフォームに入力します。 他にも、IE に似たスタイルの問題がかなり多くあります。 ！ ！いくつかの違いを解決するには、flex float をさらに使用してください~
結論
記事のすべての点は、小さなプログラムを開発するときに遭遇する問題です。私の能力には限界があります。 、コメント エリアで誰でも質問したり、交換したり、学んだりすることができます。また、Haxiangjia 公式アカウントをフォローして、より質の高い記事を入手することもできます。 推奨チュートリアル: 「
WeChat ミニ プログラム 」
以上がミニ プログラムを始めるには、この記事をお読みくださいの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。