公众号h5打开小程序

最新推荐文章于 2025-04-02 17:21:54 发布

小程序照片合成

最新推荐文章于 2025-04-02 17:21:54 发布

阅读量337

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： javascript

本文链接：https://blog.csdn.net/cc1314_/article/details/115402057

微信小程序专栏收录该内容

16 篇文章

订阅专栏

本文介绍了如何在uniapp Vue页面中使用wxconfig.js设置微信公众号的配置，并展示了如何在真机上调用微信小程序接口。重点讲解了setconfig函数和wx.open-launch-weapp的使用，确保正确集成到项目中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>

在真机测试