摘要:
小程序跳转按钮:<wx-open-launch-weapp>
用于页面中提供一个可跳转指定小程序的按钮。使用此标签后,用户需在网页内点击标签按钮方可跳转小程序。H5 通过开放标签打开小程序的场景值为 1167.
此功能的开放对象:
- 已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
- 已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序
开始使用
1、目录结构
2、配置jJS_SDK
// 先安装 jweixin,1.6.0以上版本
npm install jweixin-module --save
// main.js
import jweixinModule from "jweixin-module"
Vue.prototype.$jweixinModule = jweixinModule;
// #ifdef H5
import wechat from './common/wechat'
if (wechat.isWechat()) {
Vue.prototype.$wechat = wechat;
}
// #endif
// wechat.js
var jweixin = require('jweixin-module');
export default {
//初始化sdk配置
initJssdk: function(callback) {
uni.request({
url: '请求的url',
data: {
wx_url: window.location.href.split('#')[0]
},
success: res => {
if (res.data) {
jweixin.config({
debug: false, // 开启调试模式
appId: res.data.d.appId, // 必填,公众号的唯一标识
timestamp: res.data.d.timestamp, // 必填,生成签名的时间戳
nonceStr: res.data.d.nonceStr, // 必填,生成签名的随机串
signature: res.data.d.signature, // 必填,签名
jsApiList: [
'checkJsApi',
'updateAppMessageShareData', //朋友
'updateTimelineShareData' //朋友圈
] ,// 必填,需要使用的JS接口列表
openTagList:[
"wx-open-launch-weapp"
] // 打开小程序
});
// 配置完成后,再执行分享等功能
// _this.hasInit = true;
if (callback) {
callback(res.data);
}
}
}
});
}
}
3、页面中添加按钮
// index.vue
// pages/index/index.html 请用自己的小程序路径代替
<wx-open-launch-weapp id="launch-btn" username="gh_xxxxxxxxxxxx" path="pages/index/index.html">
<script type="text/wxtag-template">
<button class="open-launch-weapp-btn" style="background-color: transparent;border: none;color:#FDE6B0;font-size:12px;">去小程序</button>
</script>
</wx-open-launch-weapp>
不仅可以使用按钮跳转,也可以使用图片来进行跳转。
但是图片的样式比较难调试,切绝对定位不生效!!!
使用的图片必须是线上的url,本地路径不生效。
<wx-open-launch-weapp username="gh_XXX" path="XXX">
<script type="text/wxtag-template">
<image style="width: 202px;height: 66px;"src="https://www.baidu.com/img/flexible/logo/pc/result.png"></image>
</script>
</wx-open-launch-weapp>
样式可以在style标签组里面写
<wx-open-launch-weapp username="gh_XXXX" path="XXXX">
<script type="text/wxtag-template">
<style>
.pic1 {
width: 202px;
height: 66px;
margin-left: 4%;
}
</style>
<image class="pic1" src="https://www.baidu.com/img/flexible/logo/pc/result.png"></image>
</script>
</wx-open-launch-weapp>