H5跳转小程序工作技术总结

1、H5页面跳转小程序所需要的文件：微信JSSDK

微信官方文档：

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

tips：从后台获取openid的同时，也获得了token。设置token后，再向后台获取其他页面信息，使用promise。

promise的相关知识：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#Promise_%E5%8E%9F%E5%9E%8B

promise的使用案例之一：

// 使用async和await处理一个异步函数，返回一个promise对象，可以使用then()来获取promise的返回值。可以处理类似先得到结果一，然后根据结果一来处理之后的工作。
async function setWxConfig() {
    let res = await getOpenIdFunc()
    return res
}
setWxConfig().then(res => {
    // ...
})

2、跳转标签的使用

H5页面跳转微信小程序，必须引入JSSDK，在uni-app中使用如下：

// 1.安装weixin-js-sdk
npm install weixin-js-sdk
// 2.在设置wx.config的页面引入
import wx from 'weixin-js-sdk'
// 3.设置wx.config
wx.config({
	debug: false,
	appId: appId,
	timestamp: timestamp,
	nonceStr: nonceStr,
	signature: signature,
	jsApiList: ['getNetworkType', 'updateAppMessageShareData', 'hideMenuItems'],// 必须有一个
	openTagList: ['wx-open-launch-weapp'] // 跳转标签
})
// 4.在页面中使用 wx-open-launch-weapp
<wx-open-launch-weapp 
	@click="handleClick(item)"  			// 点击标签时触发
	@launch="handleLaunch" 					// 点击确认按钮的时候触发
	@error="handleError" 					// 跳转错误的时候触发
	path="pages/index/index.html"			// 跳转小程序的时候必填，小程序的首页；小游戏不必
	:username="item.origin_id" 				// 小程序或小游戏的 origin_id
	style="width: 50px;height: 25px;"		// wx-open-launch-weapp 的样式
>
	<script type="text/wxtag-template">		// vue中使用，在其他中为 template 标签
		<style>
			.btn {
				width: 50px;
				height: 25px;
				background: linear-gradient(90deg, #F5943B, #EC6A42);
				border-radius: 2px;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 12px; // 不能使用rpx，要使用px
				color: #fff;
			}
			 </style>
				<div class="btn">直接玩</div> // 不能使用<view>标签
			</script>
</wx-open-launch-weapp>
// 5.针对vue可能对 wx-open-launch-weapp 的报错，在main.js中设置如下：
Vue.config.ignoredElements = ['wx-open-launch-weapp']

除此之外，当要循环的数据要在

中显示，例如 标签

// 使用v-html
<view v-html="wxOpenTags1(item)"></view>
// 在methods中
wxOpenTags1(item) {
	let script = document.createElement('script')
	script.type = 'text/wxtag-template'
	let image = item.logo
	let username = item.origin_id
	script.text =
		`<div Style="height:52px;width:52px;text-align:center;"><img src="${image}" width="52px" height="52px" style="border-radius:26px" /></div>`
	let html =
		`<wx-open-launch-weapp id="${username}" style="width:52px;display:block;height:52px;border-radius:26px" username="${username}"path="">${script.outerHTML}</wx-open-launch-weapp>`
				
	return html
},
// 监控click和launch，直接操作dom，例如：
let id = item.origin_id
let launch  = document.getElementById(id)
// 点击时触发
launch.addEventListener('click', function() {
    // ...
})
// 点击确认按钮的时候触发
launch.addEventListener('launch', function() {
    // ...
})

3、内容加载的优化

当有大量需要渲染的时候，页面无法一次全部加载出来，会有延时显示空白。采用懒加载，一次显示部分内容。