小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面

简介: 小程序-uniapp:URL Link / 适用于在移动端 从短信、邮件、微信外网页 等场景打开小程序任意页面

一、背景介绍


小程序URL Scheme、URL Link是微信小程序后台生成的一种地址,适用于从短信、邮件、微信外网页 等场景打开小程序任意页面。所以,适用性极强。可与微信扫码携带参数跳转到小程序指定页面技术互补


若在微信外打开,用户可以在浏览器页面点击进入小程序。每个独立的URL Link被用户访问后,仅此用户可以再次访问并打开对应小程序,其他用户无法再次通过相同URL Link打开该小程序。最长有效期可设置为30天。


c4ed63357282a8903159f6c0c97f7ca3_97ac986f78a44e6a82acdd7f898dedf7.png


二、代码实现


// 这里是前端代码实现了整个逻辑,生产项目应该后端接口封装好,前端调用,传递参数
const getUrlLink = () => {
    uni.request(
      {
        url:`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=appid&secret=secret`,
        method: 'GET',
        success: ((res:any) =>{
          console.log(res)
          uni.request(
            {
              url:'https://api.weixin.qq.com/wxa/generate_urllink?access_token=' + res.data.access_token,
              method: 'POST',
              data: {
                access_token: wx.getStorageSync('token'),
                path: 'pages/XXX/index',
                query: ''
              },
              success: ((res:any) => {
                console.log(res2)
                // 访问微信中间页面,点击进入小程序,携带参数访问微信小程序指定页面
                location.href = res2.data.url_link
              })
            }
          )
        })
      }
    )
}
getUrlLink()


c6705619816e1a2b9e984ee5370270f7_c8ac79b85c304c52b0b6339c072f401d.png


三、官网实例


获取 URL Scheme | 微信开放文档


手机端浏览器访问可测试


https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html


四、参考链接


小程序:微信扫码,携带参数跳转到小程序指定页面_微信小程序扫码进入不同页面_snowball_li的博客-CSDN博客

获取 URL Scheme | 微信开放文档

小程序url link支持多少用户访问? | 微信开放社区

获取URLLink | 微信开放文档

小程序链接生成与使用规则调整公告 | 微信开放社区

如何用URL Scheme H5链接,直接打开微信小程序

查询 URL Link | 微信开放文档


相关文章
|
25天前
|
小程序 前端开发 关系型数据库
基于Uniapp+php校园小程序,校园圈子论坛系统功能,校园跑腿二手交流功能设计
校园圈子论坛及综合服务平台集成了校园跑腿、兼职信息、外卖团购、闲置交换、租赁服务、表白墙等多功能模块,提供一站式校园生活解决方案。系统采用uniapp前端和PHP后端开发,支持多城市、多学校切换,配备分站式后台管理,确保稳定性和安全性。通过融云IM SDK实现即时通讯功能,增强用户互动与粘性。适用于大学校园、城市及社区圈子,满足多样化需求,提升便捷体验。
|
1月前
|
移动开发 小程序 前端开发
超详细攻略!uniapp陪玩系统,打包陪玩小程序、H5需要注意什么?
陪玩系统的打包过程涵盖APP、小程序和H5平台。APP打包需使用uni-app开发工具,配置项目信息并选择云打包;小程序打包需在微信公众平台注册账号并提交审核;H5打包则直接通过uni-app生成文件并上传至服务器。各平台需注意权限配置、代码规范及充分测试,确保应用稳定性和兼容性。
|
28天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
26 0
|
3月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
77 0
在线课堂+工具组件小程序uniapp移动端源码
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
561 3
|
5月前
|
JSON 小程序 前端开发
微信小程序的目录结构及页面结构的说明
本文详细介绍了微信小程序的目录结构、页面组成部分以及项目的全局配置文件,阐述了小程序的宿主环境和运行机制,包括小程序启动和页面渲染的过程。
微信小程序的目录结构及页面结构的说明
|
4月前
|
小程序 API
微信小程序更新提醒uniapp
在小程序开发中,版本更新至关重要。本方案利用 `uni-app` 的 `uni.getUpdateManager()` API 在启动时检测版本更新,提示用户并提供立即更新选项,自动下载更新内容,并在更新完成后重启小程序以应用新版本。适用于微信小程序,确保用户始终使用最新版本。以下是实现步骤: ### 实现步骤 1. **创建更新方法**:在 `App.vue` 中创建 `updateApp` 方法用于检查小程序是否有新版本。 2. **测试**:添加编译模式并选择成功状态进行模拟测试。
95 0
微信小程序更新提醒uniapp
|
4月前
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
78 2
|
5月前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
4月前
|
存储 移动开发 小程序
uniapp富文本editor输入二次扩展兼容微信小程序
uniapp富文本editor输入二次扩展兼容微信小程序
168 0

热门文章

最新文章