官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62,必须是认证公众号。
- 到微信公众号后台配置JS接口安全域名:设置与开发 - 公众号设置 - 功能设置 - JS接口安全域名,写 www.xxx.com
- 通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=微信公众号APPID&secret=微信公众号APPSECRET 获取Access token
- 通过https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi 获取ticket
- 签名生成:
①拼接string :jsapi_ticket={上面接口获取的ticket}&noncestr={随机字符串}×tamp={当前时间戳}&url={js接口安全域名(如果后面不加参数要这么写: http://www.xxx.com/ 注意最后面的/ )}
②sh1加密string得到signature
③以上步骤为后端生成,生成后返回 appId、timestamp、nonceStr、signature给前端。 - 前端安装模块 npm install jweixin-module --save
- main.js 添加一行代码 Vue.config.ignoredElements.push('wx-open-launch-weapp')
- 标签
<wx-open-launch-weapp id="launch-btn" username="公众号id" path="/pages/index/index.html"> <script type="text/wxtag-template"> <style> .btn { border-radius: 30px; width: 300px; height: 40px; font-size: 28px; border: none !important; color: #FFFFFF; background:#44ea76; } </style> <button class="btn" type="default">打开小程序</button> </script> </wx-open-launch-weapp>
js
import wx from 'jweixin-module'; onShow(){ wx.config({ debug:true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId:'', // 必填,公众号的唯一标识,填自己的! timestamp: , // 必填,生成签名的时间戳,刚才接口拿到的数据 nonceStr: '', // 必填,生成签名的随机串 signature: '', // 必填,签名 jsApiList: ['wx-open-launch-weapp'], openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填 }); }
要在js安全域名上并且在真机上访问才有效果,如果没效果或者是有错误的弹窗出现说明wx.config配置不正确,这种方式只能在微信网页里才能用!!
外部浏览器h5打开微信小程序方法:
官方文档:https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/url-scheme/urlscheme.generate.html
1.通过https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=微信小程序APPID&secret=微信小程序APPSECRET 获取Access token
2.通过POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN 获取到URL Scheme
- 通过location.href = 'weixin://dl/business/?t=接口取到' 调用就可以。h5好像是要https才能打开~
7 个评论
要回复文章请先登录或注册
3***@qq.com
1***@163.com
每日聚福
云开发接单
8***@qq.com
wanghexu
i***@igojo.cn