uniapp H5微信公众号跳转小程序 vue项目

一、微信开放文档

二、步骤

1、引入微信js-sdk npm install wx-module --save

2、在调用的页面中引入import wx from 'jweixin-module'

3、页面报错找不到模板wx-open-launch-weapp时，main.js中Vue.config.ignoredElements = [ 'wx-open-launch-weapp']

4、引入微信开放标签，在main.js中配置Vue.config.ignoredElements = [‘wx-open-launch-weapp’]出现下面报错，则将配置改为Vue.config.ignoredElements = [...Vue.config.ignoredElements, 'wx-open-launch-weapp']

5、获取wx.config注册信息

let url = window.location.href.split('#')[0];//要在公众号平台设置JS接口安全域名，ip白名单
  uni.request({
      url: "aaaaaaaaaaa',//调取后台接口拿到wx.config中的参数
      method: 'GET',
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: data => {
          wx.config({
              debug: true, // 开启调试模式,返回值会在客户端alert出来。
              appId: "", // 必填，公众号的唯一标识
              imestamp: "", // 必填，生成签名的时间戳
              nonceStr: "", // 必填，生成签名的随机串
              signature: "", // 必填，签名
              jsApiList: [], // 必填，需要使用的JS接口列表
              openTagList: [ 'wx-open-launch-weapp'] // 可选，需要使用的开放标签列表
          });
          wx.ready(function() {
          	let btn = document.getElementById('launch-btn');//视图层对应的id名
			btn.addEventListener('launch', e => {
				console.log('success');
			});
			btn.addEventListener('error', e => {
				console.log('fail', e.detail);
			});
          });
     }     
   });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

6、view视图层调用（需注意，html和css内容均为原生写法，不能用框架组件和框架内置样式）

<wx-open-launch-weapp 
	id="launch-btn" 
	username="gh_************" // 小程序的原始id
	path="****" // 需要跳转的小程序页面地址，不填会跳首页,必须.html结尾
	style="width:100%">
	<script type="text/wxtag-template">
		<style>
			.box{width: 100%; display: flex;flex-direction: column;align-items: center;justify-content:center;}
			.text{width: 100%;margin-top: 8px;font-size: 12px;color: #333333;display: inline-block;text-align: center;}
		</style>
		<div class="box">
			<img src="https://ce.xazysoft.net/saascmt/ceapplet/dx_door.png" width="36px" height="36px"/>
			<span class="text">智能门禁</span>
		</div>
	</script>
</wx-open-launch-weapp>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

5、成功界面