小工具知识网

当前位置: 首页 > 行业知识 > H5(uniapp)跳转至小程序页面

行业知识

H5(uniapp)跳转至小程序页面

2026-11-04 20:09:09 来源:互联网转载

当前场景:需要在H5页面点击跳转至微信小程序页面

主要参考方法:1、获取接口调用凭据 | 微信开放文档

                         2、获取scheme码 | 微信开放文档

需要解决的主要问题:

在对微信文档中的API接口进行调用的时候,不可避免的会出现跨域的问题,那么就需要在uniapp项目中对跨域进行处理,主要更改manifest.json下的h5进行配置:

    "h5" : {        .....        "devServer": {            "proxy": {//配置代理服务器来解决跨域问题,uniapp不适用CORS方案和设置JSONP方案                "/api/": {//映射域名                    "target": "https://api.weixin.qq.com",                    "pathRewrite": {                        "^/api": ""                    }                }            }        },     ....    }

这样跨域问题就解决了,在请求API时就不需要对请求头进行跨域处理了。

主要步骤:(简单示例)

           export default {   data(){     return{}   },   onLoad() {      this.getToken()   },   methods:{       getToken(){           uni.request({                url: "/api/cgi-bin/token",                method: 'GET',                data: {                     "grant_type": "client_credential",                     "appid": "小程序唯一凭证,即 AppID",                     "secret": "小程序唯一凭证密钥,即 AppSecret"                 },                success: res => {                   console.log(res);                   this.getScheme(res.data. access_token)                }           })       },      getScheme(token){             uni.request({                url: `/api/wxa/generatescheme?access_token=${token}`,                method: 'POST',                data:{                 "jump_wxa":                     {                         "path": "通过 scheme 码进入的小程序页面路径",                         "query": "通过 scheme 码进入小程序时的 query",                         "env_version": "默认值"release"。要打开的小程序版本"                     },                 "is_expire":true,                 "expire_type":1,                 "expire_interval":1                } ,                success: res => {                   ....                   //这里获取到openlink的就是可跳转的路径地址,把它赋值给href即可                }           })      },   }}

上一篇:实用指南,轻松掌握房屋平面图绘制技巧!

下一篇:宝塔面板轻松安装腾讯云SSL证书,详细教程