公众号开放标签-- wx-open-launch-app

920 阅读6分钟

一、介绍

先贴下官网的开放标签介绍

1 该标签做什么用的?

在微信内置浏览器端打开App,简单说就是在微信端打开某网页,可以在网页中打开App; 注:打开的网页不能是通过链接进入,而是通过分享的卡片等形式。

2 需求

需求是:通过App分享到微信的卡片,用户打开后,可以点击网页中的某个按钮,如果App存在,则打开该App,并进入指定的页面。App不存在,则进入应用市场的下载页面;

3 前期准备

首先公众号是本人通过nodeJs搭建的,App及分享到微信端的网页都是通过uniapp开发的。
配置相关
1 服务号需要认证!且服务号和移动应用是同主体,或者有关联关系!
2 绑定JS接口安全域名:在微信号后台操作;绑定的域名是分享到微信端的网页的域名。
3 在微信开放平台的应用管理--公众号,关联需要跳转的App。
填写的信息包含:安全域名,移动应用名称,Appid;具体信息视实际情况哈!
以上是开发前的配置准备。
本人开发的思路是,客户端页面在初始化时请求服务端中的接口,将网页的url及参数传给该接口,服务端获取到url进行签名算法,回传给客户端签名,时间戳等参数,客户端通过config接口进行权限验证,验证成功后,开放标签便生效。

一、客户端

1 引入js-jdk:

方式很多,由于本人网页开发是uniapp框架,所以用的npm。其他不同框架,不同引入方式。在此不多叙述。

2  通过config接口注入权限验证配置并申请所需开放标签

以下代码的timestamp,nonceStr,signature都是从服务端过来的数据,客户端的这些参数要与服务端做签名时的参数一致,不能分别做各自的随机数,时间戳等。 由于jsApiList是必填的,所以可任意填一个简单的即可。主要是对开放标签做权限的校验。

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

config验证通过后,会通过ready进行成功后的操作;

wx.ready(function(){
  // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

通过error接口处理失败验证。

wx.error(function(res){
  // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开configdebug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

总结:在页面初始化时,访问接口,获取到的签名等数据。config验证成功后,开放标签才能展示,如果验证失败,标签是不会展示的。当然,如果你去掉了标签中的script脚本,标签都会显示的,但这样做就没有什么意义了。

3 标签

<wx-open-launch-app
	id="launch-btn"
	appid="移动应用的AppID"
	:extinfo="extinfo" //跳转携带信息,用于app接收后处理
	@ready='ready'
	@launch='launch'
	@error='error'
>
	<script type="text/wxtag-template">
		<style>.btn {color: #FFFFFF;background-color: #19be6b;}</style>
            <button class="btn" >App内查看</button>
	</script>
</wx-open-launch-app>

1 ready事件是标签初始化完毕后,就可以进行点击操作;这个事件可以用于一些标签和其他按钮切换的操作。即一旦触发该事件,即表示标签可以进行操作了。
2 launch事件是用户点击跳转按钮并对确认弹窗进行操作后触发;实际上,我在该事件中并没有做任何操作,因为没有打印出任何有价值的信息,无法进行提示信息。
3 error事件是用户点击跳转按钮后出现错误。这里可以处理点击按钮失败后,跳转到应用市场或其他下载页面。
注:
extinfo这个是跳转app时携带的信息,用于App端获取后进一步做相关操作;我用的是字符串形式,主要app端便于获取及兼容等其他原因。

二、服务端

1 在服务端主要做的是签名,以及将config需要的数据传给客户端。

const arr=[
    `jsapi_ticket=${ticket}`,// jsapi_ticket,通过与微信服务器交互所得,具体参考公众号文档
    `noncestr=${noncestr}`, // 随机字符串
    `timestamp=${timestamp}`,// 时间戳
    `url=${url}`// 是需要访问的网页路径,包含参数;文档中说不能包含hash(#),但实际上包含也没什么影响.
 ]
 const signature = sha1(arr.sort().join('&'))
 将上述参数返回给客户端。用于config验证。

三、App端

App是由uniapp开发的,所以在onLaunch函数中通过plus.runtime.arguments获取;或者在onShow函数中获取;但这两个分别有缺陷之处;
onLaunch缺陷:如果App已经启动了,通过开放标签再次打开App,是接受不到参数的;原因是onLaunch函数不再触发。
onShow缺陷:如果开放标签已经打开App,并进行了打开后业务的操作,如果用户此时触发onHide函数,再次回到App时,会再次触发onShow,即业务会再次被触发。

var args= plus.runtime.arguments;
获取到该参数后,进行响应业务的操作。

四、注意事项

1 开发工具调试:

开发工具的调试,不要在开发工具中直接操作,这样即便代码写的没问题也会报错;用手机扫描该页面的二维码进行调试就行;

2 真机调试

在真机微信端测试时,要通过点击卡片等形式进入,不能直接通过url地址进入网页,否则也是会一直报莫名其妙的错误的!

3 开放标签的动态隐藏

对开放标签做v-if或v-show的隐藏要非常注意。因为开放标签和config的验证是同步进行的,不能先config验证是否成功,再判断是否显示开放标签,这样做,即便config验证通过,开放标签页不能显示;

4 在uniapp或者vue相关框架中报警告

开放标签属于自定义标签,Vue会给予未知标签的警告,可通过配置Vue.config.ignoredElements来忽略Vue对开放标签的检查。