uniapp 自定义环境变量

uniapp 自定义环境变量

最近在用uniapp写微信小程序,在开发中,需要根据环境变量来获取不同的api的baseUrl地址,这里记录一下

uniapp默认环境变量
  • npm run dev:xx 将默认process.env.NODE_ENV=development
  • npm run build:xx 将默认process.env.NODE_ENV=production
uniapp自定义环境变量

packge.json里面定义自己的变量及脚本,参考uniapp自定义环境变量

"uni-app": {
    "scripts": {
      "test": {
        "title": "微信测试环境",
        "env": {
          "UNI_PLATFORM": "mp-weixin"
        },
        "define": {
          "TEST_WEIXIN": true
        }
      }
    }
}
js代码中运用
let baseURL = '';

if (process.env.NODE_ENV === "development") {
  baseURL = "http://development.com"
} else if (process.env.NODE_ENV === "production") {
  baseURL = "http://production.com"
}

// #ifdef TEST_WEIXIN
baseURL = "http://test.com"
// #endif

console.log(baseURL)
package.json修改脚本运行
"scripts": {
    "dev": "uni -p mp-weixin",
    "test": "uni -p test",
    "build": "uni build -p mp-weixin"
}
- npm run dev    baseURL = "http://development.com"
- npm run build  baseURL = "http://production.com"
- npm run test   baseURL = "http://test.com"
- npm run dev:custom test baseURL = "http://test.com"
- npm run build:custom test baseURL = "http://test.com"
- ```

**按照以上步骤如果处理不成功的,可以私信我,有时间回帮忙解决**
### UniApp自定义组件间传值方法 在 UniApp 开发环境中,实现自定义组件间的值传递主要依赖于 Vue 的特性。具体来说,在父组件中可以利用 `ref` 属性来访问子组件实例及其数据;而在子组件内部,则可通过调用 `$emit()` 来触发事件并将参数回传给父级。 #### 使用 ref 获取子组件的数据 当需要从父组件读取子组件中的某些特定状态或执行其上的函数时,可以在模板里为 `<template>` 标签内的目标组件设置唯一的 `:ref` 值[^1]: ```html <template> <!-- 子组件 --> <child-component :ref="setPropsRef"></child-component> <!-- 按钮用于测试获取子组件的值 --> <button @click="getComponentValue">点击获取子组件的值</button> </template> <script> export default { methods: { getComponentValue() { console.log(this.$refs.setPropsRef.someData); // someData 是假设存在于 child-component 内部的一个变量名 } } } </script> ``` #### 利用 $emit 向上层发送消息 对于希望由下至上反馈信息的情况,比如确认按钮被按下之后通知上级更新界面逻辑等场景,应该采用这种方式。下面是一个简单的例子展示了怎样在一个名为 shopwind-multpicker.vue 的选择器插件内向外抛送选定后的结果集合[^2]: ```javascript // 子组件 (shopwind-multpicker.vue) methods: { onConfirmSelection(resultSet) { this.$emit('confirm', resultSet); } } <!-- 对应 HTML 部分省略 --> // 父组件监听 confirm 事件 <shopwind-multpicker @confirm="handlePickerConfirmation"></shopwind-multpicker> <script> import ShopWindMultiPicker from './components/shopwind-multpicker'; export default { components: {ShopWindMultiPicker}, methods: { handlePickerConfirmation(dataFromChild){ alert(`收到子组件传来的内容:${JSON.stringify(dataFromChild)}`); } } }; </script> ``` 上述两种模式共同构成了完整的双向通信机制,既支持单向查询也允许反向控制,从而满足大多数实际应用场景下的需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值