uniapp vue3 微信公众号打开小程序

Posted 2023-04-02 织_网

<template>
	<view class="certification" style="height: 100vh;">
		<wx-open-launch-weapp
			style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
			:username="userName"
			:path="path"
			@launch="handleLaunchFn"
			@error="handleErrorFn"
			id="launch-btn"
		>
			<div v-is="'script'" type="text/wxtag-template">
				<!--这里的height只有px起效 vw不起效，visibility: hidden是为了让组件样式不影响到实际效果 -->
				<div
					class="btn"
					style="height: 100%;display: flex;flex-direction: column;align-items: center;padding-top: 50px;width: 100%;background: #666666;"
				>
					打开小程序
				</div>
			</div>
			<!-- vue3中这样写会报错，改成上面方式v-is="'script'" -->
			<!-- <script type="text/wxtag-template">  
			        <style>.btn  padding: 12px; border: 1px solid red; </style>
			        <button class="btn">打开小程序</button>
			       </script> -->
		</wx-open-launch-weapp>
	</view>
</template>

<script setup>
import  ref, reactive, getCurrentInstance, toRefs, nextTick  from 'vue';
import  wxConfig  from '@/common/api.js';
import  onLoad, onShow  from '@dcloudio/uni-app';
import wx from 'weixin-js-sdk';

let dataRef = reactive(
	path: '/pages/secondary/product-details',
	userName: 'gh_fa95b8d03e47'
);
const  proxy  = getCurrentInstance();
onLoad(option => 
	nextTick(function() 
		let paramData =  url: window.location.href.split('#')[0];
		wxConfig(paramData).then(res => 
			if(res.code == 0)
				const data = res.result
				wx.config(
					debug: false,
					appId: data.appId, //小程序的appId
					timestamp: data.timestamp, //生成签名的时间戳
					nonceStr: data.nonceStr, //生成签名的随机串
					signature: data.signature, //签名
					jsApiList: ['wx-open-launch-weapp'],
					openTagList: ['wx-open-launch-weapp']
				);
				wx.ready(e => 
					 var btn = document.getElementById('launch-btn');
					  btn.addEventListener('launch', function (e) 
					    console.log('success');
					  );
					  btn.addEventListener('error', function (e) 
					    console.log('fail', e.detail);
					  );
					console.log(e, '成功验证');
				);
				wx.error(e => 
					console.log(e, '失败信息');
				);
			
			
		)
		
	);
);
onShow(() => );
const  path, userName  = toRefs(dataRef);

const handleLaunchFn = e => 
	console.log('success');
;

const handleErrorFn = e => 
	console.log('Error');
;

</script>

<style lang="scss" scoped>
.certification 
	width: 100%;
	background: #f0f0f0;
	overflow: hidden;


.opentag 
	display: block;
	width: 400rpx;
	height: 400rpx;
	background-color: aliceblue;

</style>

uni-k如何连接微信

参考技术A uni-k如何连接微信？
想要通过uniapp连接微信小程序，其实，步骤并不复杂，我们只需到用到一个软件，便可以完美解决这个问题，，因此，我们需要在这里用到一款应用便捷的程序——“天天外链”，它可以帮助我们实现uniapp跳转微信小程序。一、uniapp跳转微信小程序的主要作用缩短引流过程，提高流量转化效率，从而使用户获得更大的效益。二、如何实现uniapp跳转微信小程序由于uniapp本身不具有跳转其他应用的功能，因此需要在uniapp添加一个能够响应小程序的链接，从而实现uniapp连接微信小程序。因此，我们需要一个可以创建外链的第三方外链工具—“天天外链”。具体步骤参考如下:第一步：点击进入天天外链，点击“立即创建”即跳转到登陆页面，选择扫码登陆或账号密码登陆，也可以选择新用户注册 参考技术B uni-k可以通过以下步骤来连接微信：1. 点击“打开客户端”按钮；2. 在出现的页面中输入账户和密码；3. 连接你的微信账号；4. 通过uni-k提供的菜单中进行个人账号管理；5. 查看你在uni-k上的所有账单。