H5（uniapp）跳转至小程序页面-Toy模板网

这篇具有很好参考价值的文章主要介绍了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时就不需要对请求头进行跨域处理了。

主要步骤：(简单示例)文章来源地址https://www.toymoban.com/news/detail-756880.html

<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>

到了这里，关于H5（uniapp）跳转至小程序页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！