小程序跳转-官网更新
同一公众号下关联的另一个小程序。如果没有关联同一个公众号，则无法成功打开另一小程序。（A主体小程序跳转B主体小程序，必须，A主体公众号 关联B主体小程序或是B主体公众号关联A主体小程序）一、公众号关联小程序公众号关联小程序后，将可在图文消息、自定义菜单、模板消息等功能中使用小程序。关联规则：所有公众号都可以关联小程序。一个公众号可关联10个同主体的小程序，3个不同主体的小程序。一个小...
一.跳转问题
（1）.小程序跳转H5：
官网暂不支持直接跳转H5，只能通过嵌套web-view，来访问H5的页面。
<template>
<view>
<web-view id="viewopen" :src="src" @message="genData"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
src: ''
}
},
onLoad(options) {
let url = options.url
let redirect_url = 'https://www.*****.com.cn/accesages?type=newurl&url=' + encodeURIComponent(url);
this.src = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxa32b339***88a59&redirect_uri=' +
encodeURIComponent(redirect_url) + '&response_type=code&scope=snsapi_base&state=1,0#wechat_redirect';
},
onShow() {},
methods: {
//获取传递的参数
genData(e) {
let dataArr = e.detail.data
if (dataArr && dataArr.length > 0) {
console.log(dataArr, 'dataArr && dataArr.length--')
console.log(dataArr, '获取公众号的数据');
}
}
}
}
</script>（2）.H5跳转小程序：
A.要获取公众号的信息的
小程序里内嵌的H5业务的时候跳回小程序。在H5引入js，调用wx.miniProgram.navigateTo跳转小程序方法
注意：这个wx.miniProgram.navigateTo 跳转小程序的方法，前提是 这个h5的页面 是在小程序的web-view嵌套里，然后才可以使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>h5跳转小程序</title>
</head>
<body>
<h3 align="center">正在跳转到小程序...</h3>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script>
wx.miniProgram.navigateTo({url: '/index/index?phone=18012121212'})
</script>
</body>
</html>
vue 的h5页面
安装weixin-js-sdk
在组件里
<template>
<div>
<div>H5公众号页面</div>
<button @click="jump">跳转的</button>
<button @click="backFn">返回 delta: 0</button>
</div>
</template>
<script setup>
import wx from 'weixin-js-sdk'
import { useRoute } from 'vue-router'
const route = useRoute()
window.wx = wx
/*tabBar*/
const tabBarLinks = [
'/pages/index/index',
'/pages/product/category',
'/pages/user/order',
'/pages/user/my',
]
function jump() {
let url = route.query.url
if (!url || url.length == 0) {
return false
}
if (tabBarLinks.indexOf(url) !== -1) {
// switchTab 跳转的话，只能用 wx.miniProgram.postMessage传递参数，url不行
wx.miniProgram.switchTab({
url: url
})
wx.miniProgram.postMessage({ data: route.query })
} else {
// wx.miniProgram.navigateTo 目前只能通过url 传递参数， wx.miniProgram.postMessage传递的话，小程序那边接受不到参数
console.log('navigateTo：', url)
wx.miniProgram.navigateTo({
url: url + '?code=' + route.query.code
})
}
}
function backFn() {
//返回小程序上一级
wx.miniProgram.navigateBack()
wx.miniProgram.postMessage({
data: route.query
})
}
onMounted(() => {
setTimeout(() => {
//自动跳转
wx.miniProgram.navigateBack()
wx.miniProgram.postMessage({
data: route.query
})
}, 1000)
})
</script>
<style lang="scss" scoped></style>
小程序的获取值的方式如上面 web-view嵌套方式
B.直接跳小程序-2种方式
注意：
在web-view 里是不能直接识别wx-open-launch-weapp 。
使用微信开放标签前置条件
1、绑定域名
登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”
2、开放对象
1、已认证的服务号，服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。
2、已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序。
开发过程中发现 测试环境标签都不生效，只有在正式环境可以使用；开发工具不能实现跳转，只能使用手机测试
1）普通html页面
1.引入 js 文件：https://res.wx.qq.com/open/js/jweixin-1.6.0.js
2.通过config接口注入权限验证配置并申请所需开放标签
$.ajax({
method:"GET",
url: "请求后端地址",
data: {
// 请求参数
},
success: function (res) {
// 根据返回的参数进行赋值
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: res.data.appId, // 必填，公众号的唯一标识
timestamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
signature: res.data.signature, // 必填，签名
jsApiList: [], // 必填，需要使用的JS接口列表
openTagList: data.data.openTagList,
});
},
});
// 通过ready接口处理成功验证
wx.ready(function () {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
// 通过error接口处理失败验证
wx.error(function (res) {
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});
3.使用html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
<title>微信服务后台</title>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
.gooseApplet {
width: 100%;
}
img {
width: 100%;
height: auto;
display: block;
}
.big-container {
width: 100%;
}
</style>
</head>
<body>
<div class="big-container" id="internal"></div>
<script>
var mini_appid = 'wx6****82d';//小程序appid
var path = 'pages/index/index.html';//小程序地址
var goUrl = GetQueryString('goUrl')//获取地址
var openid = GetQueryString('o')//openid
// 获取wx api配置
$.ajax({
method: "GET",
url: "https://www.hxfj.com.cn/wxAppletApi/wx/js-sdk",
data: {
url: 'https://www.hxfj.com.cn/gooseApplet.html?goUrl=' + goUrl + '&o=' + openid
},
success: function (res) {
// 根据返回的参数进行赋值
wx.config({
debug: false,
appId: res.data.appId, //公众号
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: ['chooseImage', 'previewImage'], //必写，否则不显示
openTagList: ['wx-open-launch-weapp'] //必写，否则不显示
});
},
});
// 通过ready接口处理成功验证
wx.ready(function () {
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
});
// 通过error接口处理失败验证
wx.error(function (res) {
console.log('签名失败', res);
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
});
//跳转小程序购买
//跳转小程序或公众号
var appletcnt = '<div class="gooseAppletBtn" style="width: 80%;margin: 0 auto;cursor: pointer;"><img src="https://www.hxfj.com.cn//attach/2024/03/28/%E7%AB%8B%E5%8D%B3%E8%B4%AD%E4%B9%B0%E6%8C%89%E9%92%AE_20240328173926000004116.png" style=" width: 100%;" /></div>'
// 也就是把 步骤3 中的代码进行样式和内容的更改，动态渲染
// 这里有个小坑，如果说内容不显示，就给 wx-open-launch-weapp 标签设置width和height，设置不生效要加 position: absolute;
document.getElementById("internal").innerHTML = '<div class="' + classsty + '" id="goWebs" ><img src="https://www.hxfj.com.cn//attach/2024/03/28/%E5%AE%A3%E4%BC%A0%E5%9B%BE1_20240328173905000003903.png" alt="背景图" />' + '<wx-open-launch-weapp style=" z-index: 999;position: fixed;left: 0; bottom: 0px;width: 100%; height: 52px;" id="launch-btn" appid="' + mini_appid + '" path="' + path + '"><template>' + appletcnt + '</template></wx-open-launch-weapp></div';
var btn = document.getElementById('launch-btn');
btn.addEventListener('launch', function (e) {
console.log('成功');
});
btn.addEventListener('error', function (e) {
console.log('失败', e.detail);
});
// 获取html地址栏参数的函数
function GetQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]);
return null;
}
</script>
</body>
</html>效果如下
注意：a.内容和样式都要写在 wx-open-launch-weapp 标签里面，否则不生效，样式还可以写成行内样式,同时 wx-open-launch-weapp 标签定位position: fixed;是没效果
b.path 小程序地址必须加html
2）vue项目
安装weixin-js-sdk
组件使用
<div >
<wx-open-launch-weapp
id="launch-button"
appid="wx6***82d"
path="pages/index/index.html"
@launch="handleLaunchFn"
@error="handleErrorFn"
>
<script type="text/wxtag-template">
<div style="width: 3rem; height: 3rem">打开小程序</div>
</div>
</wx-open-launch-weapp>
</div>
async mounted() {
await this.init()
},
methods: {
init() {
const url = window.location.href
getJsSdk({
url: url
}).then(res => {
console.log('获取jsdk:', res, res.data.appId)
wx.config({
debug: true,
appId: res.data.appId, //公众号
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: ['chooseImage', 'previewImage'], //必写，否则不显示
openTagList: ['wx-open-launch-weapp'] //必写，否则不显示
})
wx.ready(function (res1) {
console.log('获取签名成功：', res1)
})
wx.error(function (res2) {
console.log('获取签名失败：', res2)
})
})
},
handleLaunchFn (e) {
console.log(e)
},
handleErrorFn(e){
console.log('fail', e.detail);
},
} 注意： 1.页面报错找不到模板wx-open-launch-weapp,可以在main.js配置
Vue.config.ignoredElements = ['wx-open-launch-weapp']
2.官网例子中template标签要替换为 <script type="text/wxtag-template"><script>
3.注意安装的jssdk版本是1.6.0js
该接口用于获取小程序 scheme 码，适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，有数量限制，目前仅针对国内非个人主体的小程序开放
（3）.小程序跳转小程序：
同一公众号下关联的另一个小程序。如果没有关联同一个公众号，则无法成功打开另一小程序。（A主体小程序跳转B主体小程序，必须，A主体公众号 关联B主体小程序或是B主体公众号关联A主体小程序）
2020年4月起，小程序跳转小程序 不需要关联，直接调用 wx.navigateToMiniProgram 方法，就可以。也没有数量的限制
所以下面的代码 需要注意，结合更新的官网。注意，在开发工具上，并不会跳转，要真机调试才有效果
（4）小程序嵌套h5.跳转其他小程序
首先web-view中H5是无法直接打开其他小程序的，只能通过H5跳转回小程序，再让小程序跳转到其他小程序。
H5跳转回小程序使用wx.miniProgram.navigateTo()小程序跳转小程序使用wx.navigateToMiniProgram(),官方文档有示例，用法很简单，只需要传入appid,还有path(可选参数，不是必须的，不传则默认跳转到小程序首页)
二、公众号关联小程序
公众号关联小程序后，将可在图文消息、自定义菜单、模板消息等功能中使用小程序。
关联规则：
所有公众号都可以关联小程序。
一个公众号可关联10个同主体的小程序，3个不同主体的小程序。
一个小程序可关联3个公众号。
公众号一个月可新增关联小程序13次，小程序一个月可新增关联5次。
补充：场景值
如：从公众号 profile小程序列表点击进去，获取appid；根据文档中的描述，当场景值为1020，可以在onLaunch中通过referrerInfo.appId获取到来源公众号appid，
（1）.在A主体小程序app.json加上B主体小程序的appid
"navigateToMiniProgramAppIdList":[
"wx6f8.......26"
]
（2）.代码触发
let name = '**青11',certNo='35072******8';
//envVersion ( "develop" 开发板 "trial" 体验版 "release" 正式版)
wx.navigateToMiniProgram({
appId: "wx6f8*******86",
path: 'pages/index/index?name='+name+"&certNo="+certNo,
extraData: {
name:'**青',
certNo:'35072******8'
},
envVersion: "trial",
success(res) {
console.log('跳B小程序',res)
},
fail(res) {
console.log('跳B小程序跳转失败'+res.errMsg)
}
})
注意调试的时候：A小程序可以通过主机模拟，跳转B小程序体验版，B小程序返回A小程序，之间开发板就好B主体小程序 pages/index/index 页面 onLoad 可以获取path的参数（url跳转参数）
extraData的传参要在B主体小城app.js 在 App.onLaunch，App.onShow 中获取到这份数据。如果跳转的是小游戏，可以在 wx.onShow、wx.getLaunchOptionsSync 中可以获取到这份数据数据。 如下图
（3）.报错
1、报错：fail appId "${appId}" is not in navigateToMiniProgramAppIdList
在A主体小程序app.json加上B主体小程序的appid
"navigateToMiniProgramAppIdList":[
"wx6f8.......26"
]
2、报错：navigateToMiniProgram:fail can only be invoked by user TAP gesture
需要点击触发才跳转。于是只能想办法让用户去点击，加个提示框让用户确定继续进行操作？
wx.showModal({
title: '温馨提示',
content: '跳转A主体小程序',
showCancel:false,
cancelColor: '#000000',
confirmText: "确定",
confirmColor: '#3cc51f',
success: function (res) {
//envVersion ( "develop" 开发板 "trial" 体验版 "release" 正式版)
wx.navigateToMiniProgram({
appId: "wx276f......01",
path: 'pages/identityValidate/identityValidate?id=2222',
envVersion: "develop",
success(res) {
console.log('A小程序',res)
},
fail(res) {
wx.showToast({
title: 'B跳转失败'+res.errMsg,
icon: 'none',
duration: 1000
});
console.log('失败',res)
}
})
}
})
3 A小程序跳转到B小程序 ，点击允许跳转 报错“您的来源小程序未被授权或者授权查询失败“
这是B小程序来源小程序做了限制，为了阻止外部小程序直接跳转，打开注意：小程序api 更新：
三.注意的问题
1.如A小程序跳转到B小程序，指定页面跳转（指定的页面，还有上一级的页面情况下），此时B小程序就没办法返回上一个页面。
2.A小程序跳转B小程序，提示框样式不可以修改或者去掉提示框
除了扫码和广告的小程序，自己弄的都会有弹窗提示跳转的
3.小程序模板消息：跳转页面仅限本小程序内的页面（官网说的）
4.小程序嵌套公众号:小程序后台系统白名单认证后，是可以访问，但是不能支付
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
5
0- 0
已为社区贡献4条内容
所有评论(0)