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>

猜你喜欢

转载自blog.csdn.net/chb19991118/article/details/121209700