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

主要步骤：(简单示例)

  
       
  


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