关于微信公众号的h5页面跳转微信小程序的详细介绍

前端挖掘机

已于 2022-11-30 09:08:37 修改

阅读量8.2k

点赞数 13

文章标签：微信微信小程序 javascript 前端 vue

于 2022-05-26 13:07:23 首次发布

本文链接：https://blog.csdn.net/bzf0482/article/details/124980271

版权

简介

关于微信公众号跳转小程序的功能，我也是研究了一整天才弄好的，主要是微信官方文档写的不清楚，百度上的各种文章也各说各的，不过最后还是要相信官网文档，接下来我会一步一步分析，希望对你有帮助，并且最后会贴上全部代码。

思路

一、条件

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

这两个条件符合其一即可

二、版本兼容

微信版本要求为：7.0.12及以上
系统版本要求为：iOS 10.3及以上、Android 5.0及以上

对于符合微信或系统最低版本要求但仍无法使用微信开放标签的场景，将会在下方使用步骤中的wx.config权限验证成功后触发WeixinOpenTagsError事件告知开发者。仅无法使用微信开发标签，JS-SDK其他功能不受影响，可通过如下方法监听并进行回退兼容：
document.addEventListener(‘WeixinOpenTagsError’, function (e) {
console.error(e.detail.errMsg); //无法使用开放标签的错误原因，需回退兼容。仅无法使用开放标签，JS-SDK其他功能不受影响 });

三、实现步骤

引入wx提供的js_sdk

在需要调用 JS 接口的页面引入如下 JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性，当上述资源不可访问时，可改访问http://res2.wx.qq.com/open/js/jweixin-1.6.0.js（支持https）
备注：支持使用 AMD/CMD 标准模块加载方法加载

可以使用srcipt标签引入，也以使用npm包下载以后导入使用，比如我使用uniapp开发的时候，打印 wx 对象的时候并不是我引入的js，我猜测应该是uniapp内置的，于是我使用npm下载了一个js_sdk，选择其一即可，我用的是第一个

npm install jweixin-module --save
npm install weixin-js-sdk --save

import wxApi from "jweixin-module"
wxApi.config()
wxApi.ready()

通过 config 接口注入权限验证配置

wx.config({
debug: true, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
appId: ‘’, // 必填，公众号的唯一标识
timestamp: , // 必填，生成签名的时间戳
nonceStr: ‘’, // 必填，生成签名的随机串
signature: ‘’,// 必填，签名
jsApiList: [] // 必填，需要使用的 JS 接口列表
openTagList: [] // 可选，需要使用的开放标签列表
});

使用wx.config注入需要的权限，需要的参数前端并不能获取，需要服务器调用微信提供的接口计算得到，后端的代码不用关注，我只写前端的代码

var data = {
	//不需要后面的hash值
	//服务器计算签名的时候需要用到当前网页的链接，且链接里不需要hash值，所以做这个处理
	url: window.location.href.split('#')[0]
}
this.$axios.post('XXXXXX',data).then(res=>{
	var params = res.data.data;
	wx.config({
	  debug: true, 
	  appId: params.appid, 
	  timestamp: params.timestamp,
	  nonceStr: params.nonceStr, 
	  signature: params.signature,
	  jsApiList: ['onMenuShareTimeline'],
	  openTagList:['wx-open-launch-weapp']
	});
	wx.ready(()=>{
		//这里是成功后执行
	});
	wx.error(()=>{
		//这里是出现异常执行
	})
})

这里有几点需要注意的，是重点，仔细看了，一般出问题多半这在里

第一点就是后端获取签名的时候，需要用到该网页的地址，地址截取hash值之前的部分，并且链接里带有的参数也要不能少，下面就是微信文档的原话：
签名生成规则如下：参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部分） 。对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后，使用 URL 键值对的格式（即key1=value1&key2=value2…）拼接成字符串string1。这里需要注意的是所有参数名均为小写字符。对string1作sha1加密，字段名和字段值都采用原始值，不进行URL 转义。
第二点就是 jsApiList: [‘onMenuShareTimeline’] ，由于这个用不到，但是也不能空，就可以去微信文档里随便选一个填上去就行
第三点，openTagList:[‘wx-open-launch-weapp’] 这一项要注意，我们使用的开放标签是 wx-open-launch-weapp，这是小程序专用的，有些人直接复制微信文档的示例，可能没注意使用的是wx-open-launch-app这个标签，这个是打开微信app的

当出打开debug模式下，会以弹窗的形式告诉你配置注入是否成功，当成功时会弹出 errMsg:config:ok 如果看到这个弹窗，说明你授权这一步已经完成了

3.使用微信开放标签
这也是最后一步了，微信文档上提供的示例直接拿来用就行

<wx-open-launch-weapp
  id="launch-btn"
  username="gh_xxxxxxxx"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <button>打开小程序</button>
  </script>
</wx-open-launch-weapp>

需要注意的是 username 就是小程序的原始ID，在微信公众平台 > 设置 > 基本设置的最下面。path就是你小程序的地址，你用那个页面的地址打开就是哪个页面并且可以使用url传参，vue中开放标签的样式建议使用行内样式，不然不生效，在vue中，由于无法识别 wx-open-launch-weapp 标签，编译的时候会报错，我们需要去main.js里加入一句话：

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

意思就是忽略对这个标签的检查

到这里，就完成了，权限注入不成功的情况下，button按钮是不会渲染的，如果权限注入成功之后依旧不显示按钮，就是按钮不兼容，需要另外处理，另外，标签上可以设置跳转的小程序版本，分别式：开发版，体验版，正式版，设置env-version属性就可以了，详情可以去官网文档查看

全部代码

<template>
	<div class="toMiniapp_box">
		<text class="toMiniapp_box--tips">
			您的微信暂未注册账号，可以点击下方按钮前往小程序注册账号
		</text>
		<wx-open-launch-weapp id="launch-btn" username="gh_XXXXXXXX" path="pages/index/index">
			<script type="text/wxtag-template">
				<button>前往小程序注册</button>
			</script>
		</wx-open-launch-weapp>
	</div>
</template>

<script>
	const wxapi = require('../../utils/wxApi.js');
	export default {
		created() {
			this.getMiniappPermition()
		},
		methods: {
			// 请求服务器获取签名
			getMiniappPermition() {
				const url = encodeURIComponent(window.location.href.split('#')[0]);
				uni.request({
					url: `/mapuser/getMpJsticket?appid=XXXXX&signUrl=${url}`,
					method: "GET",
					success: (res) => {
						var params = res.data.data
						this.wxReady(params)
					}
				})
			},
			// 签名验证
			wxReady(params) {
				wxapi.config({
					debug: false, // 开启调试模式
					appId: params.appid, // 必填，公众号的唯一标识
					timestamp: params.timestamp, // 必填，生成签名的时间戳
					nonceStr: params.nonceStr, // 必填，生成签名的随机串
					signature: params.signature, // 必填，签名
					jsApiList: ['onMenuShareTimeline'], // 必填，需要使用的 JS 接口列表
					openTagList: ['wx-open-launch-weapp'] // 可选，需要使用的开放标签列表									    		 
				});	
				const _this = this;
				wxapi.ready(() => {
					_this.$nextTick(() => {
						//监听按钮异常
						var btn = document.getElementById('launch-btn');
							btn.addEventListener('launch', function(e) {
								console.log('success');
							});
							btn.addEventListener('error', function(e) {
								console.log('fail', e.detail);
							});
					})
				})

				wxapi.error((err) => {
					uni.showToast({
						title: "微信授权失败"
					})
				})
			}
		}
	}
</script>