H5网页跳转微信小程序
再次记录下, 通过使用
微信开放标签
,可便捷的跳转到微信小程序
。
文章目录
- H5网页跳转微信小程序
- 效果图
- 一、小程序跳转按钮
- 二、开放标签使用步骤
- 1. 绑定域名
- 2. 引入js文件
- 3. config权限配置及ready处理
- 4. 调用方法
- 解决VUE中警告
- 注意:
效果图
请忽略样式, 刚好页面上有分享功能,临时在此页面上展示功能哈。
debug
模式开启后,如成功会弹出如图一所提示, 当触发确定
按钮时,页面会展示相关按钮。- 仔细的你会发现, 安装设备上样式有点不一样哈【最后一张图片】
一、小程序跳转按钮
- 个人项目基于公众号,使用
vue
框架搭建 -
path
属性, 需要跳转的小程序页面路径及参数。必须添加.html
后缀。【demo:跳转小程序首页,再加上.html
即可】 - **注意:**直接在浏览器上查看是没有效果的,可在真机上调试。
<template>
<div>
<wx-open-launch-weapp
id="launch-btn"
username="gh_xxxxxxxx"
path="page/tabBar/index/index.html"
@launch="handleLaunchFn"
@error="handleErrorFn"
>
<script type="text/wxtag-template">
<style>
.btn {
display: flex;
align-items: center;
font-size: 30px;
border-radius: 30px;
background: #fff;
}
</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
</div>
</template>
二、开放标签使用步骤
- 具体的
使用步骤
文档已说明,这里阐述下个人在项目所应用的。 - 同分享好友、朋友圈方法类似。只需加上需要的
JS接口列表
、开放标签列表
1. 绑定域名
- 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
- 效果图【只配置使用的
域名
即可。请忽略如图配置其他项目的域名】
2. 引入js文件
- 这里安装
微信JS-SDK
,当然还用其他方式文档已说明。
npm i weixin-js-sdk -S
3. config权限配置及ready处理
- 通过
config
接口注入权限验证配置并申请所需开放标签 - 调用
config
接口时建议开启debug
模式。页面会alert出错误信息。
getOpenLaunchWeapp() {
let that = this;
let params = {
url: decodeURIComponent(location.href.split('#')[0])
}
this.axios.getShareSdk(params).then((response) =>{
// wx.config(response.data); // 如果后端返回数据格式符号,可直接传入数据,不用单独赋值
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: response.appId, // 必填,公众号的唯一标识
timestamp: response.timestamp, // 必填,生成签名的时间戳
nonceStr: response.nonceStr, // 必填,生成签名的随机串
signature: response.signature,// 必填,签名,见附录1
jsApiList: ['wx-open-launch-weapp'], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
openTagList: ['wx-open-launch-weapp'], //可选,需要使用的开放标签列表,例如['wx-open-launch-app']
});
/**
* 通过ready接口处理成功验证
* config信息验证成功后会执行ready方法
* 需在用户可能点击分享按钮前就先调用
*/
wx.ready(function() {
// config验证后会执行ready方法,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中
// 比如: 分享好友、朋友圈时则在些方法中调用相关的api。
let shareData = {
title: '我发现一个不错商品~',
desc: '好商品值得分享~',
link: '分享url',
imgUrl: '分享图片',
};
if(wx.onMenuShareAppMessage){ //微信文档中提到这两个接口即将弃用,故判断
wx.onMenuShareAppMessage(shareData);//1.0 分享到朋友
wx.onMenuShareTimeline(shareData);//1.0分享到朋友圈
}else{
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
}
});
wx.error(res =>{//通过error接口处理失败验证
// config信息验证失败会执行error函数
console.log(res);
});
})
},
4. 调用方法
mounted() {
// 获取配置信息
this.getOpenLaunchWeapp();
},
methods: {
/**
* 用户点击跳转按钮触发成功
*/
handleLaunchFn(e){
console.log('success');
},
/**
* 用户点击跳转按钮出现错误
*/
handleErrorFn(e){
console.log('fail', e.detail);
}
}
解决VUE中警告
如图浏览器会提示相关警告
- 使用
开放标签
时,出现如图警告! 在main.js
中加入此代码即可。
Vue.config.ignoredElements = ['wx-open-launch-weapp']
注意:
更多请看文档中
使用说明
微信版本要求
- 7.0.12及以上。
系统版本
要求为:iOS
10.3及以上、Android
5.0及以上。
浏览器无法直接查看效果
- 在浏览器中无法直接查看展示的按钮,可在真机上调试