关于外展推广的那点事
背景 目前的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
第三步
微信开发者工具 打开云开发 选择=》 云函数 =》 云函数列表 =》 查看是否有你刚刚上传的函数 函数状态是否为 已部署