详解使用 taro-deploy 自动化构建发布 taro 小程序为什么要用 taro-deploy?适合我用吗?怎么用?FAQ

相关学习推荐:微信小程序教程

如果你使用 taro 开发小程序项目,推荐你使用 taro-deploy 高效地进行一键自动化构建发布。

为什么要用 taro-deploy?

Taro 小程序开发者常有这种痛点:开发好代码想要发布提测,需要进行以下一系列步骤(以支付宝、微信小程序平台为例):

整个流程将近十分钟,其中还有不少需要手动操作的环节,可以说这种原始的发布方式效率非常低。

taro-deploy 就是为了解决这个痛点出现的,它集成了支付宝和微信提供的命令行工具,自动化地完成上述流程。

用了 taro-deploy,开发者在发布提测时只需两步:

  1. 运行一次命令 taro-deploy
  2. 去喝杯茶歇一下

构建发布完了,钉钉上就会收到构建结果的推送了,全程无需人工干预。

以下为钉钉推送消息的截图。

可以看到除了发布生成的小程序二维码,推送消息里还附带了构建机器、构建分支、项目最近的 git commit 日志等,打包信息更清楚。

NOTE: git commit 日志目前只会展示 featfix 关键词开头的 commit

适合我用吗?

如果你

  1. 使用 Taro 框架开发小程序
  2. 需要支持微信和支付宝平台
  3. 想要自动化构建发布,不想手动操作
  4. 使用钉钉办公,开发和测试都在一个钉钉群里(这点不是必需的,没有钉钉也可以使用 taro-deploy,只是会多了一些手动操作)

那你就非常适合使用 taro-deploy 了。

怎么用?

Step 1 - 安装

npm i -g taro-deploy复制代码

Step 2 - 平台相关的准备步骤

  1. 支付宝:参考官方文档,准备好私钥和 toolId。
  2. 微信:参考官方文档,准备好私钥

Step 3 - 创建钉钉机器人

参考官方文档创建钉钉机器人,安全设置记得选择“自定义关键词”并填上“小程序构建”即可。

创建完成后,会得到一个形如 https://oapi.dingtalk.com/robot/send?access_token=XXXXXX 的 webhook url,后续会用到。

Step 4 - 准备配置文件

在你的 Taro 项目根目录新建一个 deploy-config.js 文件,按下述模版填入内容。

这里需要配置的内容比较关键也比较多,成败在此一举了

// deploy-config.js// 该文件应放在 Taro 项目的根目录下module.exports = {  // 构建结果的输出目录,该脚本产生的日志也会输出到这里
  outDir: './deploy-out',  // 微信相关配置
  weapp: {    // 如果为 false,则不会运行微信的构建流程
    enable: true,    // 这里填你们配置的 Taro 编译后微信程序包的输出路径
    projectPath: './dist/weapp',    // Step 2 里获得的私钥文件的存放路径
    keyPath: './weapp.key',    // 微信小程序 appId
    appId: 'wx82xxxxxx',    // 微信体验版图片地址
    // 与支付宝不同,不管上传多少个新版本,微信的体验版地址是一直不变的
    // 因此需要在这里配置该二维码图片的链接
    // 直接从微信公众平台上复制的体验版图片地址貌似无法在钉钉里正常展示
    // 建议转存到自己的 CDN 上,再将 cdn url 填到下面这里来
    qrcodeImageUrl: 'https://xxxcdn.con/image/weapp-exp-qrcode.jpg',    // 小程序版本号
    // 由于微信的命令行 sdk 不支持设置某个版本为体验版,要改设体验版需要在网页上手动操作
    // 所以只能曲线救国,先在网页上将本工具上传的版本设为体验版(找到 ci机器人1 上传的那个版本)
    // 然后每次上传都指定同一个版本号,以覆盖旧的版本,最终实现发布新体验版的效果
    version: '1.1.0',    // true 则将跳过编译阶段,即 taro build 命令,
    skipBuild: false,
  },  // 支付宝相关配置
  alipay: {    // 如果为 false,则不会运行支付宝的构建流程
    enable: true,    // 这里填你们配置的 Taro 编译后支付宝程序包的输出路径
    projectPath: './dist/alipay',    // Step 2 里获得的私钥文件的存放路径
    keyPath: './alipay.key',    // Step 2 里获得的 toolId
    toolId: 'f48xxx',    // 支付宝小程序 appId
    appId: '202xxx',    // true 则将跳过 taro build 命令,即编译阶段
    skipBuild: false,
  },  // 默认发体验版,填 false 则发布为预览版
  // 注意如果发布为预览版,需要实现 uploadImage 的函数,否则钉钉无法展示预览版的二维码
  isExperience: true,  // 是否在构建前运行 npm install
  npmInstall: false,  // 指定环境变量,会在编译阶段,即 taro build 的指令中注入指定的环境变量
  env: {    BUILD_ENV: 'test' // 仅作 demo,实际应填入你项目编译需要用的环境变量
  },  // Step 3 中获取的钉钉机器人 webhook url
  dingTalkUrl: 'https://oapi.dingtalk.com/robot/send?access_token=xxx',  // 如果你只需要构建发布体验版小程序,则可忽略以下函数
  // 如果你需要构建发布预览版小程序,则需要实现该函数,将本地二维码图片文件转换为图片链接,否则无法将预览版二维码推送到钉钉群里
  // 其中 objectName 形如 {platform}-{timestamp}.jpg,作为建议保存的文件名
  // filePath 为本地预览版二维码图片的路径
  uploadImage: async function(objectName, filePath) {    return ''
    // 如果你使用阿里云 oss 作 cdn,可以参考以下代码进行上传
    // const OSS = require('ali-oss')
    // const client = new OSS({
    //   region: 'oss-cn-xxx',
    //   accessKeyId: 'xxx',
    //   accessKeySecret: 'xxx',
    //   bucket: 'xxx',
    // })
    // await client.put(`preview/${objectName}`, filePath, {
    //   'Cache-Control': 'max-age=31536000'
    // })
    // return `https://xxx-oss-cdn.com/preview/${objectName}`
  }
}复制代码

Step 5 - 运行 taro-deploy

# cd 到你们的项目并运行taro-deploy复制代码

然后就可以静候钉钉机器人推送构建结果了

FAQ

Q: 我们没有用钉钉办公,怎么用 taro-deploy?

A: taro-deploy 目前只支持推送钉钉消息,否则只能完成自动化构建、上传、设置体验版,没法完成最后的推送步骤。如果有推送其它IM工具的需求,可以尝试自行实现,也欢迎提交 PR。

Q: 为什么发布预览版要实现 uploadImage 函数这么麻烦?

A: 因为支付宝和微信的预览版只会生成本地的二维码图片,要想在钉钉消息里展示本地的二维码图片,只能先将图片上传到 cdn,再将 cdn 链接填进钉钉消息模版里。

Q: 为什么发布以后,微信体验版还是旧的?

A: 请到微信的网页控制台上检查确保已将「ci机器人1」上传的版本设置为体验版。

Q: 只支持微信和支付宝吗?

A: Taro 支持很多平台,但是 taro-deploy 目前只支持了微信和支付宝两个平台的自动构建和发布。

Q: 没有找到 ci机器人1 上传的版本?

A: 先跑一遍 taro-deploy,等上传完成以后,就可以在微信小程序控制台网页的「版本控制」菜单里找到。

Q: 这个工具如果出 bug 了,会造成小程序的线上故障吗?

A: taro-deploy 目前只支持发布预览版和体验版,不支持发布生产版,不会影响到生产环境。

Q: 我想定制钉钉推送消息的内容

A: 目前没有开放很灵活的钉钉消息模版配置,如有需要可以 fork 本项目并定制修改 send-ding.js 文件,也欢迎提交 PR。


以上就是详解使用 taro-deploy 自动化构建发布 taro 小程序的详细内容,更多请关注编程之家其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


概述 消息能力是小程序能力中的重要组成,我们为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。 订阅消息推送位置:服务通知 订阅消息下发条件:用户自主订阅 订阅消息卡片跳转能力:点击查看详情可提爱转至该小程序的页面 消息类型 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后,后续服务
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.n
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}&quot
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器: let ua = navigator.userAgent.toLowerCase(); let isWeixin = ua.indexOf('micromessenge
微信小程序获取data-xx=""属性的值,自定义属性设置和获取(data-) 微信小程序<view class="details-btn" data-taskId="111" bindtap='taskdetails&#39
小程序报错:TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0(或者当前的) -> 2.14.1 解决问题
H5跳转微信小程序-成功案例(VUE)(踩坑无数) TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点: 1、已认证的服务号 2、绑定JS接口安全域名 (在微信公众平台设置) 3、IP白名单 (在微信公众平台设置) 4、将小程序和H5公众号进
微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解,需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也
情景1.拉取公司代码演示: 因为github有墙,这里我们以gitee(码云)为例作为演示 (其实就是国产github,也非常好用~) 步骤一:打开Git界面 先在一个空文件夹右击Git Bash Here,打开git界面 步骤二:输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
如何开发微信小程序? 作为一名10多年一直从事互联网平台开发的从业者,我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤, 老张带您捋一捋整个环节,小白用户可以收藏了。 好了废话不多说,开始! 一、开发前小程序需要准备的资料 我们在开发微信小程序前,需要准备下相关资料。这个资料主要是后
原生小程序开发优化方案 为了更好的制定优化方案,我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同,依然是浏览器内核,而不是原生客户端。 而对于传统的网页来说,UI 渲染和 JS 脚本是在同一个线程中
1,不要下两倍尺寸的图片, 小程序本身自己就会对元素缩小两倍,设计图片的一杯就已经很清晰了。 2,图片压缩,(主要是压缩静态资源,ps 可以压缩,然后有一些在线压缩工具,保持600-800kb 的静态) 3,通用的代码组件化 4,是在工程量太大可以分包,分包现在最大支持20m(一般都不会去分包的)
文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT,上线两个月就已经超过一亿用户,成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈,引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛,虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现?它到底会不会取代搜索引擎?90%的人真的会因为ChatG
文章浏览阅读193次。8. 导航和路由管理:掌握小程序的导航方式,如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等,学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构:了解小程序的定义、特点以及与传统APP的区别,掌握小程序的运行环境、组件和API等基本概念。10. 支付功能:学习小程序的支付方式,如微信支付、支付宝支付等,了解支付流程和注意事项,学会实现小程序的支付功能。9. 用户授权和登录:了解小程序的用户授权机制,如获取用户信息、调用微信API等,学会实现用户的登录和注册功能。_微信小程序开发知识点总结
文章浏览阅读4.8k次,点赞7次,收藏18次。一、准备工作1. 安装微信开发者工具,并登录微信小程序账号;2. 准备斗地主游戏的图片资源;3. 准备斗地主游戏的音效资源;二、创建小程序1. 打开微信开发者工具,点击“新建小程序”,输入小程序名称,选择小程序的项目目录,点击“创建”;2. 在小程序的项目目录中,新建文件夹“images”,将准备好的斗地主游戏的图片资源放入“images”文件夹中;3. 在小程序的项目目录中,新建文件夹“sounds”,将准备好的斗地主游戏的音效资源放入“sounds”文件夹中;三、编写代码1. 在小程_扑克牌微信小程序代码
文章浏览阅读3.9k次,点赞3次,收藏7次。一、准备工作:1. 安装微信开发者工具,创建小程序项目;2. 准备游戏角色图片;3. 准备游戏背景音乐;二、实现步骤:1. 创建游戏页面,添加游戏角色图片,添加游戏背景音乐;2. 创建游戏角色类,定义游戏角色属性,如角色名称、角色图片、角色能力等;3. 创建游戏类,定义游戏属性,如游戏人数、游戏角色、游戏规则等;4. 创建游戏控制类,定义游戏流程,如游戏开始、游戏结束、游戏角色分配等;5. 创建游戏界面,实现游戏流程,如游戏开始、游戏结束、游戏角色分配等;6. 创建游戏结果页面,显示游戏_微信小程序游戏代码
文章浏览阅读1.7k次。1. 创建小程序项目:使用微信开发者工具创建一个小程序项目,并在项目中添加一个页面,用于模拟聊天。 2. 定义数据结构:定义一个数据结构,用于存储聊天记录,包括发送者、接收者、消息内容等信息。 3. 实现聊天功能:实现聊天功能,包括发送消息、接收消息、显示消息等功能。 4. 实现界面:使用微信小程序的界面框架,实现聊天界面,包括聊天记录列表、输入框等。代码示例:// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
文章浏览阅读2.1k次。1、创建小程序项目:使用微信开发者工具,新建一个小程序项目,输入项目名称,选择项目目录,点击“创建”按钮,即可创建小程序项目。2、添加页面:在小程序项目中,可以添加多个页面,每个页面都有自己的页面文件,比如首页、分类页、购物车页、我的页面等。3、添加组件:在小程序项目中,可以添加多个组件,比如商品列表组件、购物车组件、订单组件等,用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口:在小程序项目中,可以添加多个接口,用于获取商品信息、购物车信息、订单信息等,以便在页面中显示。5、_微信开发者工具做一个我的商城