行业知识
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即可 } }) }, }}