uniapp 微信公众号网页 打开小程序

文章发布于2021年03月03日 18:47, 归类于: 前端

跳转小程序:wx-open-launch-weapp-微信开发文档

最近有个项目,需要在微信公众网页中打开小程序,现在留下笔记。

一、引入微信 jssdk

具体的微信 jssdk 使用方法可以翻看我的笔记或者网上找。

在需要使用的接口列表内填入wx-open-launch-weapp

jweixin.config({
	debug: false,
	appId: result.appId,
	timestamp: result.timestamp,
	nonceStr: result.nonceStr,
	signature: result.signature,
	// 需要使用的JS接口列表
	jsApiList:['wx-open-launch-weapp'],
	// 开放标签,跳转小程序时必填
	openTagList: ['wx-open-launch-weapp']
});

jweixin.ready(function(res) {
	uni.$emit('jweixinReady', res)
});

jweixin.error(function(res) {
	uni.$emit('jweixinError', res)
});

二、使用

因为 这个开放标签未在vue内注册,直接使用会报错,所以这里使用v-html的方式使用。

我用了网上很多个方法都无法显示开放标签,唯独这个方法可以显示并且可以打开小程序。

<template>
	<view class="container" v-html="html"></view>
</template>

<script>
	export default {
		data() {
			return {
				html: '',
				username: 'gh_dacce4688038',
				path: 'pages/Goods/Confirm/Confirm?open_target=123'
			}
		},
		onReady() {
			// 初始化,这个就是自己封装的,就是上面第一步的代码
			this.$wechat.initJssdk()
			
			// 微信 config 信息验证后,渲染开放标签
			uni.$on('jweixinReady', () => {
				this.init()
			})
		},
		methods: {
			init() {
				this.html =
					`<wx-open-launch-weapp id="launch-wxapp" username="${this.username}" path="${this.path}">  
				        <template>  
				            <style>  
							   .btn {
									height: 44px;
									line-height: 44px;
									border-radius: 22px;
									background-color: #dcf8f0;
									color: #03cb95;
									font-size: 16px;
									font-weight: bold;
									text-align: center;
									outline:none; 
									border:none;
							   } 
				            </style> 
				            <button class="btn">打开小程序</button>  
				        </template>  
				    </wx-open-launch-weapp>`;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.container {
		/deep/ #launch-wxapp {
			display: block;
			box-sizing: border-box;
			padding: 30px;
			width: 100%;
			background-color: red;
		}
	}
</style>

三、打开小程序

转载请注明来源:《 uniapp 微信公众号网页 打开小程序》- rojerYong's Blog

文章链接:https://www.eoway.cn/article/1614768448.html

如果此文摘取了你的原创,请联系本站管理员,将对此文修改、删除处理。

--END--
上一篇:css 变量 下一篇:uniapp开发微信公众号网页-微信JSSDK使用