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">
		
		<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>

你可能感兴趣的:(uniapp,小程序,前端,javascript)