taro小程序CI配置及radux高阶实践

CodingDogY
392 阅读2分钟

miniprogram-ci

详细sop请参考下面的官方说明，非常详细

npm www.npmjs.com/package/min…

微信开放文档 developers.weixin.qq.com/miniprogram…

安装

npm install miniprogram-ci --save

详细配置

const ci = require('miniprogram-ci')
const  printQrcode  = require('./prview.js')
const version = '2.5.0'
const desc = `ci自动上传-${new Date()}`
const configENV = process.argv[2]
const uploadType = process.argv[3] //对应package.json;node config/ci.wx.js test preview",取preview
const cwd = process.cwd()
let appId = 'XXXX'

const project = new ci.Project({
  appid: appId,
  type: 'miniProgram',
  projectPath: `${cwd}/dist`,
  privateKeyPath: `${cwd}/key/private.${appId}.key`,
  ignores: ['node_modules/**/*'],
})
if(uploadType === 'preview') {
  const previewResult =  ci.preview({ 
	    project, 
	    version, 
	    desc,
		setting: {
		  minify: true,
		},
		qrcodeFormat: 'image',
		qrcodeOutputDest: `${cwd}/qrcode/qrcode.jpg`, // 生成的二维码存放的本地绝对路径
		onProgressUpdate: console.log,
		// pagePath: 'pages/index/index', // 预览页面
		// searchQuery: 'a=1&b=2',  // 预览参数 [注意!]这里的`&`字符在命令行中应写成转义字符`\&`
  }).then(res => {
    console.log('%c预览成功', 'color: green')
  }).catch(error => {
    console.log('%c预览失败', 'color: red')
  })
}else {
   const uploadResult = ci.upload({ project, version, desc,
    setting: {
      minify: true,
    },
  }).then(res => {
    console.log('%c上传成功', 'color: green')
  }).catch(error => {
    console.log('%c上传失败', 'color: red')
  })
}

package.jsonp配置

 "test-preview": "cross-env NODE_ENV=production CONFIG_ENV=test taro build --type weapp && node config/ci.wx.js test preview",
 执行： npm run test-preview

图片.png

此时在根目录下同时也是生成了二维码，

图片.png

个人小建议：小程序类的其实没必要花精力和时间在CI方面，因为微信的开发者工具足够可视化，足够便捷。。。 尤其win下运行的时间足够挑战你耐心，但技术上还是可以折腾玩玩！

@tarojs/plugin-mini-ci插件

官方说明：

taro-docs.jd.com/docs/plugin…

独立使用命令必须升级taro至3.6.0版本，整体配置比minci更简单，所以就就把旧项目做了升级

先说结论：

图片.png

各种依赖不支持，插件废弃等等，尤其taro-ui本身配置的是 "taro-ui": "^3.0.0-alpha.3" 结果报calc($w / 2) sass2.0不支持/计算等等，github issues 也是非常多的，毫无疑问升级失败，所以选择稳定版，不要轻易升级新版，之前的项目是从2.2.7升级至3.3.2版，项目从开始到目前线上2年多，基本稳定

继续折腾

重新初始化一个新版的taro,指定版本为3.6.0

npx @tarojs/ci@3.6.0 init myapp

图片.png

选择redux-hooks模板后续介绍

配置从官方直接copy

const CIPluginOpt = {
  weapp: {
      appid: "wxf1713274ca8ca4e9",
      privateKeyPath: "key/private.wx2c507a1f1a20e4a8.key"
  },
  // 版本号
  version: "1.0.0",
  // 版本发布描述
  desc: "版本描述"
}
const config = {
plugins: [
  [ "@tarojs/plugin-mini-ci", CIPluginOpt ],
      // 应用自己写的插件
   require('path').join(__dirname, './test'),
]
}

package.json 配置

"scripts": {

    "build:weapp": "cross-env NODE_ENV=development CONFIG_ENV=dev taro build --type weapp --open",

    "build:weapp:preview": " cross-env NODE_ENV=production CONFIG_ENV=test taro build --type weapp --preview",

    "build:weapp:upload": "cross-env NODE_ENV=production CONFIG_ENV=stage --type weapp --upload",

    "build:weapp:upload": "cross-env NODE_ENV=production CONFIG_ENV=stage --type weapp --upload --projectPath dist/app.json"
  }
  
  执行预览：build:weapp:preview

结合Docker和runner服务的自动化CI

配置DockerFile

FROM XXX镜像
ENV PRO_LOCAL false
RUN echo "Asia/shanghai" > /etc/timezone;
WORKDIR /usr/share/nginx/html
ADD enterpoint.sh /usr/bin/
ENTRYPOINT ["/usr/bin/enterpoint.sh"]
RUN chmod +x /usr/bin/enterpoint.sh
ADD dist/h5 /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
EXPOSE 80

.gitlab-ci.yml文件配置

image: xxx镜像

stages:
  - dev_build //定义各种环境的构建场景，一般对应分支
  - test_build 
  - stage-build
  - prod_build

dev_build:
  tags:
    - i-ce
  stage: dev_build
  only:
    - tags
    - ci
    - /^release-dev.*$/ //触发stage的条件，关联分支名
  script:
    - npm config set sass-binary-site http://npm.taobao.org/mirrors/node-sass
    - npm config set registry https://repo.dtyunxi.cn/nexus/repository/npm/
    - npm install node-sass 
    - npm install @tarojs/cli@2.2.7
    - npm install --registry https://repo.dtyunxi.cn/nexus/repository/npm/
    - chmod -R 777 node_modules
    - npm run build:h5Dev

    - mkdir -p /cache/${CI_PROJECT_NAME}-${CI_PROJECT_ID}-${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHA}/dist
    - cp -r dist/h5 /cache/${CI_PROJECT_NAME}-${CI_PROJECT_ID}-${CI_COMMIT_REF_NAME}-${CI_COMMIT_SHA}/dist
    - zip -q -r dist.zip dist/
    - cp -r dist/h5  $CI_PROJECT_DIR/docker/dist
    - kaniko --skip-tls-verify -c $CI_PROJECT_DIR/docker -f $CI_PROJECT_DIR/docker/Dockerfile -d ${DOCKER_REGISTRY}/${GROUP_NAME}/${PROJECT_NAME}:${CI_COMMIT_TAG}
    - chart_build
    .auto_devops: &auto_devops |
  http_status_code=`curl -o .auto_devops.sh -s -m 10 --connect-timeout 10 -w %{http_code} "${CHOERODON_URL}/devops/ci?token=${Token}&type=front"`
  if [ "$http_status_code" != "200" ]; then
    cat .auto_devops.sh
    exit 1
  fi
  source .auto_devops.sh

before_script:
  - *auto_devops

更多详解可前往：www.yuque.com/lufeilizhix…

redux-hooks

官方说明：taro-docs.jd.com/docs/redux#…

store 配置

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import rootReducer from './reducers'

const middlewares = [
  thunkMiddleware,
  createLogger()
]

export default function configStore () {
  const store = createStore(rootReducer, applyMiddleware(...middlewares))
  return store
}

reducers

import { combineReducers } from 'redux'

import userInfo from './userInfo'
//...

export default combineReducers({
  userInfo,
  // ...

})

userInfo.js

const defaultState = {
  customerInfo: {}
}

export default function userInfo(state = defaultState, action) {
  switch (action.type) {
    case 'setCustomerInfo':
      return {
        customerInfo: action.value
      }
    default:
      return state
  }
}

页面中使用 1：useDispatch&useSelector

import { useSelector, useDispatch } from 'react-redux';

export default function myPage() {

const purchaseNum = useSelector(state => state.purchaseNum.num)  // 从store中取数据

const dispatch = useDispatch()

//初始化
 useEffect(() => {
    Taro.getStorage({
      key: 'customerInfo',
      success: function (res) {
        if (!res.data) {
          Request({ url: "v1/user/user-info" }).then(res => {
            if (res.resultCode === '0') {
              dispatch({ type: "setCustomerInfo", value: res.data })
              Taro.setStorage({ key: "customerInfo", data: res.data })
            }
          })
        } else {
          dispatch({ type: "setCustomerInfo", value: res.data }) //缓存数据
        }
      }
    })
    getCustomerList();  // 获取授权客户列表
  }, []);

整体配置及使用上相比之前非常简单

客官既然来了，点个赞吧！

avatar
文章
阅读
粉丝