uni-app微信小程序实践CI/CD&Jenkins

案例项目为HBuilderX软件直接创建的小程序项目。

思路

通过浏览uni-app官方文档、小程序开发官方文档得出以下四个步骤：

1. 前置条件项目代码从HBuilderX创建转化为vuecli创建，并配置区分环境代码；
2. 小程序平台中配置开发管理>小程序代码上传>白名单，下载秘钥；
3. jekins配置界面中可选择对应分支或Tag，拉取代码；
4. Shell脚本通过miniprogram-ci完成预览、上传功能；

如何将HBuilderX创建的项目转化为vuecli创建？

1. 全局安装依赖

npm install -g @vue/cli

1. 命令创建项目

vue create -p dcloudio/uni-preset-vue project_demo //选择默认uni-app模板即可

生成目录如下图所示：

1. 复制已有项目到src目录，去除unpackage、node_modules等目录

2. 复制项目中使用到的依赖到project_demo目录下的package.json中，并安装依赖

3. 执行框架默认命令npm run build:mp-weixin验证项目代码时，可能会抛出以下异常

以上问题可以将以下依赖固定解决： "less": "^4.1.1", "less-loader": "^5.0.0", "node-sass": "^4.13.0", "sass-loader": "^8.0.0",

1. 由于项目通常会有多环境，并且为保持项目统一配置，增加以下处理：

安装依赖dotenv

npm i dotenv -S // 新增项目依赖，移植如版本号类的常量参数至.env文件，便于脚本统一修改参数

dotenv具体使用参考：www.npmjs.com/package/dot…

package.json配置script命令

{
  "scripts": {
    "build:pro": "cross-env NODE_ENV=production VUE_APP_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:dev": "cross-env NODE_ENV=production VUE_APP_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:test": "cross-env NODE_ENV=production VUE_APP_ENV=test UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:pre": "cross-env NODE_ENV=production VUE_APP_ENV=pre UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "pro:mp-weixin": "cross-env NODE_ENV=development VUE_APP_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development VUE_APP_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "test:mp-weixin": "cross-env NODE_ENV=development VUE_APP_ENV=test UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "pre:mp-weixin": "cross-env NODE_ENV=development VUE_APP_ENV=pre UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch"
  },
}

不同环境接口域名配置

if (process.env.VUE_APP_ENV === 'development') {
// 开发环境  	
}
if(process.env.VUE_APP_ENV === 'production'){
//正式环境  	
}
if(process.env.VUE_APP_ENV === 'test'){
// 测试环境	 
}
if(process.env.VUE_APP_ENV === 'pre'){
// 预发布环境	
}

注意：此处在配置scripts环境变量时，需注意vuecli支持以VUE_APP_前缀的参数；在配置过程中不使用NODE_ENV作为环境变量的原因是该参数在脚手架中，做了区分发布和开发的webpack处理。修改生成项目目录可使用UNI_OUTPUT_TMP_DIR、UNI_OUTPUT_DIR环境变量去修改。但不建议这么做。

配置白名单，下载秘钥

第一次下载秘钥，超管扫码即可。

关于miniprogram-ci，浏览文档即可

developers.weixin.qq.com/miniprogram…

Shell脚本实例

#!/bin/bash
echo -------------------------------------------------------
echo 分支/TAG: ${GIT_BRANCH}
echo -------------------------------------------------------
# 执行项目构建
cd ${WORKSPACE}

sudo npm install
sudo npm run build:mp-weixin


APPID=`cat ${WORKSPACE}/src/manifest.json| sed "/\/\*/d"| jq '."mp-weixin".appid'| sed "s/\"//g"`
PRD_DIR=/data/website/weapp_config/co_weapp_demo/
FTP_URL=
FTP_PORT=
FTP_USER=
FTP_PWD=
QR_IMG=/data/website/weapp_config/co_weapp_demo/qr.jpg

echo -------------------------------------------------------
echo APPID: ${APPID}
echo -------------------------------------------------------



function f_preview() {
if [ -f ${PRD_DIR}/private.${APPID}.key ]
then
echo "私钥文件校验通过"
/usr/bin/miniprogram-ci \
preview \
--pp ${WORKSPACE}/dist/build/mp-weixin/ \
--pkp ${PRD_DIR}/private.${APPID}.key \
--appid ${APPID} \
--uv ${UPLOAD_VERSION} \
-r 1 \
--enable-es6 true \
--enable-es7 true \
--enable-minifyJS true \
--enable-minifyWXSS true \
--enable-autoPrefixWXSS true \
--qrcode-format image \
--qrcode-output-dest '/data/website/weapp_config/co_weapp_demo/qr.jpg'
--qrcode-output-dest '${QR_IMG}'
else
echo "私钥文件校验失败"
exit 1
fi
}


function f_upload() {
if [ -f ${PRD_DIR}/private.${APPID}.key ]
then
echo "私钥文件校验通过"
/usr/bin/miniprogram-ci \
upload \
--pp ${WORKSPACE}/dist/build/mp-weixin/ \
--pkp ${PRD_DIR}/private.${APPID}.key \
--appid ${APPID} \
--uv ${UPLOAD_VERSION} \
-r 1 \
--enable-es6 true \
--enable-es7 true \
--enable-minifyJS true \
--enable-minifyWXSS true \
--enable-autoPrefixWXSS true 
else
echo "私钥文件校验失败"
exit 1
fi

}


function ftp_upload() {
/usr/bin/lftp -u "${FTP_USER}","${FTP_PWD}" ${FTP_URL}/qrcode/weapp -p ${FTP_PORT} <<EOF
mkdir -p ${JOB_BASE_NAME}/${BUILD_ID}
cd ${JOB_BASE_NAME}/${BUILD_ID}
put ${QR_IMG}
bye
EOF
}


case ${BUILD_TYPE} in
"preview")
echo "开始打包体验版"
if [ -f ${QR_IMG} ]
then
echo "清理旧二维码"
rm -rf ${QR_IMG}
fi
echo "上传体验版二维码"
ftp_upload
BUILD_MSG="<img src="http://域名/qrcode/weapp/${JOB_BASE_NAME}/${BUILD_ID}/qr.jpg" alt="预览二维码" width="200" heig