微信小程序内嵌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中返回来的数据

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值