Uni-APP标签

Uni-APP

Uni-app是一个跨平台的开发框架，学会Uni-APP之后可以跨发除iOS，Android，h5，以及各种小程序的应用，不需要再去学习其他应用的框架

uni-app常用开发软件 对uni-app比较友好的软件
微信开发者工具 下载微信小程序的使用工具

创建项目

打开hbuilderx 创建项目选择uni-app选项
创建好一个项目后点击运行到谷歌
运行在微信小程序的时候需要先配置路径
并且在设置中打开端口号才行

这样环境都配完之后就可以运行了

目录文件

• pages 存放所有的页面
• static 存放所有的静态资源图片等
• unpackage 打包过后的文件的存储位置
• app.vue 页面入口文件
• main.js 项目入口文件
• manifest.json 打包后的配置文件
• pages.json 设置项目的存放路径跟窗口外观
• uni.scss 常用的css变量

页面遵循vue，组件靠近小程序，接口能力也是靠近微信小程序的但须将wx 替换为url 数据绑定及事件处理同vue.js规范同时补充了app及页面的生命周期，为了兼容多端运行，建议使用flex布局

uni-app 全局配置

pages.json文件下面的globalStyle

• "navigationBarBackgroundColor"头部导航栏颜色
• navigationBarTextStyle头部导航文字颜色，仅支持黑白色
• navigationBarTitleText 头部导航文字内容，你会发现不成功
  那是因为在pages 里面有个页面的配置他会覆盖全局的配置文件只需要去掉pages里面的style样式就行
• "enablePullDownRefresh":true开启全局的下拉，可以实现下拉刷新
• backgroundColor 配置下拉的背景色
• backgroundTextStyle 设置下拉的文字颜色
• onReachBottomDistance 距离底部多远触发事件

创建页面

在pages 下面创建一个文件夹，在文件夹下面创建一个vue 文件 ，然后在page.json里面创建路由，注意默认显示的都是第一个路由，所以首页路由一般是第一个路由

	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
    
    
			"path": "pages/message/message"	,
			"style":{
    
    
				"navigationBarTitleText":"信息页",
				"h5":{
    
       //这里是设置独有的设置，这里是h5的独有设置，详情见文档
					"pullToRefresh":{
    
    "color":"#007AFF"}
				}
			}
		},
		{
    
    
			"path": "pages/index/index"
		}
	
	],

uni-app设置页面tab-bar

tab-bar 个数只能是2-5，当设置position:top时，将不会显示icon

• color文字颜色
• selectedColortab上的文字选中时的颜色
• backgroundColor tab的背景色
• borderStyletab上边框的颜色，仅支持黑白
• listtab的列表在（2-5）之间
  – pagePath就是要跳转的页面路径，必须在pages中定义
  – texttab上的按钮文字，在5+app和平台上非必填，例如中间可放一个没有文字的+号图标
  – iconPath图片路径icon大小限制为40kb，建议尺寸为81x81px，当position为top时，此参数无效，不支持网络图片，不支持字体图标
  – selectedIconPath选中时的图片路径，要求与iconPath一致
• positiontabbar的位置可选值bottom,top,top仅微信小程序支持

page.json下面tabbar配置
如果只写一个是显示不出来的，最少要两个

"tabBar":{
    
    
		"color":"只支持16进制",//未选中的颜色
		"selectedColor":"16进制",//选中的颜色
		"backgroundColor":"16进制"//背景颜色
		"list":[
			{
    
    
				"text":"首页",
				"pagePath":"pages/index/index",
				"iconPath":'路径',  //未选中时的图片路径 ，路径都放在static下面
				"selectedIconPath":"路径" //选中时的图片路径
			},{
    
    
				"text":"信息页",
				"pagePath":"pages/message/message"
			}
		]
	}

condition启动模式配置

就是没有在tabbar的页面需要借助某个页面来显示，比如说购物车就是在商品的详情页之中

"condition":{
    
    
		"current":0,  //代表第1个页面启动，根据路由的排序算的
		"list":[
			{
    
    
				"name":"详情页",      //启动的页面名
				"path":"pages/detail/detail",	//路径
				"query":"id=80"			//携带的参数
				
			}
		]
	}

text组件

默认是一行显示的，在外面加个view标签就行，但是在template默认只能有view

• selectable 文本是否可选 默认是false
• space 显示连续空格，参数ensp字符一半大小 ，emsp 一个字符大小 ，nbsp 解析成当前设置的字符大小
• decode是否解码默认是false，以前是不能解码，现在基本都是true

view组件

view组件相当于div

• hover-class指定按下去的样式类，当为none时，没有点击效果，默认为none
• hover-stop-propagation 指定是否阻止本节点的祖先节点出现点击效果，相当于阻止冒泡，默认为false，直接写这个属性就行，不用加true加了你会发现报错，实在要加的话，这个时候就需要使用属性绑定:hover-stop-propagation="true"下面的几个属性同理，如果要加具体值就需要绑定，这点跟vue很相似，不加冒号默认是字符串，这点详见vue语法糖
• hover-start-time按住后多久出现点击效果，单位毫秒，默认50，
• hover-stay-time手指松开后点击效果保留时间单位毫秒，默认400

scroll-view 组件

可滚动的视图组件
-scroll-yy轴滚动
-scroll-xx轴滚动

button组件

• size按钮大小（mini）小尺寸
• type按钮类型 （default：白色默认）（primary：wx绿色，app，h5，百度，支付宝蓝色，头条红色，）（warn：红色）
• plain按钮是否镂空，背景色透明
• disabled是否禁用
• loading名称前是否带loading图标
• form-type用于form组件点击分别会触发form组件的submit/reset事件
• open-type开放能力

还有很多具体看文档

image组件

image组件默认是300x240px，图片默认是会填充的

• src图片路径
• mode 图片裁剪，缩放的模式
  – aspectFit缩放保持纵横比，使长边完全显示，也就是说可以完整的将图片显示出来，跟contain差不多
  – aspectFill 保持缩放比，使短边完全显示，将多余的长边裁剪，跟cover差不多
• lazy-load 图片懒加载只针对page与scroll-view下的image有效
• fade-show图片显示动画效果
• @error 当发生错误时，发布到appservice的事件名，当事件对象event.detail={errMsg:‘something wrong’}
• @load当图片载入完毕时，发布到appservice的事件名，事件对象event.detail={height:‘图片高度px’，width:‘图片宽度px’}