WeChat official account H5 jump applet, wx-open-launch-weapp

Go straight to the dry goods, no more beeps~~

Precautions:

• Need to bind the applet that needs to be redirected in the official account
• When obtaining jssdkthe configuration, you need to bind the security domain name to the public platform
• WeChat version requirements: 7.0.12 and above. The system version requirements are: iOS 10.3 and above, Android5.0 and above.
• wx-open-launch-weappIf you need to add tags on WeChat img, imgthe path needs to be base64 or a remote address, not a local static address

1. Introduce the WeChat JSDK file

Reference address: http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

Note: If the version is too low, the wx-open-launch-weapp tag may not be available

2. Inject WeChat interface verification and apply for open tags

Before that, you can take a look at the official document provided by WeChat. Static website H5 jump applet | WeChat open document , where the definition of appid is the appid of the jump applet. But don't believe me, I was poisoned by this poison, and the button couldn't be loaded.

 

fetch().then((res) => {
	let urlN = window.location.href.split('#')[0];
	let timestampn = new Date().getTime().toString();
	let timestamp = timestampn.substring(0, 10);			//生成签名的时间戳
	let nonceStr = Math.random().toString(36).substr(2);	//生成签名的随机串
	let con = `jsapi_ticket=${res.content.ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${urlN}`
	let signature = hex_sha1(con);		//签名
	wx.config({
		debug: false, // 调试时可开启
		appId: res.content.appid, // <!-- replace -->
		timestamp: timestamp, // 必填，填任意数字即可
		nonceStr: nonceStr, // 必填，填任意非空字符串即可
		signature: signature, // 必填，填任意非空字符串即可
		jsApiList: ['chooseImage'], // 必填，随意一个接口即可
		openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名wx-open-launch-weapp
	})
	wx.ready(function() {
		vm.entryVisiable = false;
		vm.$nextTick(() => {
			try {
				var btn = document.getElementById('launch-btn');
				btn.addEventListener('launch', function(e) {
					console.log('success');
					console.log(e);
				});
				btn.addEventListener('error', function(e) {
					console.log('fail', e);
				})
			} catch (error) {

			}
		})
	});
	wx.error(function(err) {
		vm.$toast(err.errMsg);
	});
})

fetch is the backend interface used to obtain the official account appid, and ticket;

The hex_sha1() method is a signature encryption method mentioned in my previous blog;

3. index.vue page

important point:

• username is the original id that needs to jump to the applet, starting with gh_
• path is the path of the WeChat applet that needs to be redirected, and .html needs to be added after the path. Otherwise, jump to the past
• The Vue framework needs to convert template tags into script tags to avoid mixing with Vue's own template tags and reporting errors

<wx-open-launch-weapp id="launch-btn" username="gh_c68673c8e45f" path="pages/index/index.html">
	<script type="text/wxtag-template">
		<style>
			.label-car_button { color: #333;font-size: 14px;font-weight: 500;font-family: "PingFang SC"; margin: 0;text-align: center;}
			.label-car_img { vertical-align: middle; width: 63px;}
		    .label_box { position: relative;}
		</style>
		<div class="label_box">
				<img class="label-car_img" src="xxx/static/wxAppImg/claim-entry-2.png"/>
				<p class="label-car_button">车险</p>
		</div>
	</script>
</wx-open-launch-weapp>

 4. The console reports an error

If the following errors are found

[Vue warn]: Unknown custom element: <wx-open-launch-weapp> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Please add at the entrance of the Vue file, namely main.js: 

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

 5. If you need to add dynamic pictures to the wx-open-launch-weapp tag

My solution is to write an absolute path;

Read the content of several blogs:

• Using the syntax of applets

<img src="{
   
   { icon.image }}" />

• Use js single and double quotes to wrap variables 

<img src='" + window.location.origin + " /static/img/img1.png' />

These two did not achieve the effect I wanted, and the picture did not load.

There is also the meaning of providing base64 feeling and my absolute path as I said at the beginning of the article, you can give it a try.

If there is a way to achieve this, please let me know~~