目录

微信小程序携带token跳转h5,-h5再返回微信小程序

微信小程序携带token跳转h5, h5再返回微信小程序

需求: 在微信小程序内跳转到h5, 浏览完后点击返回按钮再返回到微信小程序中

微信小程序跳转h5:

微信小程序跳转h5,这个还是比较简单的, 但要注意细节

一、微信小程序代码

1.新建跳转h5页面, 新建文件夹,新建page即可

https://i-blog.csdnimg.cn/direct/f073a7827158481d9382e44c3afa43a1.png

2.使用web-view标签

wxml页面

https://i-blog.csdnimg.cn/direct/84d9267c779c4b32b908128953e3afeb.png

js页面

https://i-blog.csdnimg.cn/direct/6c84bec98ca64d718403a617c34b8144.png

到此为止, 小程序中的操作就做完了,接下来是h5中的代码

二、h5代码

1.在App.vue中接收token,并存储token,这样就可以实现免密登录,当然要和后端对接好

https://i-blog.csdnimg.cn/direct/f5422a0b2dc943ff8775cc3f6d7036d7.png

H5返回微信小程序:

难点来了, 如何返回的,这个问题困扰了我两天,试了无数次; 废话不多说,直接上代码:

使用wx.miniProgram.navigateBack()

那么在h5中肯定是不存在wx的,所以要引入 ,

这个js版本根据自己的项目具体调整

重点来了,不要使用script的src属性直接引入,要使用js动态引入

https://i-blog.csdnimg.cn/direct/e9d240b7dc1b41cdafb28b26d71a9b85.png

这样以后,wx这个全局对象就有了;

在接收的页面返回:

https://i-blog.csdnimg.cn/direct/fed2d5df05784fbba9cf5e2454e542c2.png