The case project is a small program project created directly by HBuilderX software.
Train of thought
The following four steps are obtained by browsing official uni-app documents and official applets development documents:
1. Preconditions The project code is transformed from HBuilderX to Vuecli, and the differentiated environment code is configured; 2. In the applets platform, configure development management > Applets code upload > whitelist, download the secret key; 3. In the Jekins configuration interface, you can select the corresponding branch or Tag and pull the code; 4. Shell scripts can be previewed and uploaded through miniprogram-CI;Copy the codeHow do I convert a project created by HBuilderX to a Vuecli creation?
- Global installation dependency
npm install -g @vue/cli
Copy the code- Command to create a project
vue create -p dcloudio/uni-preset-vue project_demo // Select the default UNI-app template
Copy the codeThe generated directory is as follows:
-
Copy the existing project to the SRC directory, removing unpackage, node_modules, etc
-
Copy the dependencies used in the project to package.json in the project_demo directory and install the dependencies
-
When the framework default command NPM run build:mp-weixin is executed to validate the project code, the following exception may be thrown
Under the above problem can be dependent on a fixed address: “less” : “^ 4.4.1”, “less – loader” : “^ 5.0.0”, “node – sass” : “^ 4.13.0”, “sass – loader” : “^ 8.0.0”,
- Because projects often have multiple environments, and to keep projects uniformly configured, add the following processing:
Installation depends on Dotenv
npm i dotenv -S // Add project dependencies to migrate constant parameters such as version numbers to. Env files for unified script modification
Copy the codeDotenv specific USES reference: www.npmjs.com/package/dot…
Package. json Configures script command
{
"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"}},Copy the codeDomain names of different environment interfaces are configured
if (process.env.VUE_APP_ENV === 'development') {
// Development environment
}
if(process.env.VUE_APP_ENV === 'production') {// Formal environment
}
if(process.env.VUE_APP_ENV === 'test') {// Test the environment
}
if(process.env.VUE_APP_ENV === 'pre') {// Pre-release environment
}
Copy the codeNote: When configuring environment variables for scripts, note that vuecli supports parameters prefixed with VUE_APP_. The reason NODE_ENV is not used as an environment variable during configuration is that it is webpacked in scaffolding to distinguish publishing from development. You can use the UNI_OUTPUT_TMP_DIR and UNI_OUTPUT_DIR environment variables to change the generated project directory. But it’s not recommended.
Configure the whitelist and download the key
The first time to download the secret key, supertube scan code.
For miniprogram-CI, just browse the documentation
Developers.weixin.qq.com/miniprogram…
Shell script instance
#! /bin/bash
echo -------------------------------------------------------
echoThe branch/TAG:${GIT_BRANCH}
echo -------------------------------------------------------
# Execute the project build
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 "Private key file verified"
/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 "Private key file verification failed"
exit 1
fi
}
function f_upload() {
if [ -f ${PRD_DIR}/private.${APPID}.key ]
then
echo "Private key file verified"
/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 "Private key file verification failed"
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 "Start packing the Demo."
if [ -f ${QR_IMG} ]
then
echo "Clean up old QR codes"
rm -rf ${QR_IMG}
fi
echo "Upload the qr code of experience version"
ftp_upload
BUILD_MSG="<img src="http:// / qrcode/weapp/domain name${JOB_BASE_NAME}/${BUILD_ID}/qr.jpg" alt="Preview qr code" width="200" heig
Copy the code