前沿：

有时候产品或者运营的同事经常会有这样的需求，就是希望我们的公众号页面中有一个按钮可以调出第三方小程序，使用第三方自有的服务，或者给第三方小程序引流等等。那么对于这样的需求，我们前端开发人员该如何去实现呢？

实现图中所示的功能

这里我给大家讲解一下在vue2项目中如何实现这个功能：

第一步：绑定域名（需要公众账号管理员操作）

登录微信公众平台，进入“公众账号设置”的“功能设置”，填写“JS接口安全域名”。

第二步：在.html head标签中引入SDK

步骤3：在main.js中设置wx-open--标签为忽略，避免npm运行代码时页面报错

Vue.. = ["wx-open--"];

第四步：后端开发者需要提供接口，将“,,”四个字段返回给前端，初始化微信js-sdk

第五步：提供跳转小程序的相关参数

：小程序（必填）

Path：小程序跳转路径（必填）

（选修的）

：需要跳转的小程序原ID，即以gh_开头的小程序ID（跳转时优先使用原ID，若原ID不可用则使用原ID）

env-：正式版、开发版、试用版

-data：附加参数（比如传递一些用户信息，或者频道来源等）

第六步：代码展示（demo）

防范措施：

微信开放标签“wx-open--”有最低微信版本要求和最低系统版本要求。

微信版本要求：7.0.12及以上

系统版本要求：iOS 10.3及以上，5.0及以上

根据您自己的系统提供友好的提示。

测试：测试环境或者正式环境

”wx-open--”的层级样式一定要高于我们自己写的按钮的层级高度（z-），否则点击按钮时会没有任何反应

常见问题 (按钮渲染失败)？

1.本地开发，控制台报域名错误

怎么解决：

本地没有做任何测试，提交代码，发布测试环境进行测试，这样我们的前端域名地址和后端接口前缀地址一致（绑定的域名一致）

2. 签名错误（多为iOS手机）

第 1 页的链接是：

#/导航1

第 2 页的链接是：

#/导航2

在进入上面两个页面的时候，如果我们单独初始化js-sdk，那么iOS手机初始化很容易报签名错误。

如何解决？

（1）初始化输入参数必须一致

建议使用主域名（#号之前的部分）

（2）要么每次都使用最新的初始化返回值

从页面 A 跳转到页面 B 时

我们用

..href = 或 ..()

初始化SDK时（相当于手动刷新页面）

（3）首次请求后端接口时，后端接口返回的四个值缓存在本地（，，）

以上内容就是我今天分享的内容，希望可以帮助前端开发者解决微信环境下h5页面调用小程序的问题。

最后：感谢大家花时间观看我的分享，下次分享的主题是：如何发起电话和短信，期待大家的观看。

参考地址：