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

当前场景:需要在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时就不需要对请求头进行跨域处理了。

主要步骤:(简单示例)

<template>
  <view>
       <uni-link href="weiwx:xxxxxxxxx" text="跳转至小程序"></uni-link>
  </view>
</template>


<script>
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即可
                }
           })
      },
   }
}
</script>

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值