uni-app的作用
uni-app是一个vue技术栈之下的可以适配多端的解决方案。
开始
使用uni-app必须下载hbuilderX 这个开发工具，同时如果需要调试微信小程序，还可以下载微信小程序开发工具。 使用hbuilderX 创建项目，选择uni-app hello uni-app模板。这个模板可以掩饰绝大多数的uni-app框架的组件，接口、模板等功能
模板本地h5启动之后可以看到，一个基本的app雏形已经有了。
代码结构分析
如上图所示。模板的代码结构如上。
-common 新手同学不用管
-components uni-app自带的插件，【部分dcloud插件市场中下载的插件会直接注入这个文件夹】建议自己写的插件和这个文件夹分开存放。
-hybrid 新手同学不用管
-pages 业务代码
-platforms 可以删掉
-static 静态文件夹
-store vuex所在之处
-wxcomponents 可以删掉
-manifest.json 主要的配置项
-pagas.json 路由文件
uni-app的一些特殊之处
1: uni-app 不使用标准的html标签。比如div/span这些。而且采用 view/text之类的标签。大家可以去官网查看一下各自标准html标签对应转换后的uni-app标签。
2：uni-app有自己的ajax请求封装。使用 uni.request，不需要加入axios.js之类的库。感觉不方便的同学可以进行二次封装。
3：uni-app有自己的路由系统，不需要额外引用 vue-router。配置文件为pages.jons【默认文件中第一个对象为打开的首页】
4: uni-app对于vue语法有一定的阉割，不是全部支持。
5：uni-app除了mounted之外的组件生命周期，还新增了页面生命周期。其只在pages.json中配置了页面才会触发这些页面生命周期。
6：模板默认使用 sass/scss预编译css。喜欢使用less的同学可以自己下载新的插件。
7：其他细节请参考uni-app官网
本地调试接口
在本地浏览器调试接口需要启动代理，配置内容如下，在manifest.json下找到h5，并写入以下内容
"devServer" : {
"disableHostCheck" : true,
"port" : 8080,
"proxy" : {
"/" : {
"target" : "http://testapp.lhseer.com",
"changeOrigin" : true,
"secure" : false,
"ws" : false,
"pathRewrite" : {
"^/" : ""
}
}
},
"https" : false
}
uni-app的一些坑
1：微信小程序端 插槽只支持解构插槽，且插槽无法在父组件函数或者filter中获得值 解决方案： 三元判断，以及 v-if 仍然生效。还可以用进入插槽之前预处理数据的大招。
2：微信小程序端 不能使用deep选择器 解决方案:采用全局样式覆盖
3：微信小程序端不识别 v-bind:style：“{ ‘hotReportList.length* 132 + ’px‘} ” 这种写法。 解决方案：需要为 hotReportList.length创建一个单独的值，比如count.
