外部浏览器 H5 跳转小程序 （mpvue 踩坑 云函数）

本文主要是介绍外部浏览器 H5 跳转小程序 （mpvue 踩坑 云函数），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

关于外展推广的那点事
背景 目前的vue公众号项目 有个投放需求 投放位置 在非微信端 为了转化效率 我们使用了 小程序 要在用户购买后 可以直接跳转 小程序 使得用户的流程更加顺畅 但是在 H5 跳转小程序的时候 尤其是在建立云函数的时候 踩了很多坑

期望效果:https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

开发环境 H5 （vue） ； 小程序（mpvue）；

H5 代码如下

// index.html 文件还需要引入一下 云开发文件哦

//<!-- 云开发Web SDK -->
<script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>

<template>
  <div class="page full">
    <div id="public-web-container" class="hidden">
      <p class="">正在打开 “小程序”...</p> <!-- replace -->
      <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading" @click="openWeapp()">
        <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i class="weui-primary-loading__dot"></i></span>
        打开小程序
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "h5Tomimidemo",
  data(){
    return{
      cloudData:null
    }
  },
  mounted() {
    let that = this
      this.docReady(async function() {

          that.cloudData = new cloud.Cloud({
            // 必填，表示是未登录模式
            identityless: true,
            // 资源方 AppID
            resourceAppid: '小程序ID', // <!-- replace -->
            // 资源方环境 ID
            resourceEnv: '云开发环境ID', // <!-- replace 云开发环境ID 所在位置在 微信开发者工具 =》 云开发 =》 设置 =》 环境设置 =》 环境ID  -->
          })
          await that.cloudData.init()  /// 初始化 cloud
          try {
            await that.openWeapp(() => {})   // 自动触发
          } catch (e) {
            throw e
          }
      })
  },
  methods:{

    docReady(fn) {
      if (document.readyState === 'complete' || document.readyState === 'interactive') {
        fn()
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    },


    async openWeapp(onBeforeJump) {
      const res = await this.cloudData.callFunction({
        name: 'public',  //  要调用的云函数 名称
        data: {
          action: 'getUrlScheme',
          pageInfo:{  ///  这是你要跳转的 小程序页面信息
            path:'/pages/FundCalculator/main',
            query:'qqq=123'
          }
        },
      })
      console.warn(res)   /// res 则为返回值
      if (onBeforeJump) {
        onBeforeJump()
      }
      location.href = res.result.openlink  /// openlink 就是生成的 小程序链接
    }
  }
}
</script>

mpvue 小程序代码如下

//  小程序我们 需要在 main.js 文件中 新增
wx.cloud.init({ // 我查的意思是开启 云函数功能 但是不写能不能成 我也不清楚了 感觉和这个关系不大 望读者可以测试一下
  traceUser: true
})

接下来我们去下载 微信提供的云函数 进行导入 下载地址为 https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html

如果找不到下载按钮可以 ctrl + f 搜索 云函数 有个 云函数 public: 点击下载 即可 我们需要的 是
cloudfunctions 这个文件夹 把这个文件夹复制丢到 src 文件

注： 直接下载下来的 是不支持 自定义跳转地址的 如果想实现 动态 小程序地址 把 public/index.js 文件内容修改如下

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
  console.log(event, context,123)
  const wxContext = cloud.getWXContext()

  switch (event.action) {
    case 'getUrlScheme': {
      return getUrlScheme(event)
    }
  }

  return 'action not found'
}

async function getUrlScheme(event) {
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: event.pageInfo && event.pageInfo.path?event.pageInfo.path:'', // <!-- replace -->
      query: event.pageInfo && event.pageInfo.query?event.pageInfo.query:'',
    },
    // 如果想不过期则置为 false，并可以存到数据库
    isExpire: false,
    // 一分钟有效期
    expireTime: parseInt(Date.now() / 1000 + 60),
  })
}

然后配置 云函数列表

//  小程序我们 在 project.config.json 文件中 新增

  "cloudfunctionRoot": "cloudfunctions", // cloudfunctions 这个就是你 刚刚复制的那个文件的文件名
//  和你的appID 同级

然后 你就可以npm run dev 跑一下你的 小程序 需要查看 四个地方 生成的 dist文件
1、是否有 生成了project.config.json
2、是否有 生成了project.config.json 是否包含你设置的 “cloudfunctionRoot” 参数 （大多数情况没有生成此参数）
3、文件名后面是否有当前环境 如果没有请检查第二项
4、cloudfunctions 文件下 public 中的文件内容 和 你刚刚复制的文件内容是否一致 （目前我这边 每次编译完只能生成 其中两个 解决办法就是你手动把你 缺失的文件直接丢进 对应的文件夹就好了）

检查无误 我们便可 上传 这个云函数了
第一步
微信开发者工具 打开云开发 选择=》 云函数 =》 云函数权限 =》自定义安全规则 修改 为以下内容 （目的 放开 public 云函数登录权限 支持未登录访问）

{
  "*": {
    "invoke": "auth != null"
  },
  "public": {
    "invoke": true
  }
}

第二步
右击 public 点击 上传并部署 ：云端安装依赖不上传 node_modules

第三步
微信开发者工具 打开云开发 选择=》 云函数 =》 云函数列表 =》 查看是否有你刚刚上传的函数 函数状态是否为 已部署

这篇关于外部浏览器 H5 跳转小程序 （mpvue 踩坑 云函数）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！