uni-app中配置自定义条件编译

这篇具有很好参考价值的文章主要介绍了uni-app中配置自定义条件编译。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前提:官网提供的自定义编译不满足条件

package.json | uni-app官网

下文:不详细写,主要写关键思路

package.json文件

主要看scripts的执行命令,其他依赖就是用vue-cli方式创建uni-app项目生成的

{
  "name": "uniapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "npm run h5:dev",
    "h5:dev": "cross-env NODE_ENV=development UNI_PLATFORM=h5 node './cx.js' && vue-cli-service uni-serve ",
  },
  "dependencies": {
    "@dcloudio/uni-app": "^2.0.2-3080420230530001",
    "@dcloudio/uni-app-plus": "^2.0.2-3080420230530001",
    "@dcloudio/uni-h5": "^2.0.2-3080420230530001",
    "@dcloudio/uni-i18n": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-360": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-alipay": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-baidu": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-jd": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-kuaishou": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-lark": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-qq": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-toutiao": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-vue": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-weixin": "^2.0.2-3080420230530001",
    "@dcloudio/uni-mp-xhs": "^2.0.2-3080420230530001",
    "@dcloudio/uni-quickapp-native": "^2.0.2-3080420230530001",
    "@dcloudio/uni-quickapp-webview": "^2.0.2-3080420230530001",
    "@dcloudio/uni-stacktracey": "^2.0.2-3080420230530001",
    "@dcloudio/uni-stat": "^2.0.2-3080420230530001",
    "@vue/shared": "^3.0.0",
    "autoprefixer": "^8.0.0",
    "core-js": "^3.8.3",
    "flyio": "^0.6.2",
    "pixi.js": "^7.2.4",
    "postcss-loader": "^7.3.3",
    "vue": ">= 2.6.14 < 2.7",
    "vuex": "^3.2.0",
    "weapp-adapter": "^1.0.0"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.3.2",
    "@dcloudio/uni-automator": "^2.0.2-3080420230530001",
    "@dcloudio/uni-cli-i18n": "^2.0.2-3080420230530001",
    "@dcloudio/uni-cli-shared": "^2.0.2-3080420230530001",
    "@dcloudio/uni-helper-json": "*",
    "@dcloudio/uni-migration": "^2.0.2-3080420230530001",
    "@dcloudio/uni-template-compiler": "^2.0.2-3080420230530001",
    "@dcloudio/vue-cli-plugin-hbuilderx": "^2.0.2-3080420230530001",
    "@dcloudio/vue-cli-plugin-uni": "^2.0.2-3080420230530001",
    "@dcloudio/vue-cli-plugin-uni-optimize": "^2.0.2-3080420230530001",
    "@dcloudio/webpack-uni-mp-loader": "^2.0.2-3080420230530001",
    "@dcloudio/webpack-uni-pages-loader": "^2.0.2-3080420230530001",
    "@pixi/unsafe-eval": "^7.2.4",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "babel-plugin-import": "^1.11.0",
    "cross-env": "^7.0.2",
    "jest": "^25.4.0",
    "mini-types": "*",
    "miniprogram-api-typings": "*",
    "postcss": "^8.4.24",
    "postcss-comment": "^2.0.0",
    "vue-template-compiler": ">= 2.6.14 < 2.7",
    "weapp-pixi-adapter": "^0.2.0"
  },
  "browserslist": [
    "Android >= 4.4",
    "ios >= 9"
  ],
  "uni-app": {

  }
}

ct.js

const fs=require("fs");
let path=require("path");
function replacePlugin(){
    let pluginPath=path.resolve(__dirname,"./node_modules/@dcloudio/uni-cli-shared/lib/plugin.js");
    let copyPluginPath=path.resolve(__dirname,"./node_modules/@dcloudio/uni-cli-shared/lib/copyplugin.js");
    let defaultPlugin=fs.readFileSync(pluginPath,'utf8');
    let checkDir = fs.existsSync(copyPluginPath);
    if(!checkDir){
        fs.writeFileSync(copyPluginPath,defaultPlugin);
    }else{
        defaultPlugin=fs.readFileSync(copyPluginPath,'utf8');
    }
    let a='process.UNI_SCRIPT_DEFINE={"WOBUGUAN":true,"WOBUGUAN2":false};';//你自己需要的自定义编译条件
    fs.writeFileSync(pluginPath,a+defaultPlugin);
}
replacePlugin();

条件编译起作用的地方在这个地方node_modules/@dcloudio/uni-cli-shared/lib/plugin.js文件的这里

uni-app中配置自定义条件编译,uni-app

这里的取值,在vue-cli-service执行时就完成了,所以在执行前做变量赋值,替换文件,

这里的ct.js文件中的a是你需要自定义 process.UNI_SCRIPT_DEFINE赋值内容

index.vue文件

<script>
export default{
    created(){
        console.log(2222)
        //#ifdef WOBUGUAN2
        console.log("WOBUGUAN2")
        //#endif
        //#ifdef WOBUGUAN
        console.log("WOBUGUAN");
        //#endif
    }
}
</script>

此时自定义条件编译就完成了!!!

虽然不太合理,修改node-module,但没找到别的办法文章来源地址https://www.toymoban.com/news/detail-859881.html

到了这里,关于uni-app中配置自定义条件编译的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app自定义多环境配置,动态修改appid

    在企业级项目开发中,一般都会分为开发、测试、预发布、生产等多个环境,在工程化中使用不同的打包命令改变环境变量解决不同环境各种变量需要手动修改的问题,比如接口请求地址,不同环境的请求路径前缀都是不同的。在使用 uni-app 开发项目时,一般都是选择使用

    2024年02月12日
    浏览(31)
  • uni-app 折叠自定义

    uni-app的uni-collapse折叠组件样式修改 下面是修改后的样式 修改一下uni-collapse的uni-collapse-item 设计图样式 修改后的样式 就这样吧…

    2024年02月09日
    浏览(44)
  • 【uni-app】自定义导航栏

    新手刚玩 uniapp 进行微信小程序,甚至多端的开发。 原生uniapp 的导航栏,并不能满足 ui 的需求,所以各种查阅资料,导航栏自定义内容 整理如下: 需要修改的文件如下: 1、pages.json 修改pages.json,启动导航栏自适应,设置\\\" navigationStyle\\\": \\\"custom\\\" 2、system_info.js 新建 system_info

    2024年02月16日
    浏览(38)
  • uni-app 自定义下拉框

    如图:     html: view class=\\\"row-item\\\" view class=\\\"lable-tit\\\"性别:/view view class=\\\"selected-all\\\" view class=\\\"drop-down-box\\\" @click=\\\"btnShowHideClick\\\" text class=\\\"dropdown-content\\\"{{choiceContent}}/text image class=\\\"dropdown-icon\\\" src=\\\"/static/down.png\\\" mode=\\\"widthFix\\\"/image /view  view class=\\\"dialog-view\\\" v-if=\\\"isShowChoice\\\" text :class=\\\"choiceI

    2023年04月19日
    浏览(29)
  • uni-app小程序自定义分享内容

    自定义的传参

    2024年02月01日
    浏览(45)
  • [uni-app] 防重复点击处理 - 自定义指令

    一般用节流防抖的方式处理, 这里通过vue的自定义指令方式也可以 实现: main.js中使用一下 应用:

    2024年02月05日
    浏览(46)
  • uni-app uView自定义底部导航栏

    因项目需要自定义底部导航栏,我把它写在了组件里,基于uView2框架写的(vue2);   在components下创建tabbar.vue文件,代码如下:  app.vue (有没有大佬知道为什么这个样式加载app.vue里才生效)  pages.json配置 页面使用: ( mine.vue ) 注: current是底部导航栏的下标,你在tabb

    2024年02月14日
    浏览(67)
  • uni-app 之 安装uView,安装scss/sass编译

    uni-app 之 安装uView,安装scss/sass编译 image.png image.png image.png 点击HBuilder X 顶部,工具,插件安装,安装新插件 image.png image.png 安装成功! 注意,一定要先登录才可以安装 image.png 1. 引入uView主JS库 在项目根目录中的 main.js 中,引入并使用uView的JS库,注意这两行要放在 import Vu

    2024年02月10日
    浏览(38)
  • uni-app之android离线自定义基座

    一 为什么要自定义基座 1,基座其实就是一个app,然后新开发的页面可以直接在手机上面显示,查看效果。 2,默认的基座就是uniapp帮我们打包好的基座app,然后我们可以进行页面的调试。 3,自定义基座主要用来实现原生插件的调用的,自定义基座可以实现使用HBuilder/HBuil

    2024年02月10日
    浏览(37)
  • uni-app 微信小程序自定义导航栏

    上面的导航栏主要由状态栏(就是手机电量显示栏)和小程序的导航栏组成,android手机一般为48px,ios手机一般为44px 1、设置navigationStyle:custom 2、页面导航栏div 3、获取statusBarHeight高度 4、获取navTitleHeight的高度

    2024年02月14日
    浏览(36)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包