uniappH5页面跳转小程序

官方文档: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html,必须是认证公众号。


前端安装模块

npm i weixin-js-sdk

main.js 添加一行代码

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

前端代码

<template>
	<view class="page">
		<!-- 样式类的话貌似只能在style的内联样式或行内样式才生效 -->
		<wx-open-launch-weapp
		  id="launch-btn"
		  username="小程序原始id"
		  path="小程序路径"
		>
			<script type="text/wxtag-template">
				<style>.btn { padding: 12px }</style>
				<button class="btn">打开小程序</button>
			</script>
		</wx-open-launch-weapp>
	</view>
</template>
<script>
	var wx = require('weixin-js-sdk');
	export default {
		data() {
			return {
			}
		},
		onLoad() {
			this.getConfig()
		},
		methods: {
			// wx api 注册
			getConfig() {
				uni.request({
					url:"后端接口地址",
					method:'POST',
					data:{
						url : window.location.href
					},
					success(res) {
						let data = res.data.data
						wx.config({
							debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
							appId: data.appid, // 必填,公众号的唯一标识,填自己的!
							timestamp: data.timestamp, // 必填,生成签名的时间戳,刚才接口拿到的数据
							nonceStr: data.nonceStr, // 必填,生成签名的随机串
							signature: data.signature, // 必填,签名,见附录1
							jsApiList: ['wx-open-launch-weapp'],
							openTagList: ['wx-open-launch-weapp'] // 跳转小程序时必填
						});
					}
				})
			}
		}
	}
</script>
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值