背景微信上传代码流程 PR -> 审核通过 -> 切到master分支 -> git pull -> 切到ide -> 点击上传代码 -> 填入备注和版本号 CI PR -> 审核通过 -> CI上传 利用CI后除了一开始的人工提PR和审核后，不需要进行任何操作，并且会给出开始上传和上传完成的通知，解决了之前上传代码流程较长的人工链路，释放自己，不用一直做无意义且无趣的事。 执行过程的效果图如下： [图片] 上传成功后 我们需要去小程序后台提交审核信息。 [图片] 钉钉自定义机器人文档：钉钉webHooks，码云webHook对钉钉的支持，钉钉自定义机器人SDK 需要设置群机器人群设置 -> 智能群助手 -> 添加机器人 -> 自定义机器人 -> 勾选安全设置加签使用access_token和secret完成自定义机器人初始化[图片] 码云WebHooks文档：码云webHooks，码云webHook推送数据格式说明 在URL处填入刚刚的接口，比如https://xxx.com/upload勾选Pull Request，然后点击更新即可，这里需要注意他会发送好几次，比如创建PR发送一次，审核通过发送一次，合并发送一次，所以在接口里需要判断一下只有合并完成的时候才执行后续逻辑（state === 'merged'[图片] 微信小程序准备工作微信官方CI API 密钥：微信公众号 -> 开发 -> 开发设置，下载代码上传密钥，然后在调用CI时设置好privateKeyPath白名单配置：微信公众号 -> 开发 -> 开发设置，配置白名单（必须IP）开发先来个流程图，让大家了解一下接口的逻辑 [图片]判断是否是合并到master（十一后可能要改为main了）值得一提的是目前码云的webHook的推送数据格式是Request Payload，所以我们需要利用koa2-formidable插件对数据进行处理后就能直接使用ctx.request.body获取数据了 router.post('/api/upload', async ctx => { const body = ctx.request.body // 合并状态并且合到master才会自动上传到后台 if (body.state === 'merged' && body.target_branch === 'master') { ... } } 钉钉初始化const Robot = require("dingtalk-robot-sdk") const robot = new Robot({ accessToken: config.robotAccessToken, secret: config.robotSecret }); const text = new Robot.Text('开始上传') robot.send(text) 是否存在项目const xcxPath = path.join(process.cwd(), config[type].publicProject) // 判断是否存在xcx项目文件夹，没有就去clone，有就pull最新代码 if (fs.existsSync(xcxPath)) { child_process.execSync('git pull', { cwd: xcxPath }) } else { child_process.execSync(`git clone ${config[type].git}`, { cwd: path.join(process.cwd(), config.publicRoot) }) } 项目初始化和上传// 创建项目对象 const project = new ci.Project({ appid: config.wx.appid, type: 'miniProgram', projectPath: publicProject, privateKeyPath: path.join(process.cwd(), config.publicRoot, '../wx.key'), // wx.key为小程序appSecret ignores: ['node_modules/**/*'], }) const year = new Date().getFullYear() - 2000 let month = new Date().getMonth() + 1 const day = new Date().getDate() // 根据年月日当版本号 const version = '2.5.' + year + (month < 10 ? '0' + month : month) + (day < 10 ? '0' + day : day); // 上传 const previewResult = await ci.upload({ project, version, desc: body.title, setting: { es6: true, minify: true, autoPrefixWXSS: true, minifyWXML: true, minifyWXSS: true, minifyJS: true } }) 钉钉通知完成const markdown = new Robot.Markdown() .setTitle('上传完成！！！！') .add(`### [上传完成](https://mp.weixin.qq.com)\n`) .add(`1. version：${version}`) .add(`2. size：${fullSize}`) .add(`3. ${JSON.stringify(previewResult)}`) robot.send(markdown) 支付宝小程序准备工作文档：支付宝官方CLI文档，支付宝官方SDK文档 开发其余逻辑均与上面的微信小程序开发一致，只有项目初始化和上传是不一致的，所以这里我们只说一下项目初始化和上传 项目初始化使用alipaydev key create -w 生成的私钥和工具id完成项目初始化 // 初始化项目 alipaydev.setConfig({ toolId: config.ali.toolId, privateKey: config.ali.privateKey, }) 上传version不传的话默认线上包版本自增0.0.1，所以我们不需要传version const uploadResult = await alipaydev.miniUpload({ appId: config.ali.appid, clientType: 'alipay', project: publicProject, experience: true // 设置体验版（不是主账户，所以其实目前没用） })

当我们需要自定义底部导航栏时   首先要解决iphoneX的底部大横条对这个兼容   通常不设置兼容  都会被挡住 如何编写 在你要编写的底部菜单中插入   样式 [代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码])   即可兼容 [代码] [代码] 例如：css中插入[代码] [代码]@supports ([代码][代码]bottom[代码][代码]: constant(safe-area-inset-[代码][代码]bottom[代码][代码])) or ([代码][代码]bottom[代码][代码]: env(safe-area-inset-[代码][代码]bottom[代码][代码])) {[代码][代码]    [代码][代码].fixed-wrap {[代码][代码]        [代码][代码]height[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码]        [代码][代码]width[代码][代码]: [代码][代码]100%[代码][代码];[代码][代码]    [代码][代码]}[代码] [代码]    [代码][代码].fixed-pay {[代码][代码]        [代码][代码]padding-bottom[代码][代码]: calc(env(safe-area-inset-[代码][代码]bottom[代码][代码]) / [代码][代码]2[代码][代码]);[代码][代码]    [代码][代码]}[代码] [代码]}[代码]其中       [代码]env(safe-area-inset-[代码][代码]bottom[代码][代码])  是计算兼容的高度   通常一半即可   [代码]         calc  是计算css   你也可以加入高度  假设有第二层 底部固定栏【即底部导航栏上面还有一层固定栏】  可如下编写   view.footer {     bottom: calc(100rpx + env(safe-area-inset-bottom)); } 这样轻轻松松解决兼容  不需要写js代码 <-------------大横条-------------> [图片]