一、创建项目

1、创建项目名称，选择简单的模板，对vue版本选择，然后创建

这是项目创建完成后的列表，运行到微信开发者工具。

2、应用colorUI

ColorUI是一个css库，引入样式后可以根据class来调用组件

下载源码解压获得/Colorui-UniApp文件夹，复制目录下的 /colorui 文件夹到你的项目根目录
App.vue引入关键Css main.css icon.css

<style>
@import "colorui/main.css";
@import "colorui/icon.css";
@import "app.css"; /* 你的项目css */
....
</style>

此时可以使用colorUI提供的css样式了，因为colorUI的文档说明正在完善中，具体样式对应的类名可能不清楚，那么你可将color-ui下载下来，使用HBuilderX运行在浏览器中，打开调试工具，找到对应的节点即可获取对应的类名，（当然你也可能会有其他好的方法）。

参考文章作者：圣墨

3、设置底部tab页

在pages文件夹中，新建一个index文件夹并创建一个index.vue页面，在这个页面可布局底部tab, 根据点击不同的tab显示对应的tab页，如图：

在pages.json文件夹中，在pages新建的页面可以在此处配置

在main.js中输入以下代码

import basics from './pages/basics/home.vue'
Vue.component('basics',basics)
import components from './pages/component/home.vue'
Vue.component('components',components)
import plugin from './pages/plugin/home.vue'
Vue.component('plugin',plugin)

如图：

注意：

如果每个tab点击是切换不同的view，这个就相当于单页应用了，当页面比较复杂时，切换过程可能存在卡。所以使用自定义组件的tabbar就尽量避免太多复杂页面。
当然原生tabbar虽然体验好，但自定义性不足。这个需要开发者根据自己的需求来平衡选择

4、使用colorui自定义导航栏

pages.json 配置取消系统导航栏

"globalStyle": {
	"navigationStyle": "custom"
},

App.vue 获得系统信息，这里我直接使用了ColorUI/Colorui-UniApp/App.vue的代码

//这里只简单贴以下具体的代码：
onLaunch: function() {
    uni.getSystemInfo({
    	success: function(e) {
    		// #ifndef MP
    		Vue.prototype.StatusBar = e.statusBarHeight;
    		if (e.platform == 'android') {
    			Vue.prototype.CustomBar = e.statusBarHeight + 50;
    		} else {
    			Vue.prototype.CustomBar = e.statusBarHeight + 45;
    		};
    		// #endif
    		// #ifdef MP-WEIXIN (微信小程序)
    		Vue.prototype.StatusBar = e.statusBarHeight;
    		let custom = wx.getMenuButtonBoundingClientRect();
    		Vue.prototype.Custom = custom;
    		Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
    		// #endif		
    		// #ifdef MP-ALIPAY
    		Vue.prototype.StatusBar = e.statusBarHeight;
    		Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
    		// #endif
    	}
    })
},

在main.js引入cu-custom组件

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

在需要的页面可以直接使用了，如下：

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
	<block slot="backText">返回</block>
	<block slot="content">导航栏</block>
</cu-custom>

5、封装uniapp的api请求

封装api请求--参考文章作者：蜡笔小心_、举个栗子 .

首先创建request目录，下面需要至少两个js文件

index.js 封装get、post请求，接收参数并返回数据
api.js 封装后台接口，便于页面调用和后期维护

1、封裝index.js

👉定义请求参数

必备参数：url、method、header、data
可选参数：hideLoading

export default class Request {
    http(param) {
        let url = param.url;
        let method = param.method;
        let header = param.header || {};
        let data = Object.assign(param.data || {});
        let hideLoading = param.hideLoading || false;
        // 第一步的代码均在此处展示，后面示例代码就不写外层 class 和 http方法了。
        ....
    }
}

二、遇到的问题

1、创建项目后，运行至微信开发平台，报错 × IDE may already started at port 16094, trying to connect

解决：

一、在微信小程序开发工具中，设置--> 安全里打开“服务端口” 二、回到HbuiderX，重新运行就好了

报错：TypeError: Cannot read property ‘forceUpdate’ of undefined

解决：是因为我们没有为项目配置 appID 的原因，所以只需要完成 APPID 配置即可。

双击打开 manifest.json
找到【微信小程序配置】

配置：

2、报错：# uniapp中tabbar设置报错文件查找失败："./pages/xx/xx.vue" at main.js:6

新建页面后，在全局文件pages中也会自动新建噎着页面的tab，如果删除了，就会报找不到文件的错误

参考文章：汤果果： uniapp中tabbar设置报错文件查找失败，at mian.js:5

3、报错： pages.json解析失败，不符合 json 规范 14:37:48.475 Unexpected token ] in JSON at position 1376

根据json数据格式要求：

    1、原始类型的值只有四种：字符串、数值（必须以十进制表示）、布尔值和null（不能使用NaN, Infinity, -Infinity和undefined  


    2、字符串必须使用引号表示。  


    3、对象最后一个成员的后面，不能加逗号。  


从上面关于json数据格式的基本要求去查找问题，错误原因习惯性的在page的style参数中最后一个打了逗号

删除即可

4、页面宽度显示问题，pages.json中已经设置好底部列表，但是页面的宽度没有百分百占比

解决：将class="content"的类名去掉

这里给了flex布局，变形了
.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

uniAPP从无到有