微信小程序内嵌webview实现微信登录

一、调研场景

1， 微信小程序内嵌webview实现微信登录

二、技术实现

1. web-view标签实现链接内嵌

小程序里嵌套web-view页面

（1）src属性：webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。

（2）bindmessage属性：网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组

点击微信用户授权登录时 会进入小程序内嵌套的web-view页面

2. web-view加载门户链接

此处粘贴示例代码与说明

3. web-view登录成功后，点击返回时关闭web-view，将本地用户数据返回到小程序

（1）需要在用户信息页面添加个按钮 然后在点击的时候返回小程序并返回数据

（2）利用bindmessage属性获取从web-view中返回来的数据

4. web-view门户登录成功后，自动关闭web-view，将本地用户数据返回到小程序

（1.）

在web-view用户页面导入微信jssdk

（2.）

用sdk wx.miniProgram.postMessage()方法 将获取的用户信息传给小程序

ps:向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件

用sdk wx.miniProgram.redirectTo()方法 返回到小程序登入页面

（3.）

利用bindmessage属性获取从web-view中返回来的数据

获取到的数据显示在 返回来的登录页面