需求背景:
产品同学希望我们做美团这种短信跳小程序的功能,如下图所示,需求描述这里就不多介绍了,大家应该都能明白了。
需求分析:
咋一看这需求好像跟前端同学没啥关系,但我们后端同学反馈,可以接口去生成scheme码,但腾讯云的短信模版不可以设置动态连接,又因为scheme码有限制只能一个用户访问。综上所述,后端同学搞不定了,谁让咱们是一个团队呢,于是,前端开始接锅,经调研,采用h5跳小程序的方案,文档请参考https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html
具体实现:(uniapp项目)
1、开通云开发,开通静态网站,新建云函数
2、将官方示例中的jump-mp.html上传到云端
3、开始配置uniapp项目
App.vue
onLaunch: function (options) {
wx.cloud.init({
// env 参数说明:
// env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源
// 此处请填入环境 ID, 环境 ID 可打开云控制台查看
// 如不填则使用默认环境(第一个创建的环境)
//env: '你的环境ID',
env: '***',
traceUser: true,
})
}
在项目的跟目录下新建cloudfunctions,然后将示例中的public文件复制到cloudfunctions
vue.config.js
const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: path.join(__dirname, 'cloudfunctions'),
to: path.join(__dirname, 'dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'cloudfunctions')
}
]),
]
}
manifest.json
"mp-weixin": {
"cloudfunctionRoot": "cloudfunctions/",
}
都配置完以后,发现cloudfunctions文件上面并没有小云朵的图标,也就是说,并没有配置成功,于是就开始找原因,先是发现uniapp打包之后
的文件怎么没有project.config.json了,找到开发者工具,选择”小程序模式“,它出来了,但是一搜索,并没有cloudfunctionRoot,我吐了,
于是手动把 "cloudfunctionRoot": "cloudfunctions/"加了进去,就好了,最终也完成了短信跳小程序。
唉 收费收费 各种收费