小程序与小程序、公众号、h5、app之间的跳转

1、小程序和h5之间的跳转

A:小程序->H5

方法:web-view

规则及注意项:
1)可直接打开关联的公众号的文章,其他H5网页需要登录小程序管理后台配置业务域名,即点击https://mp.weixin.qq.com->登录小程序->点击开发->开发设置->业务域名
2)H5网页内的iframe的域名也需要配置业务域名
3)业务域名最多可配置的数量限制为不超过20个
4)每个页面只能有一个web-view
5)web-view具有缓存机制,确定H5内容后尽量不要频繁更改H5内容
6)避免给定的H5链接中带有中文字符,在iOS中会有打开白屏问题

B:H5->小程序

方法:
1)web-view的H5中使用JSSDK1.3.2提供的接口返回小程序页面
2)H5页面放置小程序码

规则及注意项:
1)只有内嵌H5网页才可以直接跳转小程序
2)只能放置小程序码,不支持普通二维码

2、小程序和小程序之间的跳转

方法: 
1)wx.navigateToMiniProgram(Object object)
2)Navigator
3)image组件放置小程序码,长按识别跳转

规则及注意项:
1.需要用户触发跳转
2.需要用户确认跳转
3.需要在app.json文件中配置要跳转的小程序appId
4.每个小程序可跳转的其他小程序数量限制为不超过10个
5.要跳转的小程序appId可在发布新版时更新,不支持动态修改
6.支持长按识别小程序码跳转别的小程序(不限制个数),但不支持长按识别普通二维码跳转小程序

3、小程序和公众号之间的跳转

A:小程序-&g

### Vue 开发的公众号 H5 页面跳转小程序的方法 在Vue项目中实现从微信公众号H5页面向小程序跳转主要依赖于`<wx-open-launch-weapp>`组件以及必要的配置工作。具体来说,在HTML结构里需引入特定的小程序开放标签,并确保这些标签被允许使用。 对于希望集成此功能的应用而言,服务器端返回的数据包内应该含有一个名为`openTagList`的数组属性,其中至少要包含字符串`'wx-open-launch-weapp'`作为其成员之一[^2]。这一步骤是为了告知前端哪些自定义标签是可以安全使用的,从而避免浏览器出于安全性考虑而阻止未知标签的行为。 当上述准备工作完成后,则可以在实际的HTML文档中编写如下所示的按钮元素来触发跳转动作: ```html <!-- HTML --> <button wx:if="{{canUse}}" open-type="launchApp" app-id="__APPID__" path="/page/index">前往小程序</button> ``` 这里需要注意的是,为了使该按钮能够正常运作并成功启动目标小程序,开发者应当替换掉模板中的占位符(即双下划线包围的部分),填入真实有效的应用ID(`__APPID__`)和预期打开的小程序内部路径(path)[^1]。 此同时,在JavaScript逻辑层面上也需要做一些额外处理以增强兼容性和用户体验。下面是一段简单的脚本片段用于说明这一过程: ```javascript // JavaScript (Vue Component Method) methods:{ handleLaunchMiniProgram(){ const appId = 'your-mini-program-appid'; // 替换成自己的小程序appid const pagePath = '/pages/home/home?query=example'; // 可选参数 try { wx.miniProgram.switchTab({ url: pagePath, }); } catch (err){ console.error(err); // 如果失败则尝试另一种方式 window.location.href=`weixin://dl/business/?tousername=${appId}&path=${encodeURIComponent(pagePath)}`; } }, } ``` 这段代码首先试图调用微信内置API `switchTab()` 来平滑过渡到指定的小程序界面;如果遇到异常情况(比如当前环境不支持此类操作),那么就退回到传统的URL Scheme方式进行重定向。这种方式可以有效提升跨平台的一致性体验[^4]。 最后值得注意的是,整个流程的成功执行离不开正确的微信公众账号设置及其关联的小程序授权关系的确立。只有当两者之间建立了合法绑定之后,以上提到的技术手段才能顺利发挥作用[^3]。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值