h5页面唤起微信小程序（vue）

腾讯文档：

1、安装weixin-js-sdk 版本要求1.6.0

2、在main.js文件中添加

Vue.config.ignoredElements = [wx-open-launch-weapp]

3、vue 代码如下

期间遇到的问题：1、按照官网文档步骤下来后发现按钮无法显示；

解决问题：

4、要在真机即手机中才能看到效果

相关报错

1、config:invalid signature签名报错的原因检测

第一点：确认签名算法正确，可用 页面工具进行校验； 第二点：确认config中nonceStr(js中驼峰标准大写S)，timestamp与用与签名中的对应noncestr，timestamp一致；

第三点：确认url是页面完整的url(请在当前页面alert(location.href.split(#)[0])确认)，包括http(s)://部分，以及？后面的GET参数部分,但不包括#hash后面的部分。

比如：如果是"http://x.com/jspay?oid=0&attr=1#wechat"的形式，那么应该保留的是"http://x.com/jspay?oid=0&attr=1"。

第五点：url在php中用$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]拼装，

第六点：确认config中的appid与用来获取jsapi_ticket的appid一致；

第七点：确保一定缓存access_token和jsapi_ticket；

2、errMsg:config:invalid url domain

ps 自己遇到的一个极其另类的问题，有的页面能显示按钮，有的页面不能显示

描述背景，项目使用vue微服务分包多页面，按钮未显示的页面是按钮放在组件里

分析过程：幸好一开始调试的页面是可以显示的，将可以显示的页面的代码复制到其他页面，发现其他页面不显示，说明不是页面代码的原因，在配置相同的情况下，说明参数配置正确的，最后将问题定位在html引用的js中，发现html中引入了百度的SDK导致的