微信h5跳小程序
参考资料
dom
username小程序的原始ID
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxx"//小程序的原始ID
path="pages/wait/wait.html?scene=xxx"// 所需跳转的小程序内页面路径及参数
@launch="handleLaunchFn"
@error="handleErrorFn"
>
<script type="text/wxtag-template">
<style>
</style>
<button class="ant-btn ant-btn-red">跳转小程序</button>
</script>
</wx-open-launch-weapp>
js
var vm = new Vue({
el:'#test',
watch:{
},
data:function(){
return {
corp_id:'',//企业id
}
},
methods:{
//支持h5跳转小程序的微信版本号
is_version(){
let client = false; // 当前版本号是否支持 (默认不支持)
let wxInfo = navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i); // 微信浏览器信息
// 微信版本号 wxInfo[1] = "7.0.18.1740" (示例)
//进行split转成数组进行判断 [7,0,18,1740] (示例)
let version = wxInfo[1].split(".");
// 判断版本在7.0.12及以上的版本
if (version[0] >= 7) {
if (version[1] >= 0) {
if (version[2] >= 12) {
client = true; // 当前版本支持
}
}
}
return client;
},
//从服务端接口获取config所需要的参数
wxjsdk:function(token){
var that=this;
var api_url=basic_api_url+'/base/mp/js_sign/';
var ua= window.navigator.userAgent.toLowerCase();
var localUrl = window.location.href;
var data={url:localUrl,corp_id:this.corp_id}
$.ajax({
url: api_url,
type: "POST",
async:true,
data:data,
dataType: "JSON",
success: function (res) {
if(res.state == 0){
that.config(res.data);
}
},
error:function(e){
console.warn(e);
}
})
},
//config接口注入权限验证配置
config:function(jsdk){
var that=this;
wx.config({
beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: jsdk.appId, // 必填,企业微信的corpID
timestamp:jsdk.timestamp, // 必填,生成签名的时间戳
nonceStr:jsdk.nonceStr, // 必填,生成签名的随机串
signature:jsdk.signature,// 必填,签名,见附录1
jsApiList: [
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'onVoicePlayEnd',
'translateVoice'
], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
openTagList:['wx-open-launch-weapp']
});
wx.ready(function () {
wx.checkJsApi({
jsApiList: [
'startRecord',
'stopRecord',
'onVoiceRecordEnd',
'playVoice',
'pauseVoice',
'stopVoice',
'onVoicePlayEnd',
'translateVoice'
],
success: function (res) {
if (res.checkResult.getLocation == false) {
alert('你的微信版本太低,不支持微信JS接口,请升级到最新的微信版本!');
return;
}else{
}
}
});
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
//alert("验证失败,请重试!");
//wx.closeWindow();
});
},
handleLaunchFn (e) {
console.log('handleLaunchFn')
},
handleErrorFn(e){
console.log('fail', e.detail);
}
},
created:function(){
this.wxjsdk();
},
});
企业微信h5跳小程序
参考资料
https://work.weixin.qq.com/api/doc/90000/90136/90514
https://work.weixin.qq.com/api/doc/90000/90136/90515
dom
<div style="width: 300px;height: 60px;" @click="goMin">
跳转小程序
</div>
js
var vm = new Vue({
el:'#test',
watch:{
},
data:function(){
return {
corp_id:'',//企业id
}
},
methods:{
//跳转函数
goMin:function(argument) {
wx.invoke('launchMiniprogram', {
"appid" : "xxx", // 需跳转的小程序appid
"path" : "pages/wait/wait.html?scene=xxx", // 所需跳转的小程序内页面路径及参数。非必填
}, function(res) {
console.log(res);
if(res.err_msg == "launchMiniprogram:ok") {
// 正常
} else {
// 错误处理
}
}
);
},
//从服务端接口获取config所需要的参数
wxjsdk:function(token){
var that=this;
var api_url=basic_api_url+'/base/work/js_sign/';
var localUrl = window.location.href;
var data={url:localUrl,corp_id:this.corp_id}
$.ajax({
url: api_url,
type: "POST",
async:true,
data:data,
dataType: "JSON",
success: function (res) {
if(res.state == 0){
that.config(res.data);
}
},
error:function(e){
console.warn(e);
}
})
},
//config接口注入权限验证配置
config:function(jsdk){
var that=this;
wx.config({
beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: jsdk.appId, // 必填,企业微信的corpID
timestamp:jsdk.timestamp, // 必填,生成签名的时间戳
nonceStr:jsdk.nonceStr, // 必填,生成签名的随机串
signature:jsdk.signature,// 必填,签名,见附录1
jsApiList: [
'startRecord',
'agentConfig'
] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
wx.ready(function () {
that.qwxjsdk();
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
//alert("验证失败,请重试!");
//wx.closeWindow();
});
},
//从服务端接口获取agentConfig需要参数信息
qwxjsdk:function(token){
var that=this;
var api_url=basic_api_url+'/base/work/app_js_sign/';
var localUrl = window.location.href;
var data={url:localUrl,corp_id:this.corp_id}
$.ajax({
url: api_url,
type: "POST",
async:true,
data:data,
dataType: "JSON",
success: function (res) {
if(res.state == 0){
that.agentConfig(res.data);
}
},
error:function(e){
console.warn(e);
}
})
},
//通过agentConfig注入应用的权限
agentConfig:function(jsdk){
wx.agentConfig({
corpid: jsdk.corpid, // 必填,企业微信的corpid,必须与当前登录的企业一致
agentid: jsdk.agentid, // 必填,企业微信的应用id (e.g. 1000247)
timestamp: jsdk.timestamp, // 必填,生成签名的时间戳
nonceStr: jsdk.nonceStr, // 必填,生成签名的随机串
signature: jsdk.signature,// 必填,签名,见附录-JS-SDK使用权限签名算法
jsApiList: ['selectExternalContact','launchMiniprogram'], //必填
success: function(res) {
// 回调
console.log('success',res);
},
fail: function(res) {
console.log(res);
if(res.errMsg.indexOf('function not exist') > -1){
alert('版本过低请升级')
}
}
});
},
},
created:function(){
this.wxjsdk();
},
});