uniapp框架组件封装调用及环境变量配置

组件封装
uniapp组件封装及调用方法跟vue用法其实差不多

1. 组件建立

最外层新建个components文件（文件名可自定义），建个Toast文件夹（文件名可自定义），内层建个index.vue文件

浅写个demo：

<template>
  <view>
    <button>我是组件</button>
  </view>
</template>

2.引用并调用组件

<template>
  <view class="content">
    <cButton />
  </view>
</template>
<script>
import cButton	from '@/wxcomponents/Toast/index/index.vue'
export default {
  components: {
    cButton // 注册子组件
  }
}
</script>

调用组件到这就结束啦，这是个小demo，具体详细可参考组建封装

环境变量设置
这个应该是大部分项目都需要用到的，根据不用的环境配置不同的变量，直接上代码

1. 设置变量

// package.json
{
...,
"uni-app": {
	"scripts": {
		"dev-h5": {
			"title": "开发版H5",
			"BROWSER": "chrome",
			"env": {
				"UNI_PLATFORM": "h5",
				"UNI_BASE_URL": "https://lingjun-carrental-test.ve-link.com"
			},
			"define": {
				"DEV-H5": true
			}
		},
		"pre-h5": {
			"title": "测试版H5",
			"BROWSER": "chrome",
			"env": {
				"UNI_PLATFORM": "h5",
				"UNI_BASE_URL": "https://test.XXX.XXX.com"
			},
			"define": {
				"PRE-H5": true
			}
		},
		"prod-h5": {
			"title": "正式版H5",
			"BROWSER": "chrome",
			"env": {
				"UNI_PLATFORM": "h5",
				"UNI_BASE_URL": "https://XXX.XXX.com"
			},
			"define": {
				"PROD-H5": true
			}
		}
	}
  }
}

到这里就配置好了，这个时候Hbuilder X 顶部"运行"和“发布”=》自定义发布会把我们这是的变量展示出来，没有的话重启下编辑器
2. 调用变量

const baseURL = process.env.UNI_BASE_URL
console.log(baseURL) // 输出对应环境的API URL

每日小结：我们一定要学会多赚钱，不是说我们有多爱钱，只是希望有朝一日当我们有需要，或身边最亲近的人有困难时，不至于陷入无能为力、乞求他人的地步！