关于外展推广的那点事
背景 目前的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" rel="external nofollow" 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 云函数登录权限 支持未登录访问）
第二步
右击 public 点击 上传并部署 ：云端安装依赖不上传 node_modules
第三步
微信开发者工具 打开云开发 选择=》 云函数 =》 云函数列表 =》 查看是否有你刚刚上传的函数 函数状态是否为 已部署