uni-app学习

黎明前的最后一颗星
137 阅读2分钟

介绍

项目结构

通过cli创建的项目@表示的是src用HBuilder创建 则指向的是项目的根目录 因此这两者的的目录结构有所不同 下图表示的是通过HBuilder 创建的目录

image.png 如果是cli的话我们的目录结构在src下面去定义

声明周期

  1. 应用声明周期
onLaunch()应用初始化加载一次 onShow()应用启动 onHide() 应用隐藏 等

3.页面声明周期

onLoad()页面加载 onShow()页面显示 onReady()页面初次渲染完成 onHide()页面隐藏 onUnload()页面卸载，onPullDowmRefresh()下拉刷新等

image.png

运行环境判断

  1. process.env process.env.NODE_DEV//开发环境development 生产环境production 2.平台 uni.getSystemInfoSync().platform 获取平台的信息（android,ios，小程序（devtools））

样式

  1. 外部样式 支持@import的方式引入外部样式以;结束
@import './style/uni.css'
.test{
}

2.内联

1.style
<view :style="{color:color}" />
2.class  多个class通过,分割
<view class="normal_view,test" />

3.目前所支持的选择 类选择器（微信小程序只支持这一种）、id选择器、标签选择器、组合选择器、伪类选择器（vue页面生效）

4.css变量

image.png 5.csss设置背景图片 通用的引入方式无论是h5还是小程序的化都采用base64的图，或者引用的是服务端的图片 6.字体图标 通用的方式就是直接引入icon线上的注意的是需要将http改成https

tempalte和block

虽然说tempalte和block效果都一样 但是block在各个平台有兼容 推荐使用template

框架

  1. page.json 配置页面的路由，标题的样式等信息
{
	//配置页面的路由，样式等信息，换可以自定义导航栏
	"pages": [{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "项目练习"
			}
		}, {
			"path": "pages/tab/first",
			"style": {
				"navigationBarTitleText": "tab1"
			}
		}, {
			"path": "pages/tab/second",
			"style": {
				"navigationBarTitleText": "tab2"
			}
		},
		{
			"path": "pages/second/index",
			"style": {
				"navigationBarTitleText": "练习测试",
				"navigationBarTitleStyle": "white", //仅支持white.black
				"navigationBarBackgroundColor": "#FF4500",
				"backgroundTextStyle": "light", //下拉的loading 样式 dark和lightl两种
				"enablePullDownRefresh": true //开启页面下拉刷新
				// "titleImage":""//导航栏图标地址
				// //"navigationStyle":"custom"

			}
		}
	],
	//配置全局的样式
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "项目练习",
		"navigationBarBackgroundColor": "#FF4500",
		"backgroundColor": "#fafafa"
	},
	//配置自定义组件的自动引入和注册
	"easycom": {
		"auto": true,
		"custom": { //自定义扫描规则
			"^all-(.*)": "@/components/all-$1.vue"

		}

	},
	//应用的tab
	"tabBar":{
	  "color":"#3F4DED", ///tab字体颜色
	  "selectColor":"#FF1493",//选中后的颜色
	  "backgroundColor":"#fafafa",//talbe背景色
	   "list":[
		{
			"pagePath": "pages/index/index",

			"text": "首恶"
		}, 
		   {"pagePath":"pages/tab/first","text":"tab1"},
		   {"pagePath":"pages/tab/second","text":"tab2"}
		]

	}
	



}

其他的参考uni-app官网

2.manifest.json（应用配置文件）

{
name:"test",//应用名称
appid:""，//云应用的id  DCloud 云分配
description："",//应用描述
networkTimeout:{ //网络超时时间
request:60000,//uni.request的请求超时时间默认6秒
connectSocket:60000,//uni.connectSocket的超时时间
uploadFile:60000,//uni.uploadFile的超时时间
downloadFile:60000,//uni.downloadFile的超时时间

}
//其他针对于不同环境的配置 app-plus h5 wx等
}

其他配置参考uni-app官网

3.vue.config.js webpack配置（只针对于vue页面生效）

  1. 自定义组件的引用
//1.常规的vue引用方式
src/component/组件名
import 组件名称 form '@/components/组件名'
  2.通过easycom自动注册
  //app.json
  "easycom":{
    "auto":true, //开始组件扫描
    "custom":{ //自定义扫描规则 src 下components 下的以all开头的组件都自动注册
        "^all-(.*)":"@/components/all-$1.vue"

    }

  }

image.png 特别注意的是uni-app中组件的声明周期与vue的声明周期相同，并没有页面界别的onLoad等

页面

getApp()//获取当前应用的实例，一般用于获取globalData getCurrentPage() 函数用于获取当前页面栈的实例

组件

avatar
文章
阅读
粉丝