Applet H5 get mobile number scheme

 

Explanation of the reason ：

1、 Because the applet obtains the mobile number through the small town button Component to get , and UI Is a coupling relationship ;

2、 Applet web-view By default, the components are spread all over the screen , also web-view It is not allowed to overwrite any other applet components on the component ;

For details, please refer to web-view 、 button  Component is introduced ;

 

 

Solution ：

H5 Page Jump applet page , Get the mobile number and pass url Pass the mobile number into h5 page

 

Code implementation

The applet soundtrack obtains the mobile phone number ：

1、.wxml file

 

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> Get cell phone number </button>

2、.js file

getPhoneNumber: function (e) {     var that = this;     console.log(e.detail.errMsg == "getPhoneNumber:ok");     console.log(e.detail);     if (e.detail.errMsg == "getPhoneNumber:ok") {         wx.request({         url: 'http://localhost/index/users/decodePhone',         data: {           encryptedData: e.detail.encryptedData,           iv: e.detail.iv,           sessionKey: that.data.session_key,           uid: "",         },         method: "post",         success: function (res) {           let pages = getCurrentPages(); // Get the current page js Inside pages All the information in .             let prevPage = pages[pages.length - 2];           prevPage.setData({             number: res.phoneNumber,             type: that.data.type           })           wx.navigateBack({               delta: 1  // Return to the previous page .             })         }       })     }   },

Applet web-view The page receives the returned parameters ：

.js file

 

Page({         /**    * Initial data of the page    */   data: {     number: '',     url: "http://10.50.20.92:8082",     type: "home",   }, /**    * Life cycle function -- Monitor page display    */   onShow: function () {     console.log('webview-onShow');     console.log(this.data.number);     console.log(this.data.type);     var that = this;     if (that.data.type == "page2") {       that.setData({         url: "http://10.50.20.92:8082/page" + "?number=" + this.data.number       })     } else if (that.data.type == "page1") {       that.setData({         url: "http://10.50.20.92:8082" + "?number=" + this.data.number       })     }   }, })

h5 Page receive parameters

const getQueryString = (name: any) => {     let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");     let r = window.location.search.substr(1).match(reg);     if (r != null) {       return decodeURIComponent(r[2]);     }     return null;   }   const phoneValue = getQueryString('number');

Be careful ：

1、 Return from the soundtrack page web-view page , adopt url Pass parameters directly into h5 Next page of , Namely a history.push operation .

2、h5 All page data that needs to be retained will be used redux Of sotre cache , This will guarantee h5 The page returns and re renders. The page data is still .