评论

【实战记录】短信跳小程序

h5跳小程序的一次实践

需求背景:

产品同学希望我们做美团这种短信跳小程序的功能,如下图所示,需求描述这里就不多介绍了,大家应该都能明白了。

需求分析:

咋一看这需求好像跟前端同学没啥关系,但我们后端同学反馈,可以接口去生成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/"加了进去,就好了,最终也完成了短信跳小程序。

最后一次编辑于  2022-12-30  
点赞 1
收藏
评论

1 个评论

登录 后发表内容