devbox
小丑西瓜9
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

cll创建的uniapp小程序动态更改manifest.json_hbuild开发的小程序的appid支持动态切换吗

作者：小丑西瓜9 | 2024-03-20 14:14:19

赞

踩

hbuild开发的小程序的appid支持动态切换吗

文章目录

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

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

往期文章

个人主页

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/273923
推荐阅读

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。