uniapp 前端获取微信小程序 URL Link (HTTPS调用)

news2024/11/20 16:25:59

前端基于 uniapp 获取微信小程序 URL Link 短链,适用于短信、邮件、网页、微信内等拉起小程序的业务场景。目前仅针对国内非个人主体的小程序开放。

前言:微信小程序此前可以在小程序管理后台-工具 中直接快捷生成小程序指定页面的 https 短链,后微信官方更新后弃用了该方式采用调用官方获取小程序短链的API获取且自 2022 年 4 月 11 日起,URL Link有效期最长 30 天,不再支持永久有效的URL Link、不再区分短期有效URL Link与长期有效URL Link。(详情见官方文档)

注:微信官方文档提醒获取小程序 URL Link 的接口应该在服务器端调用,本文主要是记录前端自行生成小程序指定页面 https 短链的方法。(微信官方文档-获取URL Link:urllink.generate )

本文示例使用 HTTPS 调用方式,并封装了将小程序指定页面直接转换为 https 短链的方法。

准备:首先你需要准备好该小程序的 AppID(小程序ID) 和 AppSecret(小程序密钥) 。这是生成 access_token 所必须的。(获取路径:登录微信小程序管理后台-开发管理-开发设置)

已将获取小程序指定页面 https 短链的核心业务封装为 getAppLink() 方法,可直接复制使用,注意该方法发起网络请求的方式是 uni.request() ,该方法中的 appidsecret 需填充你小程序的相关数据。核心代码如下:

getAppLink(params) {
        // AppID(小程序ID)
        const appid = ''
        // AppSecret(小程序密钥)
        const secret = ''
        // 先发起请求获取凭证
        uni.request({
          url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appid}&secret=${secret}`,
          method: 'GET',
          success(res) {
            console.log('获取凭证', res);
            // 再发起请求获取url
            uni.request({
              url: `https://api.weixin.qq.com/wxa/generate_urllink?access_token=${res.data.access_token}`,
              method: 'POST',
              data: {
                ...params
              },
              success(result) {
                console.log('生成网址:', result.data);
                return result.data.url_link
              }
            })
          }
        })
      },

调用示例:

        let params = {
          // path:要跳转到的小程序的目标页面纯路径(不要拼接参数)
          // 注意:如果该链接要打开的版本是正式版,则这个path一定要已经发布到了正式版,不然无法访问到该页面则链接无法生成成功
          path: '/pages/index',
          query: "id=1&type=2", // 短链的入参
          env_version: "release", // 正式版
          expire_type: 1, 
          expire_interval: 30,
        }
        const url = await this.getAppLink(params)
        console.log('返回的url:', url);

注:调用时需要传递一个 params 的参数对象,该对象涉及参数见下图: 

:上图出处-微信官方文档 

上图参数说明见-小程序链接生成与使用规则调整公告

生成的链接形如:https://wxaurl.cn/pFawq35qbfd

生成短链成功后可使用 微信开发者工具 编译查看效果

 最后温馨提示:前端使用此方法生成所需的 https 短链后如果要将测试版提交审核,请先将 getAppLink() 方法中使用到的小程序的 AppID(小程序ID) 和 AppSecret(小程序密钥) 删除/清空(特别是 AppSecret),否则它会影响到代码审核,会告知存在安全风险无法审核通过!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408864.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

chrome插件-Web开发者助手 FeHelper

FeHelper是一个非常好用的插件,支持Chrome、Firefox、MS-Edge浏览器,工具集包括 JSON自动/手动格式化、JSON内容比对、代码美化与压缩、信息编解码转换、二维码生成与解码、图片Base64编解码转换、Markdown、 网页油猴、网页取色器、脑图(Xmind)等贴心工…

使用el-upload组件实现递归多文件上传

一、需求描述:在页面上点击按钮弹出选择电脑文件的界面,可以一次性选择多个文件一起上传到服务器上,并把上传成功的文件展示在页面上。 二、问题阐述:el-upload是支持多文件上传的,但是是同步进行的,你点击…

Three.js学习五——让模型沿着轨迹移动

目录流程搭建场景环境添加模型增加运动轨迹让模型沿轨迹运动完整代码和效果流程 基本流程 1、添加模型 2、增加运动轨迹 3、让模型沿轨迹运动 工程文件结构如下图: static:存放静态资源文件 three.js-master:为官网下载的代码包,…

Edge DEV 侧边栏没有Chat的解决办法。

最近陆陆续续又有很多人通过了new bing 的申请,体验时又发现了自己的侧边栏的bing没有chat,现在解决这个问题有一个比较成熟的方案。一.安装mitmproxyWindowsWindows安装建议用官方提供的客户端访问mitmproxy官方网址点击访问mitmproxy - an interactive…

持久化 pinia 状态

pinia的状态与vuex一样把数据存在内存中,在刷新页面后会清理内存,数据会丢失。 要解决这个问题非常简单,在状态改变时将其同步到浏览器的存储中,如 cookie、localStorage、sessionStorage 。 可以搭配 pinia-persistedstate-plu…

uniapp中table表格设置宽度无效的原因及解决办法

table表格设置标题无效解决办法及原因探索 此属性并不只限于uniapp同时适用于普通表格设置文章目录table表格设置标题无效解决办法及原因探索前言一、示例二、原因三、拓展总结前言 本篇文章讲解了,实际开发中发现表格设置的宽度没有生效,无论是设置行…

css元素定位:通过元素的标签或者元素的id、class属性定位

前言 大部分人在使用selenium定位元素时,用的是xpath元素定位方式,因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观,更好理解一些。 css元素定位方式往往被忽略掉了,其实css元素定位方式也有它的价值&…

微信公众号获取openId——开发阶段

1、注册测试号 微信公众平台 2、理解获取逻辑 获得微信的openid,需要先访问微信提供的一个网址来获取code。 再访问微信提供的另一网址从而获取openId。 两个链接分别为: https://open.weixin.qq.com/connect/oauth2/authorize?appidAPPID&redire…

JavaScript 基础语法

✏️作者:银河罐头 📋系列专栏:JavaEE 🌲“种一棵树最好的时间是十年前,其次是现在” 目录JavaScript 的组成第一个程序JavaScript 的书写形式:注释输出JS 变量理解动态类型基本数据类型运算符数组创建数组访问数组元素…

前端跨域问题的解决方案Access to XMLHttpRequest at ‘http..’ from origin ‘null‘ has been blocked by CORS policy

前言: 在前端发出Ajax请求的时候,有时候会产生跨域问题,报错如下: Access to XMLHttpRequest at http://127.0.0.1/api/post from origin null has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the…

06_HTML_表单提交的细节(submit提交按钮的使用细节)

目录一、submit提交按钮的细节二、关于输入类型(input标签)type属性中file类型(文件上传)和submit类型(提交按钮)的关系三、关于输入类型(input标签)type属性中hidden类型(隐藏域)和submit类型(提交按钮)的关系一、submit提交按钮的细节 form标签是表单标签action属性设置提交…

【js】多分支语句练习(2)

个人名片: 😊作者简介:一名大一在校生,web前端开发专业 🤡 个人主页:python学不会123 🐼座右铭:懒惰受到的惩罚不仅仅是自己的失败,还有别人的成功。 🎅**学习…

媒体查询@media

media可以针对不同的媒体类型(包括显示器、便携设备、电视机,等等)设置不同的样式规则,CSS3 根据设置自适应显示。 1.使用方法: media 多媒体类型 and (条件) and (条件)... ①多媒体类型: all用于所有多媒体类型设备 print用于打印机 screen用于电脑…

2022前端笔试面试题

目录 以下为笔试题部分: 1.CSS盒子模型的构成是__,__,__,__. 2.二叉树的中序遍历顺序是badce,后续遍历顺序是bdeca,问前序遍历的顺序。 3.flex布局的父级元素中有哪些常用属性。 4.box-sizing:____;表示怪异盒模型(IE盒模型)…

JavaScript基础知识总结 14:学习JavaScript中的File API、Streams API、Web Cryptography API

目录一、Atomics和SharedArrayBuffer二、原子操作基础1、算术及位操作方法2、原子读和写3、原子交换4、原子Futex操作与加锁三、跨上下文消息四、Encoding API五、File API和Blob API1、File类型2、FileReader类型3、FileReaderSync类型4、Blob与部分读取六、Streams API1、应用…

uniapp和vue组件之间的传值方法(父子传值,兄弟传值,跨级传值,vuex)

前言 在做vue项目或者uniapp开发微信小程序时,经常会用到组件之间传值,因此想总结记录下。 一、父子传值 父向子传递:props子向父传递:通过 events($emit)父组件想调用子组件的方法:通过 thi…

Get请求报错404出现原因及解决办法

ajax中get请求时报404背景环境项目结构问题成因解决办法1解决办法2背景环境 已学习java基础,html,css,js,jquery,bootstrap,layui,maven,servlet和jsp,刚进入spring的学…

前端下载文件的几种方式

前端下载文件的几种方式 前言 实习一个人负责一个管理系统的前端部分。其中,就有前端下载文件的需要。最终采用的是使用axios发送get请求的方式,因为需要携带token。但是,不应该只注重结果,也应该注重过程,不然可能一…

jQuery选择器(二)(基本过滤器,内容过滤器,可见过滤器)

写在前面 jQuery是一个快速、简洁的 JavaScript 框架,是继Prototype之后又一个优秀的 JavaScript 代码库。jQuery的设计宗旨是“WriteLess,DoMore”,即倡导写更少的代码,做 更多的事情。jQuery封装了 JavaScript 常用的功能代码&…

【Vue】具名插槽

要点: 具名插槽:即具有名字的插槽,在默认插槽基础上指定插槽的名字(name " ")。父组件指明放入子组件的哪个插槽 slot "footer",如果是template可以写成 v-slot : footer。 父组件中…