开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情

前言：最近做了很多的商城模板，模板生成H5上传到服务器，然后再利用小程序，在小程序上点击不同的模板通过web-view跳转到H5，然后在微信支付的时候再跳转回小程序。 这个想法很美好，所以，现在我们测试一下，该怎么做呢？ 小程序通过web-view跳转我就不多说了，我要说说的是怎么在web-view的模板里面再跳转回来还得带着参数。

1.需要在H5界面引入jssdk res.wx.qq.com/open/js/jwe… 大家也可查看官方文档

uniapp 引入这个jssdk在哪里引入呢？ 在uniapp的模板界面index.html里面。 我这里没有新建模板界面，用的就是uniapp提供的这个index.html ,在index.html中直接使用script标签引入即可。

<script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

在uniapp的manifest.json文件中 找到web配置，引入模板

2.注意：这里有一个大大的bug需要我们注意，引入模板后我们会发现 页面整个的都被打乱，css不管用的情况，我们需要修改一下我们的模板index.html文件

在index.html文件中，我们添加下面的这行代码就可以正常了

<link rel="stylesheet" href="<%= BASE_URL %>static/index.css" />

目前具体原因我也没有搞明白，也是看了网上大佬的文章才知道的这个。（如果知道的也给说一句，大佬也没具体说。）

3.这里我没有用按钮进行跳转，我是直接使用的

wx.miniProgram.navigateTo({url: '/pages/index/index?id=2&name="张三"'})

跳转到的这个是非tabBar界面，所以我在后面可以传递参数。在小程序的这个界面onLoad中拿到这个参数。

说一下为什么我没有用 wx.miniProgram.postMessage 。 因为我通过web-view跳转到H5后，我跳转回小程序并不是在当前页面跳转回来，是要跳转到另外的界面，所以我没有使用这个方法。 这样，uniapp微信小程序通过web-view跳转到H5 ，再从H5跳转回小程序就结束了。