ボタンをクリックするときにユーザー情報と携帯電話番号を同時に取得し、承認後に承認を繰り返さないという操作に遭遇した友人は多いと思います.私の方法を共有してください〜
<!--index.wxml-->
<!--showPopPhone 判断手机号码是否授权,初始为true-->
<!--showAuth 判断用户信息是否授权,初始为true-->
<!--用户信息和手机号码均未授权时显示-->
<button plain="true" wx:if="{
{showPopPhone && showAuth}}" bindtap="getUserInfo" open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber" >
授权1
</button>
<!--用户信息授权，手机号码未授权时显示-->
<button plain="true" wx:else-if="{
{showPopPhone && !showAuth}}" open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber">
授权2
</button>
<!--用户信息未授权，手机号码授权时显示-->
<button plain="true" wx:else-if="{
{!showPopPhone && showAuth}}" bindtap="getUserInfo">
授权3
</button>
<!--用户信息和手机号码均授权时显示-->
<button plain="true" wx:else-if="{
{!showPopPhone && !showAuth}}" bindtap="saveData">
授权4
</button>
ユーザー情報と携帯電話番号を同時に承認するためのボタンを、承認を繰り返さずに実装するには、まず、同じスタイルの 4 つのボタン ボタンを記述します。これらは、次の 4 つの状況に分けられます。
- ユーザー情報も携帯電話番号も承認されていない場合、表示されるボタンには、承認されたユーザー情報イベント
bindtap="getUserInfo"と承認された携帯電話番号イベントが含まれている必要がありopen-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber"、承認ポップアップボックスは、承認されたユーザー情報に従って順にポップアップし、許可された携帯電話番号; - ユーザー情報が承認され、携帯電話番号が承認されていない場合、表示されるボタンには承認された携帯電話番号イベントのみを含める必要があり、承認された
open-type='getPhoneNumber' bindgetphonenumber="getPhoneNumber"携帯電話番号のポップアップ ボックスのみが表示されます。 - ユーザー情報が承認されていない場合、携帯電話番号が承認されている場合、表示されるボタンには承認されたユーザー情報イベントのみが含まれている必要があり
bindtap="getUserInfo"、承認されたユーザー情報ポップアップボックスのみがポップアップします。 - ユーザー情報と携帯電話番号の両方が承認されて表示されている場合、表示されたボタンは携帯電話番号を取得するためのインターフェイスのイベントを直接呼び出すだけでよく、承認ポップアップ ボックスはポップアップしません
bindtap="saveData"。
/**
* index.js
*/
import api from "../../api"; //引入api.js文件
const app = getApp(); //getApp()函数是小程序原生提供的函数方法，用于从页面获取 App 实例对象
Page({
/**
* 页面的初始数据
*/
data: {
encryptedData: '',
iv: '',
showPopPhone:true,
showAuth:true
},
getUserInfo () {
wx.getUserProfile({
desc: '用户授权',
success: (res) => {
wx.setStorageSync("userInfo", res.userInfo);
this.setData({
showAuth: false,
userInfo: res.userInfo
})
}
})
},
getPhoneNumber (e) {
const that = this;
// 如果未授权用户信息
if (this.data.showAuth) {
wx.showToast({
title: "未授权用户信息，请重新授权",
icon: 'none'
})
return;
}
//未授权手机号时
that.setData({
wxPhoneEncrypted: {
encryptedData: e.detail.encryptedData,
iv: e.detail.iv
}
});
if (!e.detail.iv) {
return;
}
that.saveData();
},
//授权手机号后调用获取手机号的接口
saveData () {
wx.showLoading();
const {
wxPhoneEncrypted } = this.data;
var loginInfo = wx.getStorageSync("loginInfo");
var userInfo = wx.getStorageSync("userInfo")
app.post(
api.getPhoneNumber, //获取手机号接口
{
"encryptedData": wxPhoneEncrypted.encryptedData,
"iv": wxPhoneEncrypted.iv,
"sessionKey": loginInfo.sessionKey,
"openId": loginInfo.openId,
"userInfo": userInfo
}
) .then((res) => {
if (res.phoneNumber) {
loginInfo.phoneNumber = res.phoneNumber;
loginInfo.token = res.token
wx.setStorageSync('loginInfo', JSON.stringify(loginInfo));
this.setData({
showPopPhone: false,
phone: res.phoneNumber
})
}
}).catch((error) => {
wx.hideLoading({
})
});
}
})
もちろん、2段階に分けて、ユーザー情報の認証と携帯電話番号の認証を2つのボタンで段階的に行えるようにすれば、比較的簡単ですよね！
許可されたユーザー情報の内容については、次の記事を参照してください。WeChat ミニ プログラムの wx.getUserInfo ユーザー情報を取得するための許可 wx.getUserProfile の使用に切り替える
役に立ったら、ブックマークしてください〜、より良い方法があれば、コメントしてメッセージを残して、お互いから学びましょう！