uniapp开发的App(安卓)端跳转uniapp微信小程序

本文介绍了微信小程序的两种跳转方式:通过微信开放文档获取URLScheme和URLLink,以及在App中通过微信分享功能跳转。提供了详细的代码示例和配置步骤。

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

本文总结两种跳转方法:!!!适合自己的才是最好的

1、根据微信开放文档提供的方法获取小程序的URL (两种)

        !  小程序的URL Scheme 

weixin://dl/business/?t= *TICKET*

        !! 小程序的URL Link 

https://wxaurl.cn/*TICKET* 或 https://wxmpurl.cn/*TICKET*

 

代码实现: !!!切记本案例是前端调用,应该让后端封装调用(为了安全考虑)

<view class="button">
	<button type="primary" @click="getUniappURL">跳转小程序</button>
</view>
methods: {
	getUniappURL() {
		let params = {
			// path:要跳转到的小程序的目标页面纯路径(不要拼接参数)
			// 注意:如果该链接要打开的版本是正式版,则这个path一定要已经发布到了正式版,不然无法访问到该页面则链接无法生成成功
			path: '/pages/index/insex',
			query: 'a=1&b=2', // 短链的入参
			env_version: "release", // 正式版
			expire_type: 1,
			expire_interval: 30,
		}
		this.getAppLink(params)
	},
	getAppLink(params) {
		// AppID(小程序ID)
		const appid = 'wx******cf'
		// AppSecret(小程序密钥)
		const secret = 'afe3d06*******975dcbe4'
		let tokenURL = ''
		let urllink = ''
		// #ifdef APP
		tokenURL = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`
		// #endif
		// 先发起请求获取凭证2小时内有效
		uni.request({
			url: tokenURL,
			method: 'GET',
			success(res) {
				// #ifdef APP
				urllink = `https://api.weixin.qq.com/wxa/generate_urllink?access_token=${res.data.access_token}`//获取 URL Link
                //urllink = `https://api.weixin.qq.com/wxa/generatescheme?access_token=${res.data.access_token}`//获取 URL Scheme
				// #endif
				// 再发起请求获取url
				uni.request({
					url: urllink,
					method: 'POST',
					data: {
						...params
					},
					success(result) {
						console.log('生成网址:', result.data.url_link);
						// #ifdef APP
                        //通过uniapp内置组件web-view跳转该链接
						uni.navigateTo({
						    url: `/pages/webView/webView?url=${result.data.url_link}`,
						});
						// #endif
					},
					fail(err) {
						console.log(err);
					}
				})
			},
			fail(err) {
				console.log(err);
			}
		})
	},
}

以上可以拿到小程序的两种URL 链接

vebView页面代码:

<template>
	<view>
		<web-view :src="url"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: ''
			};
		},
		onLoad(options) {
			this.url = options.url;
		}
	};
</script>

2、通过App的微信分享跳转微信小程序

!!!打包App时需要在manifest.json中APP模块配置Share中微信分享保持开启

!!!打包App时需要在manifest.json中APP模块配置Share中微信分享保持开启

!!!打包App时需要在manifest.json中APP模块配置Share中微信分享保持开启

代码实现:

!!! $appJumpMiniPro方法我放在了vue原型上
!!!需要小程序的原始ID:以gh_开头的id
<view class="button">
	<button type="primary" size="mini" @click="$appJumpMiniPro('/pages/index/index?basURL=report')">跳转</button>
</view>

$appJumpMiniPro(url)方法: !!!记得在main.js上挂载 否则无效~

Vue.prototype.$appJumpMiniPro = function(url) {
	// 获取分享服务列表
	plus.share.getServices(
		res => {
			let sweixin = '';
			for (var i = 0; i < res.length; i++) {
				let t = res[i];
				if (t.id == 'weixin') {
					sweixin = t;
				}
			}
			if (sweixin) {
				sweixin.launchMiniProgram({
						id: 'gh_****ab42', // 要跳转小程序的原始ID
						path: url, //  可带参数
						type: 2 // 微信小程序版本类型可取值: 0-正式版; 1-测试版; 2-体验版。 默认值为0。
					},
					// 目标小程序点击返回App后执行的回调,在此接收微信小程序传递的参数
					res2 => {
						console.log(typeof res2, res2)
						// res2是微信小程序传递回来的参数 类型为string 需转化为js对象使用
						let result = JSON.parse(res2)
						console.log(result)
						// 拿到参数后执行你需要的逻辑
					},
					err2 => {
						console.log(err2)
					}
				);
			} else {
                // 没有获取到微信分享服务
				uni.showToast({
					icon: 'none',
					title: '当前环境不支持微信操作!'
				})
			}
		},
		err => {
            // 获取分享服务列表失败
			console.log(err)
		}
	)
}

到此结束~以上是App跳转微信小程序的两种方法,适合自己的才是最好的

评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值