手把手教你搭建小程序持续集成环境【初级篇】

456 阅读2分钟

一.准备Jenkins环境

1.下载Jenkins war包:https://www.jenkins.io/download/

2.运行java -jar jenkins.war即可。

二.安装Jenkins插件

1.在线安装方法:系统管理-插件管理-可选插件,搜索后相应插件在线安装,你需要安装的插件列表如下:

    Blue Ocean    
    Multiple SCMs plugin
    Git
    ...
    

image.png

2.如果在线安装失败,可采用离线安装 updates.jenkins.io/download/pl… 搜索下载插件[Blue Ocean、Multiple SCMs、Git]到本地

image.png 通过本地上传的方式进行安装

三.创建流水线Job

image.png

1.进入配置页面

image.png

2.在你的打包机上安装miniprogram-ci,后边上传会用到。

 //打包机需要全局安装node环境哦
 sudo npm install miniprogram-ci -g
 //miniprogram-ci 使用说明:https://www.npmjs.com/package/miniprogram-ci
 

3.编写流水线脚本

 pipeline {
    agent any
    parameters {
        string(
            description: '打包版本号',
            name: 'appversion',
            defaultValue: '',
        )
        string(
            description: '版本描述',
            name: 'appdesc',
            defaultValue: '正常迭代',
        )
        string(
            description: '小程序项目giturl',
            name: 'giturl',
            defaultValue: 'https://github.com/wechat-miniprogram/miniprogram-demo.git',
        )
        string(
            description: '小程序项目分支',
            name: 'miniprogramBranch',
            defaultValue: 'master',
        )
        string(
            description: '机器人编号',
            name: 'robot',
            defaultValue: '30',
        )
        string(
            description: 'buildman',
            name: 'buildman',
            defaultValue: 'daojia',
        )
    }
    environment {
        miniAppWorkSpace = "mini-code"
        credentialsId = "xxx"
        buildTime = new Date().format('yyyyMMddHHmmss')
    }
    stages {
        stage('清理空间'){
            steps{
                sh 'rm -fr ${miniAppWorkSpace}'
            }
        }
        stage('拉取代码'){
            steps{
                echo '拉取小程序代码'
                checkout([$class: 'GitSCM', branches: [[name: "$miniprogramBranch"]], doGenerateSubmoduleConfigurations: false, extensions: [[$class: 'WipeWorkspace'], [$class: 'RelativeTargetDirectory', relativeTargetDir: "${miniAppWorkSpace}"]], submoduleCfg: [], userRemoteConfigs: [[credentialsId: "${credentialsId}", url: "$giturl"]]])
                dir("${miniAppWorkSpace}/miniprogram"){
                    sh 'npm i'
                }
                
            }
        }
        stage('压缩'){
            steps{
                dir("${miniAppWorkSpace}/miniprogram"){
                    sh 'echo "在此步骤可以进行代码压缩 或者 执行其他任务,不需要的话删除此stage"'
                    sh 'echo "wxa 来自东哥的兄弟, 安装方法npm install -g @legos/wxa-cli --registry=http://registry.m.jd.com " '
                    sh 'echo "在小程序的根目录执行 djwxa build -r 可以对小程序进行压缩, 生成 wxa-build " '
                    sh 'wxa build -r'
                    sh 'rm -fr wxa-build-build.log'
                }
            }
        }
        stage('上传dev') {
            steps {
                    sh 'rm -fr output'
                    sh 'mkdir -p output'
                    sh '''
                    miniprogram-ci \
                      pack-npm \
                      --pp "$WORKSPACE/${miniAppWorkSpace}/miniprogram" \
                      --pkp "/export/rsa/private.xxx.key" \
                      --appid "xxx" \
                    '''
                    sh """
                    miniprogram-ci \
                      preview \
                      --pp "$WORKSPACE/${miniAppWorkSpace}/miniprogram" \
                      --pkp "/export/rsa/private.xxx.key" \
                      --appid "xxx" \
                      --uv "${appversion}.${buildTime}" \
                      --robot "${robot}" \
                      --enable-es6 true \
                      --qrcode-format image \
                      --qrcode-output-dest "$WORKSPACE/output/preview.jpg" \
                    """
                    archiveArtifacts artifacts: 'output/preview.jpg', followSymlinks: false
            }
        }
       
        stage('通知'){
            steps{
                sh 'echo "我们项目通过企业微信发送 构建消息,其他通知方式可以自行修改"'
                sh """
                curl 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=xxx' \
                -H 'Content-Type: application/json' \
                -d '
                {
                    "msgtype": "markdown",
                        "markdown": {
                        "content": "【开发版】ci机器人${robot}构建完成~注意回归哦~\n>\n> 当前版本:${appversion}.${buildTime}\n>\n>版本描述:${appdesc}\n>\n>构建分支:${miniprogramBranch}\n>\n>构建结果:[二维码](${JENKINS_URL}/job/${JOB_NAME}/lastBuild/artifact/output/preview.jpg)\n>\n>构建日志:[日志](${JENKINS_URL}/blue/organizations/jenkins/${JOB_NAME}/activity)"
                    }
                } '
                """
            }
        }
    }
}


注意:以上xxx的部分需要修改成自己配置

四.构建测试

image.png

image.png

通过二维码 或者 小程序助手访问开发版

image.png

五.总结

怎么样?是不是很简单。赶快去试试吧,这个流水线适合中小型项目。

但是...

如果你的小程序项目由【多个团队】,【多个项目】,【不同的框架 原生 uni-app taro 】,【维护不同的分包】,那么集成一个完整的小程序就比较头疼了。

后面我会整理一个进阶篇解决以上问题.