H5打开小程序 分为普通浏览器-和微信浏览器
在这个之前必须要满足
公众号
- 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
- 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
普通浏览器
1、获取小程序scheme码，适用于短信、邮件、外部网页等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，目前仅针对国内非个人主体的小程序开放
H5打开小程序 普通浏览器
使用微信开放的urlscheme.generate生成小程序scheme码 使用这个之前需要先获取到接口调用凭证拿到access_token
/* 普通浏览器--这个放在前端请求也是可以的-不过不建议 */
const appid = '小程序appid';
const secret = '小程序secret ';
//获取access_token
const {data:{access_token}} = await axios.request({
url:`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
})
//获取scheme
const {data:{openlink}} = await axios.post("https://api.weixin.qq.com/wxa/generatescheme?access_token="+access_token,{
"jump_wxa" : {
"path" : "/pages/index/index",
"query" : "dex=2"
}
})
//openlink就是scheme
console.log(openlink);
然后使用weixin://dl/business/?t= openlink
直接使用location.href = 'weixin://dl/business/?t= openlink'
或者创建一个a标签，get事件也是可以的
微信公众号 --这个就必须要服务器了
普通浏览器的相对公众号还是比较简单的，公众号还要使用jssdk还要配置sdk-还要配置服务器，
官方文档
配置好服务器的可以跳过直接看下面
1、先要配置-进入公众号-开发-基本配置-服务器配置-启用填好资料，
当然你也可以选择明文模式
查看示例
2、保存的时候会请求校验服务器-请求上面写的URL
//加密模块
import crypto from 'crypto';
//加密方法
function signFn(arr:Array<string>){
const sha1 = crypto.createHash('sha1');//sha1
var str=arr.sort().join('');
sha1.update(encodeURI(str));//添加需要的加密数据
return sha1.digest('hex');//加密,(hex表示16进制)
}
//--[token,传过来的时间戳,传过来的随机字符串]
var obj=['1839a5f3b7feba22a6e2a6ef1467d348',this.get('timestamp'),this.get('nonce')];
//进行加密
var sign=signFn(obj);
console.log(this.get('signature'));
//对比加密
if(sign === this.get('signature')){
return this.body = this.get('echostr');
}
return this.body = 'error';
配置好之后就需要写获取jssdk然后配置jssdk
//服务器端代码
import crypto from 'crypto';
const appid = '公众号appid';
const secret = '公众号secret';
//服务器当前时间
const timestamp = parseInt(String(new Date().getTime()));
//随机字符串
const nonceStr = 'Wm3WZYTPz0wzccnW';
//加密方式
const sha2 = crypto.createHash('sha1');//sha1
//获取access_token
const {data:{access_token}} = await axios.request({
url:"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid="+appid+"&secret="+secret;
})
//获取api ticket
const {data:{ticket}} = await axios.request({
url:"https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token="+access_token+"&type=jsapi"
})
//需要当前验证的页面路径
const reUrl = this.post('url');
if(reUrl)
{
//加密方式依次为ticket 随机字符串noncestr 时间戳timestamp 验证的页面url
const content = `jsapi_ticket=${ticket}&noncestr=${nonceStr}×tamp=${timestamp}&url=${url}`;
//加密
const signature = sha2.update(content).digest('hex')
//返回给前端
return this.json({
appid,
timestamp,
signature,
nonceStr
})
}
//前端代码 -js
安装jssdk(npm install weixin-js-sdk --S) 或者直接[cnds](https://res.wx.qq.com/open/js/jweixin-1.6.0.js)
const get = async function(){
//请求上面写好的接口
const response = await fetch('jssdk路径',{
method:"post",
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
},
body:`url=${location.href.split('#')[0]}`
})
//返回的数据
const {data} = await response.json();
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appid, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.noncestr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名
jsApiList: ['checkJsApi'], // 必填，需要使用的JS接口列表
openTagList: ['wx-open-launch-weapp'], //这里一定要写上wx-open-launch-weapp 不写就不会出现
});
//走这个回调的时候说明注入成功了
wx.ready(function(){})
//这里就肯定失败了
wx.error(function(){})
}
get();
//html代码
//path小程序的页面路径-一定要加上.html
//这个只会在微信浏览器里面而且jssdk注入成功才会显示
<wx-open-launch-weapp id="launch-btn" class="launch-weapp" username="小程序原始id gh_开头的" path="/pages/guide/main.html">
<script type="text/wxtag-template">
//样式，只能写在这里面外面不生效
<style>.btn { padding: 12px }</style>
<button class="btn">打开小程序1</button>
</script>
</wx-open-launch-weapp>
我总结了以下几点不显示的问题
1、个人账号 -- 没办法
2、签名错误 -- 校验签名 看看access_token 是否获取成功 看看ticket是否获取成功 失败一个都会签名错误 签名请求一定要带上url
3、域名错误 -- 没有设置安全域名-在设置-公众号设置-功能设置里面
4、IP白名单 -- 把服务器ip加入到 ip白名单里面即可
5、vue里面会报错wx-open-launch-weapp 标签未注册 --
···· 1在main.js添加Vue.config.ignoredElements = ['wx-open-launch-weapp']
···· 手动拼接用v-html显示
this.wxOpenWeApp = `
<wx-open-launch-weapp id="launch-btn" class="launch-weapp" username="小程序原始id gh_开头的" path="${path}">
<script type="text/wxtag-template">
<style>
.close-btn{
border: none;
outline: none;
padding: 10px 20px;
line-height: 1;
}
</style>
<button class="close-btn">
打开小程序
</button>
<\/script>
</wx-open-launch-weapp>`
老规矩，个人的不会显示，
必须是已认证的服务号
