uniapp 公众号网页跳转小程序

一、导言

今天上头领导安排了个任务，公众号跳转小程序，没多想以为很简单，就开始干结果意外发现没有做过，又get到一个新技能，现在分享给大家，期间遇到签名（错误码：63002）的问题花了一些时间，那么废话不多说，直接上代码：

1.引微信js-sdk

npm install jweixin-module --save  

2.在需要调用的页面中引入

import jweixin from 'jweixin-module'

3.js调用

jssdk_configs() {
	let url = encodeURIComponent(window.location.href.split('#')[0]); // 很重要
	let obj = {
		url: url
	}
	jssdk_config(obj).then(response => {
		let res = response.data
		if (res.code === 1) {
			let info = {
				debug: false, // 调试，发布的时候改为false
				appId: res.data.appId,
				nonceStr: res.data.nonceStr,
				timestamp: res.data.timestamp,
				signature: res.data.signature,
				jsApiList: res.data.jsApiList,
				openTagList: ['wx-open-launch-weapp', 'wx-open-launch-app']
			};
			jweixin.config(info);
			jweixin.error(err => {
				console.log('config fail:', err);
			});
	
			jweixin.ready(res => {
				if (callback) callback(jweixin);
			});
		}
	}).catch(error => {
		console.log(error)
	})
},

这里报错，要注意看appid和url，看看是否写错

4.视图层调用

<wx-open-launch-weapp
	  id="launch-btn"
	  username="gh_******", // 小程序的原始id， 下面会教如何获取
	  path="****" // 需要跳转的小程序页面地址
	>
	 <script type="text/wxtag-template">  
		 <style>  
			 .btn-open-weapp{
				 width: 226px;
				 height: 52px;
				 background: linear-gradient(0deg, rgba(255, 179, 16, 0.99), rgba(255, 227, 2, 0.99));
				 border-radius: 26px;
				 border: none;
				 margin-top: 18px;
				 font-size: 16px;
				 color: #B0240A;
				 font-weight: bold;
			 }
			 .btn-open-weapp::after {
				 border: none;
			 }
			 .btn-open-weapp::before {
				 border: none;
			 }
		 </style>
		 <button class="btn-open-weapp">点击领取红包领餐</button>
	 </script>
</wx-open-launch-weapp>

5. 结果展示
   
   6.教下如何查看小程序的appid和原始id（会的人可以不用往下看），这里拿饿了么小程序为例：
   1.首先点开饿了么小程序
   
   2.弹出框后，点击头像那块
   
   3.点击更多资料

4.打工告成