微信小程序项目中持续集成方案的实现与前端工程化解析

2024-07-30
来源:网络整理

引言:本文将简单介绍持续集成的概念并指导你一步步在微信小程序项目中完成自己的持续集成解决方案。

什么是前端工程?

所有能降低成本,提高效率的事情统称为工程,在前端项目中,能减少重复劳动,扩展HTML、CSS的语言能力,解决功能复用与变更问题,解决开发与产品环境差异问题,随时随地生成可部署的软件,解决发布流程问题等都是前端工程。

什么是持续集成

持续集成属于前端工程,是团队成员频繁集成工作成果的一种软件开发实践。通常每个成员每天至少集成一次,也就是说每天可能会发生多次集成。集成通过自动化构建(包括自动化编译、自动化测试和自动化发布)来验证项目代码,以尽早发现错误。

如何进行Web项目的持续集成

Web项目的持续集成方案选择比较多,也比较成熟,这里我们介绍-ci持续集成方案。

这种方式的原理是在自己的服务器上安装并注册项目,注册之后会有一个,在服务器上运行之后会轮询并发送http请求,如果有任务,(一般是git push)那么会返回任务信息,然后调用注册时选择的配置文件 .-ci.yml 在项目根目录下执行,执行完之后将结果反馈给 。

此时,我们可以编写一个 .-ci.yml 脚本,比如设置它自动运行测试用例、自动构建代码、自动更新代码到测试人员正在测试的环境,以及任何其他你在提交测试时想要用到的脚本需要做的事情。到时候,自动更新线上代码,完成上线以及上线时你想要做的其他事情。

只要你考虑得足够周全,以后的项目开发只需要push到对应的分支,它就会自动完成你想要做的所有构建、测试、上线操作,减少重复工作就是持续集成的意义所在。

手把手教你完成小程序持续集成解决方案

小程序的持续集成可以继续使用-ci的方式,但是由于小程序的构建、测试、试用版提交都是依赖微信开发者工具的,而微信开发者工具只在Mac上可用,所以我们需要一台服务器来运行-。

1. 准备工作 2. 安装必要软件

在此服务器上安装以下软件

3. 配置 -

首次下载 -

下载后移动到相应路径并重命名为-.exe

打开服务器,进入-.exe所在目录,然后执行以下命令

.\gitlab-runner.exe register

-ci URL

打开需要设置CI的项目,进入页面>CI/CD>>,找到Set up a,输入下面的URL地址:

-ci 用于此

在使用下输入字符串:

-ci 用于此

输入描述

-ci 标签

输入与

只需在此处输入

刷新页面将添加一个新的 -

执行命令

.\gitlab-runner.exe install

执行命令

建筑小程序开发功能与方案_建筑方案设计的常用方法_开发方案设计

.\gitlab-runner.exe start

此时刷新页面,之前的--会更新为下面的状态,表示--配置完成,可以开始工作了。

4.修改服务登录账号

由于-默认的登录账号为\,而这个账号在执行微信开发者工具命令行的时候会报错,所以我们需要将-的登录账号改为正确的账号,并重启服务。

右键点击计算机->管理->服务和应用程序->服务

查找服务

右键->属性->登录->此账户->输入能正确使用微信开发者工具命令行的账户和密码->确定->重启此服务

修改完成后账户将会正确更改

5.配置微信开发者工具

使用微信帐号登录开发者工具

设置 -> 安全 -> 服务端口 -> 启用

6. 配置.-ci.yml

在项目根目录下创建.-ci.yml文件,并填写以下配置。

stages: # 定义阶段用于执行任务
- build
- deploy

build_job: # 定义 build 任务,名称可以随意命名,只是为了方便理解和区分
stage: build # 该任务属于 build 阶段,要严格与stages中定义的命名一致
only:
- master
tags: # tags 指定运行在哪个 Runner 上,这里需要在我们刚注册的 Runner 运行,和注册时的 mp_win7 匹配
- mp_win7
before_script: # 执行script之前的钩子
- whoami
script: # 执行下面脚本,这里可以自定义配置您的构建任务
- echo "build" # 可以在这里执行您项目的构建编译操作

deploy_job: # 定义 deploy 任务,名称可以随意命名,只是为了方便理解和区分
stage: deploy # 该任务属于 deploy 阶段
only:
- master
tags: # tags 指定运行在哪个 Runner 上,这里需要在我们刚注册的 Runner 运行,和注册时的 mp_win7 匹配
- mp_win7
script: # 执行下面脚本,这里可以自定义配置您的部署任务
- C:\software\wechatDevTool\cli.bat -u 0.1.0@"$PWD" --upload-desc 最新的描述 # 这里使用微信开发者工具提供的命令行工具进行上传体验版操作

修改完成后,推送代码到远程仓库,会自动触发CI任务。

此时登录微信小程序官网后台,就可以看到刚刚推送代码时-ci自动上传的试用版本。

.-ci.yml的详细配置方法可以参考如下文章。

7.持续集成项目计划

以下是我近期在做的小程序的持续集成方案,大家可以根据自己的需求进行改进,完成自己的持续集成方案。

由于编写.-ci.yml时需要用到微信开发者工具的命令行,因此我开发了一个node.js脚本,发布为npm模块用于.-ci.yml中的调用,方便团队成员使用虚拟机中的上传命令。

约定团队开发流程,开发新需求时创建/0.5.1(需求版本号)分支,推送代码时自动触发CI任务,虚拟机修改完成后提交试用版本到测试环境。

发送测试报告后,当小程序可以提交审核时,我们需要将 /0.5.1 分支到该分支,这样会自动触发 CI 任务,在虚拟机修改到环境后提交试用版本。该分支需要添加为 分支,不允许直接推送代码。如果审核失败,可以在此基础上新建一个 /0.5.2 分支,进行调整后再进行推送。

当评审通过后,我们需要将分支代码合并到分支中。分支应该始终与线上代码保持同步。

相关信息

本文由360奇舞团WEB前端开发高级工程师韩永刚撰写,作者将内容提供给社区。

学院PHP全栈工程师训练营正式开营,报名即有机会获得一线互联网公司工作机会!

分享