关于外展推广的那点事
背景 目前的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

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