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>