采用微信开发平台开发标签方式跳转到小程序特定页面

• 安装jweixin-module

npm install jweixin-module --save

• 由于vue不识别wx-open-launch-weapp自定义标签，需要增加对该标签的忽略

Vue.config.ignoredElements.push('wx-open-launch-weapp')

• 在vue的template中使用wx-open-launch-weapp标签，需要使用script(template不起作用)

				<view v-if="item.openLanchWeapp" class="open_weapp" style="text-align: center;">
					<wx-open-launch-weapp id="launch-btn" :username="item.userName" :path="item.path">
						 <script type="text/wxtag-template">
							<view class="name" style="display: block;font-size: 14px;font-family: Helvetica;color: #1a1a1a;line-height: 34px;text-align: center">{{item.name}}</view>
							<view class="sub_name" style="display: block;font-size: 12px;font-family: MicrosoftYaHei;color: #858994;line-height: 31px;">{{item.subName}}</view>
						  </script>
					</wx-open-launch-weapp>
				</view>

wx-open-launch-weapp标签下script的 元素，不再受vue管理，自定义的样式需要直接写在其子元素上。

• 配置微信config

		onLoad() {
			that.initWeixin()
		},
                methods: {
			initWeixin() {
				let localUrl = location.href.split('#')[0]
				uni.request({
					url: 'http://ip:port/getJSSDKSignature', 
					data: {
						url: localUrl
					},
					method: 'GET',
					header: {
						// 'custom-header': 'hello' //自定义请求头信息
					},
					success: (res) => {
						// alert(JSON.stringify(res.data))
						console.log('getJSSDKSignature res',res.data);
						let data = res.data
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
							appId: data.appId, // 必填，公众号的唯一标识，填自己的！  
							timestamp:data.timestamp , // 必填，生成签名的时间戳，刚才接口拿到的数据  
							nonceStr: data.noncestr, // 必填，生成签名的随机串  
							signature: data.signature, // 必填，签名  
							jsApiList: ['wx-open-launch-weapp'],
							openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填  
						});
					},
					fail: (res) => {
						console.log(res)
					}
				})
			}
                  }

• 调试 需要真机调试，微信小程序开发工具不能调试跳转

附录

developers.weixin.qq.com/doc/offiacc…