公众号h5打开小程序

1、config配置 wxconfig.js

import wx from '../plugins/jweixin.js' //微信js
import {api} from './api.js' //后台接口

export default function setconfig() {
	return new Promise((resolve, reject) => {
		let localLink = location.href.split('#')[0];
		api.getWxConfig({url:localLink}).then(rs => { //获取配置
			console.log("配置",rs.data)
			wx.config({
				debug: false, 生产环境需要关闭debug模式
				appId: rs.data.appId, //appId通过微信服务号后台查看
				timestamp: rs.data.timestamp, //生成签名的时间戳
				nonceStr: rs.data.nonceStr, //生成签名的随机字符串
				signature: rs.data.signature, //签名
				jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'startRecord', 'stopRecord',
					'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice', 'onVoicePlayEnd', 'uploadVoice',
					'downloadVoice', "onMenuShareTimeline",
					"onMenuShareAppMessage",
					"chooseImage",
					"previewImage",
					"uploadImage",
					"chooseWXPay",'wx-open-launch-weapp',
					"hideAllNonBaseMenuItem"
				], // 必填,需要使用的JS接口列表
				"openTagList": [
					"wx-open-launch-weapp"
				],
			});
			wx.ready(function() {
				console.log("config成功")
				resolve(wx)
			})
			wx.error(function(res) {
				console.log("config失败", res)
			})
		}).catch((err) => {
			throw new Error('签名出错', err);
		})
	})
}

2、uniapp vue页面代码

<template>
<div style="position:relative;">
					打开小程序
					<wx-open-launch-weapp username="小程序原始id" path="pages/index/home.html" style="" class="otherbox">
						<script type="text/wxtag-template">
							<style>
								.otherbox{position: absolute;top:0;left:0;right:0;bottom:0;z-index: 9;}
							</style>
							<div class="otherbox"></div>
						</script>
					</wx-open-launch-weapp>
				</div>
</template>
<style>
.otherbox{position: absolute;top:0;left:0;right:0;bottom:0;z-index: 9;}
</style>
<script>
import setconfig from "../../common/wxconfig.js"
export default {
onLoad(options) {
			setconfig().then(res => {

							if (!localStorage.getItem("reloadpage")) { //解决ios第一次不显示问题 localStorage.removeItem("reloadpage")后进来当前页面

								localStorage.setItem("reloadpage", 1);
								location.reload();
							}
						});
		},
}
</script>

在真机测试

 

 

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值