vue H5跳转小程序

官方链接：目录 | 微信开放文档

摘要：

小程序跳转按钮：<wx-open-launch-weapp>

用于页面中提供一个可跳转指定小程序的按钮。使用此标签后，用户需在网页内点击标签按钮方可跳转小程序。H5 通过开放标签打开小程序的场景值为 1167.

此功能的开放对象：

1. 已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2. 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序

开始使用

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>