uni-app运用时需要注意的点 和需要避开的坑

uni-app开发规范

1. 组件不能使用纯HTML标签，不能用js对dom进行操作
2. 接口能力靠近微信小程序规范，数据绑定方式靠近Vue规范，同时补充了APP和页面的生命周期
3. 为了兼容多端运行，建议使用flex布局，配合upx使用
4. 高版本安卓APP发送request请求必须使用https
5. 微信小程序request请求也需要https，同时在小程序管理员后台配置可进行request请求的域名白名单。

IDE配置，日常开发调试技巧

1. 安装插件，不要忘记安装使用到的插件，less/sass编译插件，ES6转换插件，升级开发IDE（HBuilderX）时，使用新版本解压包文件夹覆盖原来软件目录，这样以前安装的插件可以继续使用。

2. 开发调试：开发时，一般情况下，推荐使用H5端（运行->运行到浏览器）进行基础页面制作和页面布局（注意各端页面制作时，使用的技术是否都支持，否则H5上运行正常，换到小程序或者APP端出错），使用微信小程序进行数据交互和接口调试（自己感觉数据处理和接口调试方面微信小程序和APP端比较相似，诸如HTTPS要求），然后根据实际情况，根据各端特色功能和能力进行针对性的调试。

3. App端提供真机运行的console.log日志输出，运行到真机或模拟器时，会在HBuilderX的控制台输出日志。注意无法输出对象，需要把对象转字符串后输出。

4. 调试时自定义重启首先展示的页面，调试时，可能正在做的页面需要从首页进行多次跳转才能打开，但是每次改动代码就会重新启动应用程序，可以在page.json里面配置。

5. 切换git分支之后，重新打开HBuilderX所有标签页，因为编辑器内容可能没有自动更新！

6. **【H5端跨域】**H5页面使用浏览器调试时，提示跨域解决办法，chrome插件商店搜索安装Allow CORS开启，插件只是强制允许跨域，或者配置反向代理，如果不需要单点登录这样的需要跨域带cookies的高级需求，单纯的只是http请求，可以在本地使用nginx做代理，大致的配置：
7. uniapp的manifest.json中有反向代理的配置选项，可以直接配置的（ps：官方没有提，不知道为什么），在manifest.json文件中的h5 -> devServer中增加proxy选项，其实和Vue配置是一样的

页面理由

• 所有页面（希望被直接以URI访问到的视图，只是被引入的组件不需要）都要在pages.json中配置，可以配置页面路径和其他的参数（比如页面是否需要下拉刷新），具体配置参照uni-app官网中的页面设置

uni-app自适应遇到的坑

1. css中font不支持简写方式，这样的结果就是导致手机上运行项目，字体都变大了！把样式都挤变形了
2. css的height高度问题用了rpx单位，结果还是不会自使用屏幕大小！长的手机下面会有空白，短的手机不会
3. 在pages.json 设置头部导航    

   	"style": {
   				"navigationBarTitleText": "uni-app",
   				"navigationBarBackgroundColor": "#FFFFFF",
   				"app-plus":{
   					"scrollIndicator":"none", //隐藏滚动条
   					"titleNView":{
   						"buttons":[
   							{
   								"float":"left",
   								"fontSrc":"./static/iconfont.ttf",
   								"text":"\ue617",
   								"fontSize":"20"
   							},
   							{
   								"float":"right",
   								"fontSrc":"./static/iconfont.ttf",
   								"text":"\ue67a",
   								"fontSize":"20"
   							}
   						]
   					}
   				}
   			}
   

   这是头部导航，正常情况下，在手机端是可以正常显示，但是在小程序端不能显示，需要在 style中取消掉默认原生的导航栏，然后再在首页组件中

   判断是微信小程序的
   		<view class="wx-nav">
   			<view class="iconfont icon-fangdajing"></view>
   			<text>uniapp</text>
   			<view class="iconfont icon-xiaoxi"></view>
   		</view>