小程序H5获取手机号方案

 

原因说明：

1、由于小程序获取手机号是通过小城的button组件获取，和UI是耦合关系；

2、小程序的web-view组件默认铺满全屏幕，并且web-view组件上不允许覆盖任何其他小程序组件；

具体内容可参照web-view 、 button 组件介绍；

 

 

解决方案：

H5页面跳转小程序页面，获取到手机号后通过url传参方式将手机号传入h5页面

 

代码实现

小程序原声获取手机号：

1、.wxml文件

 

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取手机号</button>

2、.js文件

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(); //获取当前页面js里面的pages里的所有信息。             let prevPage = pages[pages.length - 2];           prevPage.setData({             number: res.phoneNumber,             type: that.data.type           })           wx.navigateBack({               delta: 1  // 返回上一级页面。             })         }       })     }   },

小程序web-view页面接收返回传过来的参数：

.js文件

 

Page({         /**    * 页面的初始数据    */   data: {     number: '',     url: "http://10.50.20.92:8082",     type: "home",   }, /**    * 生命周期函数--监听页面显示    */   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页面接收参数

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');

注意：

1、从原声页面返回web-view页面，通过url传参数直接进入h5的下一个页面，即一次history.push操作。

2、h5页面数据需要保留的一律使用redux的sotre缓存，这样能保证h5页面返回重新渲染页面数据还在。