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

work 专栏收录该内容
2 篇文章 0 订阅

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、内容加载的优化

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

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2020 CSDN 皮肤主题: 数字50 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值