app跳微信小程序
方法1:通过URL Schema跳转
参考文档获取 URL Scheme | 微信开放文档
方法2: 通过URL Link跳转
参考文档获取加密 URL Link | 微信开放文档
注意点:
上述两个方法生成的url,需要先通过浏览器打开链接,再自动跳转小程序,内嵌webview方法不可行,uniapp唤起浏览器打开链接方法如下:
// #ifdef APP
plus.runtime.openURL(url, callback)
// #endif
方法3: 通过app分享跳转
步骤1: 配置manifest.json
参数说明
- appid
微信开放平台申请的应用ID(appid)微信开放平台 - iOS平台通用链接(Universal Link)
可理解为通过打开一个Https链接来直接启动您的客户端应用,
在iOS平台微信支付使用的通用链接,必须与微信开放平台 “管理中心” > “应用详情” > “开发信息” 中的“Universal Links”项中配置一致
注意点:
android app跳转小程序只需要配置appid, iOS app跳转小程序需要配置Universal Link。
关于如何配置Universal links, 可参考uniapp参考文档uni-app官网
上述文档中步骤2开通uniapp的云服务空间和前端托管不是必要操作,可自行配置apple-app-site-association文件上传到项目服务器规定路径中,参考文档
iOS微信分享配置universal links步骤解析_IOS_脚本之家
uniapp ios平台通用链接 Universal Link 设置_ios_孤山剑客扫秋风-华为云开发者联盟
步骤2:获取微信小程序原始id
微信公众平台(微信公众平台)-设置-基本设置-原始ID
步骤3: 代码实现
plus.share.getServices((res) => {
let sweixin = null;
for (let i in res) {
if (res[i].id == "weixin") {
sweixin = res[i];
}
}
//唤醒微信小程序
if (sweixin) {
sweixin.launchMiniProgram({
id: "xxxxx", //微信公众平台 --- 绑定的微信小程序的 --- 原始iD
type: 1, // app跳微信小程序版本 0-正式版; 1-测试版; 2-体验版
path: "pages/xxxxxxx", // 小程序路径
});
}
});
参考文档:HTML5+ API Reference
app跳转支付宝小程序
适用于外部APP、H5页面等手机端页面访问直接跳转小程序。
- 直接scheme唤起小程序:scheme格式:alipays://platformapi/startapp?appId=[appId]&page=[page]&query=[query],详见 小程序scheme链接介绍 。
- http链接唤起小程序:加上 https://ds.alipay.com/?scheme= 前缀,后面拼接 alipays://platformapi/startapp?appId=xxx&page=x/y/z&query=xx%3dxx,详见小程序scheme转换https链接。
代码实现
const alipay_mini_appid = "xxxx"; // 支付宝小程序appid
// 小程序路径+参数
const path = `pages/order/index?${encodeURIComponent(`orderNo=123&from=app`)}`;
plus.runtime.openURL(
`alipays://platformapi/startapp?appId=${alipay_mini_appid}&page=${path}`
);
注意点
实践后发现,如果小程序未上线,不支持跳转测试和体验版。可能需要先上线一版(待验证)
小程序跳app
微信小程序
限制:
不能主动跳转app,需要app先跳转小程序和用户点击button,这两个前提下才能返回app。
button组件文档参考:button | 微信开放文档
代码实现
<button open-type="launchApp" app-parameter="参数">
返回APP
</button>
注意点
open-type="launchApp"为必要属性,app-parameter参数只支持string类型,app在app.vue的onShow中接收返回的参数
支付宝小程序
不支持跳转App、H5页面
https://opensupport.alipay.com/support/FAQ/7063d116-7b1b-4b86-b559-e90e36086fa8
跳转小程序支付的vue组件
该组件可以在app中选择支付方式,并跳转小程序支付的场景中使用
安装uni-ui扩展组件
uni-app官网
代码实现
App-pay-select.vue
<template>
<uni-popup ref="payType" type="share" safeArea backgroundColor="#fff">
<uni-popup-share
title="请选择支付方式"
@select="payTypeSel"
></uni-popup-share>
</uni-popup>
</template>
<script>
export default {
props: {
appPayParams: {
type: Object,
default() {
return {};
},
},
},
data() {
return {};
},
methods: {
open() {
this.$refs.payType.open();
},
payTypeSel({ index }) {
const { orderNo } = this.appPayParams;
if (index === 0) {
// 微信
const path = `/pages/detailsHt/index?orderNo=${orderNo}&from=app`;
this.$utils.appJumpToWxMini(path);
} else if (index === 1) {
// 支付宝
const path = `pages/detailsHt/index?${encodeURIComponent(
`orderNo=${orderNo}&from=app`
)}`;
this.$utils.appJumpToAlipayMini(path);
}
},
},
};
</script>
utils/index.js
import { wx_mini_origin_id, alipay_mini_appid, wx_mini_env } from "@/constant";
/** app跳微信小程序 */
export const appJumpToWxMini = (path) => {
plus.share.getServices((res) => {
let sweixin = null;
for (let i in res) {
if (res[i].id == "weixin") {
sweixin = res[i];
}
}
//唤醒微信小程序
if (sweixin) {
sweixin.launchMiniProgram({
id: wx_mini_origin_id, //微信公众平台 --- 绑定的微信小程序的 --- 原始id
type: wx_mini_env,
path,
});
} else {
}
});
};
/**
* app跳支付宝小程序
*/
export const appJumpToAlipayMini = (path) => {
console.log(
"alipayjump: " +
`alipays://platformapi/startapp?appId=${alipay_mini_appid}&page=${path}`
);
plus.runtime.openURL(
`alipays://platformapi/startapp?appId=${alipay_mini_appid}&page=${path}`
);
};