• cll创建的uniapp小程序动态更改manifest.json

    文章目录

    1，前言

    事情的起因是这样的，项目是用cli搭建的uni-app小程序。申请了两个appid，一个用作开发人员调试使用，体验版和正式版都是dev环境。一个体验版是测试环境或者beta环境，而正式版是线上环境。基于这种情况，我想了两个方案来动态配置。

    • 1，用node动态更换appid，并且写4个环境env文件，配置不同的打包命令（结果uview这个库在打包test和beta环境时一直报错，短时间没找到原因）
    • 2，还是用node动态更换appid，并且写4个环境env文件，配置不同的打包命令，但是多加了一个json文件，用node动态修改文件，在App.vue里导入。

    2，实现思路

    首先，小程序运行时，自带一个运行环境变量，值是一个字符串，如下表：

    环境值
    开发版develop
    体验版trial
    正式版release

    根据这个值，我这边创建了env.dev.js，env.test.js，env.beta.js，env.pro.js，四个文件在根目录。里面写了四个环境对应的appid，和本地版请求地址，体验版接口请求地址，正式版请求地址。并且在src目录新增了requestPath.json文件和modifyManifest.js文件，具体用法如下。

    3，实现代码

    • env.dev.js
    /*
  1，VUE_APP_WX_APPID字段是小程序的appid
  2，xxx_url字段是小程序各版本的请求域名
*/
module.exports = {
  PROGRAM_NAME: '小程序名字',
  VUE_APP_WX_APPID: '987654321',
  develop_url: 'dev-baidu.com', // 本地版
  trial_url: 'dev-baidu.com', // 体验版
  release_url: 'baidu.com' // 线上版
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • env.prd.js
    /*
  1，VUE_APP_WX_APPID字段是小程序的appid
  2，xxx_url字段是小程序各版本的请求域名
*/
module.exports = {
  PROGRAM_NAME: '小程序名字',
  VUE_APP_WX_APPID: '123456789',
  develop_url: 'dev-baidu.com', // 本地版
  trial_url: 'dev-baidu.com', // 体验版（正式环境发版，需要提交审核，审核不可能给微信客服人员正式环境来测试，所以这里的体验版是开发环境）
  release_url: 'baidu.com' // 线上版
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • modifyManifest.js
    const fs = require('fs')
const envDev = require('../env.dev')
const envTest = require('../env.test')
const envBeta = require('../env.beta')
const envPrd = require('../env.prd')

// 匹配当前环境的配置
const envList = [
  { key: 'development', value: envDev },
  { key: 'test', value: envTest },
  { key: 'beta', value: envBeta },
  { key: 'production', value: envPrd }
]
const env = envList.find(item => item.key === process.env.NODE_ENV)

// 改写manifest.json文件的appid
fs.readFile(
  `${__dirname}/manifest.json`,
  (err, data) => {
    if (err) {
      console.error(err)
    } else {
      let _data = JSON.parse(data.toString())
      _data['mp-weixin'].appid = env.value.VUE_APP_WX_APPID

      _data = JSON.stringify(_data)
      // 写入
      fs.writeFile(`${__dirname}/manifest.json`, _data, {
        encoding: 'utf-8'
      }, (err) => {
        if (err) {
          console.error('配置失败', err)
        } else {
          console.log('appid配置成功：', env.value.PROGRAM_NAME)
        }
      })
    }
  }
)
// 改写requestUrl.json文件的请求域名
fs.readFile(
  `${__dirname}/requestPath.json`,
  (err, data) => {
    if (err) {
      console.error(err)
    } else {
      let _data = JSON.parse(data.toString())
      _data.develop_url = env.value.develop_url
      _data.trial_url = env.value.trial_url
      _data.release_url = env.value.release_url
      _data = JSON.stringify(_data)
      // 写入
      fs.writeFile(`${__dirname}/requestPath.json`, _data, {
        encoding: 'utf-8'
      }, (err) => {
        if (err) {
          console.error('域名配置失败：', err)
        } else {
          console.log('域名配置成功：', env.key)
        }
      })
    }
  }
)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • requestPath.json
    {
  "develop_url": "test-baidu.com",
  "trial_url": "test-baidu.com",
  "release_url": "baidu.com"
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • App.vue
    <script>
import config from './requestPath.json'

// 运行环境
const runtime = __wxConfig.envVersion
// 设置请求域名
let base = ''
switch (runtime) {
  case 'develop': // 本地
    base = config.develop_url
    break
  case 'trial': // 体验版
    base = config.trial_url
    break
  default: // release 正式版
    base = config.release_url
}

export default {
  onLaunch() {
    console.log(`${runtime}环境：${this.globalData.baseURL}`)
  },
  globalData: {
    baseURL: `https://${base}`,
    socketUrl: `wss://${base}`
  }
}
</script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • package.json

    关键代码是scripts里的运行命令，分别是build:dev，build:test，build:beta，build:pro这四个。

    {
  "name": "xxx",
  "version": "1.0.0",
  "private": true,
  "author": {
    "name": "wangpeng",
    "email": "993080086@qq.com"
  },
  "scripts": {
    "serve": "cross-env NODE_ENV=development node src/modifyManifest.js && npm run dev:mp-weixin",
    "build:dev": "cross-env NODE_ENV=development node src/modifyManifest.js && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:test": "cross-env NODE_ENV=test node src/modifyManifest.js && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:beta": "cross-env NODE_ENV=beta node src/modifyManifest.js && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:pro": "cross-env NODE_ENV=production node src/modifyManifest.js && cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "lint": "eslint ./src --ext .vue,.js",
    "lint-fix": "eslint --fix ./src --ext .vue,.js",
    "prepare": "husky install",
    "build:app-plus": "cross-env NODE_ENV=production UNI_PLATFORM=app-plus vue-cli-service uni-build",
    "build:custom": "cross-env NODE_ENV=production uniapp-cli custom",
    "build:h5": "cross-env NODE_ENV=production UNI_PLATFORM=h5 vue-cli-service uni-build",
    "build:mp-360": "cross-env NODE_ENV=production UNI_PLATFORM=mp-360 vue-cli-service uni-build",
    "build:mp-alipay": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build",
    "build:mp-baidu": "cross-env NODE_ENV=production UNI_PLATFORM=mp-baidu vue-cli-service uni-build",
    "build:mp-jd": "cross-env NODE_ENV=production UNI_PLATFORM=mp-jd vue-cli-service uni-build",
    "build:mp-kuaishou": "cross-env NODE_ENV=production UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build",
    "build:mp-lark": "cross-env NODE_ENV=production UNI_PLATFORM=mp-lark vue-cli-service uni-build",
    "build:mp-qq": "cross-env NODE_ENV=production UNI_PLATFORM=mp-qq vue-cli-service uni-build",
    "build:mp-toutiao": "cross-env NODE_ENV=production UNI_PLATFORM=mp-toutiao vue-cli-service uni-build",
    "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build",
    "build:quickapp-native": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-native vue-cli-service uni-build",
    "build:quickapp-webview": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview vue-cli-service uni-build",
    "build:quickapp-webview-huawei": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build",
    "build:quickapp-webview-union": "cross-env NODE_ENV=production UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build",
    "dev:app-plus": "cross-env NODE_ENV=development UNI_PLATFORM=app-plus vue-cli-service uni-build --watch",
    "dev:custom": "cross-env NODE_ENV=development uniapp-cli custom",
    "dev:h5": "cross-env NODE_ENV=development UNI_PLATFORM=h5 vue-cli-service uni-serve",
    "dev:mp-360": "cross-env NODE_ENV=development UNI_PLATFORM=mp-360 vue-cli-service uni-build --watch",
    "dev:mp-alipay": "cross-env NODE_ENV=development UNI_PLATFORM=mp-alipay vue-cli-service uni-build --watch",
    "dev:mp-baidu": "cross-env NODE_ENV=development UNI_PLATFORM=mp-baidu vue-cli-service uni-build --watch",
    "dev:mp-jd": "cross-env NODE_ENV=development UNI_PLATFORM=mp-jd vue-cli-service uni-build --watch",
    "dev:mp-kuaishou": "cross-env NODE_ENV=development UNI_PLATFORM=mp-kuaishou vue-cli-service uni-build --watch",
    "dev:mp-lark": "cross-env NODE_ENV=development UNI_PLATFORM=mp-lark vue-cli-service uni-build --watch",
    "dev:mp-qq": "cross-env NODE_ENV=development UNI_PLATFORM=mp-qq vue-cli-service uni-build --watch",
    "dev:mp-toutiao": "cross-env NODE_ENV=development UNI_PLATFORM=mp-toutiao vue-cli-service uni-build --watch",
    "dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch",
    "dev:quickapp-native": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-native vue-cli-service uni-build --watch",
    "dev:quickapp-webview": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview vue-cli-service uni-build --watch",
    "dev:quickapp-webview-huawei": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-huawei vue-cli-service uni-build --watch",
    "dev:quickapp-webview-union": "cross-env NODE_ENV=development UNI_PLATFORM=quickapp-webview-union vue-cli-service uni-build --watch",
    "info": "node node_modules/@dcloudio/vue-cli-plugin-uni/commands/info.js",
    "serve:quickapp-native": "node node_modules/@dcloudio/uni-quickapp-native/bin/serve.js",
    "test:android": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=android jest -i",
    "test:h5": "cross-env UNI_PLATFORM=h5 jest -i",
    "test:ios": "cross-env UNI_PLATFORM=app-plus UNI_OS_NAME=ios jest -i",
    "test:mp-baidu": "cross-env UNI_PLATFORM=mp-baidu jest -i",
    "test:mp-weixin": "cross-env UNI_PLATFORM=mp-weixin jest -i"
  },
  "dependencies": {
    "@dcloudio/uni-app-plus": "^2.0.1-33920220314002",
    "@dcloudio/uni-h5": "^2.0.1-33920220314002",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-i18n": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-360": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-alipay": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-baidu": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-jd": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-kuaishou": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-lark": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-qq": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-toutiao": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-vue": "^2.0.1-33920220314002",
    "@dcloudio/uni-mp-weixin": "^2.0.1-33920220314002",
    "@dcloudio/uni-quickapp-native": "^2.0.1-33920220314002",
    "@dcloudio/uni-quickapp-webview": "^2.0.1-33920220314002",
    "@dcloudio/uni-stat": "^2.0.1-33920220314002",
    "@dcloudio/uni-ui": "^1.4.13",
    "@vue/shared": "^3.2.31",
    "crypto-js": "3.3.0",
    "js-base64": "^3.7.2",
    "mp-progress": "^1.2.14",
    "regenerator-runtime": "^0.12.1",
    "uview-ui": "^2.0.33",
    "vue": "^2.6.11"
  },
  "devDependencies": {
    "@babel/runtime": "~7.12.0",
    "@dcloudio/types": "*",
    "@dcloudio/uni-automator": "^2.0.1-33920220314002",
    "@dcloudio/uni-cli-i18n": "^2.0.1-33920220314002",
    "@dcloudio/uni-cli-shared": "^2.0.1-33920220314002",
    "@dcloudio/uni-migration": "^2.0.1-33920220314002",
    "@dcloudio/uni-template-compiler": "^2.0.1-33920220314002",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.1-33920220314002",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.1-33920220314002",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.1-33920220314002",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.1-33920220314002",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.1-33920220314002",
    "@vue/cli-plugin-babel": "~4.5.12",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.12",
    "@vue/eslint-config-airbnb": "^5.0.2",
    "babel-plugin-import": "^1.13.3",
    "cross-env": "^7.0.3",
    "eslint": "^7.32.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-vue": "^8.0.3",
    "eslint-plugin-vuejs-accessibility": "^1.1.0",
    "husky": "^7.0.2",
    "mini-types": "*",
    "miniprogram-api-typings": "*",
    "node-sass": "^4.9.3",
    "postcss-comment": "^2.0.0",
    "sass-loader": "^10.2.1",
    "vue-template-compiler": "^2.6.11",
    "core-js": "^3.6.5"
  },
  "browserslist": [
    "Android >= 4.4",
    "ios >= 9"
  ],
  "uni-app": {
    "scripts": {}
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127

    如果看了觉得有帮助的，我是@鹏多多，欢迎 点赞 关注 评论；

    往期文章

    个人主页

  • 相关阅读:
    关于 HTML 的一切：初学者指南
    【回归预测-PNN分类】基于粒子群算法群优化概率神经网络算法实现空气质量评价预测附matlab代码
    高数常用公式定理总结
    04 flink 集群搭建
    GBASE 8s 高可用RSS集群搭建
    可观测性不止于监控，让运维不开盲盒！
    智慧农业：各省市粮食产量排名，“鱼米之乡”湖南位居第十
    Newman基本使用
    JavaWeb对于Listener的运用详解【利用Session统计在线人数】
    985大学本科毕业后，许多同学都选择考公务员或进入事业单位工作，渴望拥有铁饭碗工作。而“我”选择了【软件测试】
  • 原文地址：https://blog.csdn.net/pdd11997110103/article/details/126494425