使用uni-app和color-ui开发移动端遇到的一些问题_colorui 问题

首先在uni-app中引入color-ui

在uni-app中引入color-ui其实很简单，使用Hbuilder-X可以直接创建一个uni-app的项目，然后在创建一个color-ui的项目，将color-ui项目中colorui文件直接拷贝到uni-app项目下，在App.vue中style下引入：
@import "colorui/main.css";
@import "colorui/icon.css";

这样就可以直接在uni-app的项目中使用color-ui的样式。
1
2
3
4
5

做项目的一些问题

1. 做项目首先是要把整体的布局先设计出来，后面在加内容就非常方便；这里我们可以参考color-ui的布局，里面有flex的布局和grid的布局，基础的布局方式都有。

2. 顶部导航栏可以使用color-ui提供的，也可以使用uni-app的；这两个区别在于color-ui的顶部导航样式会好看一点，但是每个页面又要加；使用uni-app的顶部导航就很方便，直接在 page.json 文件中的"globalStyle"中设置，可一参考uni-app官网的globalStyle属性介绍。

3. 跨域的问题，如果不设置跨域，就只能在Hbuilder-x的内置浏览器中测试使用，开发时感觉很不方便。设置跨域，在 manifest.json 中给 “h5” 属性添加：
"devServer" : {
	"port" : 8080,
	"disableHostCheck" : true,
	"proxy" : {
		"/api" : {
			"target" : "http://192.168.12.23:8080/",
			"changeOrigin" : true,
			"secure" : false
		}
	}
}
port 后台接口的端口号，target 本机ip地址加端口，其它不需要改。

4. 在 mian.js 中定义全局方法，如果方法中调用后台接口，成功后返回数据，调用方法时返回的数据为空，这是因为没有同步的原因；解决方法使用如下方式返回：
var [error, res] = await uni.request({
	url: this.ajaxUrl + '/api/shipmentApi/getDictionaryValue/dirtionaryValue.action?code=' + code + '&value=' + value,
	dataType: 'json',
	method: 'POST'
})
return res.data；
然后在使用此方法的地方通过如下方式拿到返回的值：
let transportMenth = this.getDictionaryValue("TransportMenth", res.data.shipmentMethod)	//运输方式
transportMenth.then(res => {
	this.transportValue = res.obj.value
})
看起来有一点麻烦，但是可以拿到返回值，目前没有找到更好的方法。

5. 引入外部图标，通常会使用阿里巴巴矢量图标库来查找图标，找到图标后下载代码，将下载的代码解压后，将文件夹下的 iconfont.tff 文件拷贝到uni-app项目的static文件夹下，然后在 App.vue 中引入：
 /*导入图标*/
@font-face {
    font-family: 'iconfont';
    src: url('~@/static/iconfont.ttf') format('truetype');		//发货地址图标
}
 /*设置样式*/
.iconfont {
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  -webkit-font-smoothing: antialiased;
	  -moz-osx-font-smoothing: grayscale;
	}
 /*使用*/	
 <view>
	<text class="iconfont text-red">&#xe602;</text>
 </view>
&#xe602; 是图标的编码，打开下载图标代码的 demo_index.html 文件，可以看到图标的编码。

6. 图片上传可以使用 uni-app 自带的图片上传方法，预览的获取路径时设置响应属性为：
 responseType: "arraybuffer",
 将的得到的 arraybuffer 转为blob后使用 FileReader 读取 blob 生成一个 url 的地址。

7. uni-app 中使用分页查询可以参考 uni-app 官网的触底事件。 

8. uni-app 中引入插件，比如可以使用Hbilder-x导入插件，或者自己下载复制到自己的项目中引用。
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