uniapp

uniapp

开发规范

为了实现多端，综合考虑综合速度、运行性能等因素，uni-app约定了如下开发规范：

• 页面文件遵循[Vue单文件组件（SFC）规范]
• 组件标签靠近小程序规范，详见[uni-app组件规范]
• 接口能力（JS API）靠近微信小程序规范，但需将其植入wx为uni，详见[uni-app接口规范]
• 数据绑定及事件处理同Vue.js规范，同时补充了应用程序及页面的生命周期
• 为自己多端运行，建议使用flex布局进行开发

App端的Nvue开发

uni-app App端内置了一个基于weex改进的原生渲染引擎，提供了原生渲染能力

在App端，如果使用vue页面，则使用webview渲染；如果使用Nvue（native vue的缩写），则使用原生渲染

HTML5+

uni-app App端内置了HTML5+引擎，让js可以直接调用丰富的原生能力

一些比较复杂的功能可以直接调用app原生的插件来实现

只能用App端去实现，无法在H5和小程序中使用

开发环境

HbuilderX

创建项目可以直接在编辑器上创建项目，也可以使用vue-cli创建项目

目录结构

.hbuilderx 运行时产生的一个临时的目录

pages 存放页面的目录

static 静态资源存放目录

App.vue 应用入口文件和小程序app.js类似

main.js 应用入口文件 注册vue等

mainfest.json 设置各个平台的配置文件

pages.json 页面的配置文件

自定义目录

common 存放公共的文件的目录

components 存放自定义组件目录

store 存放vuex目录

unpackage 编译后的文件存放目录

模板语法

v-bind：动态绑定，组件属性要使用data中定义的数据变量，或者组件属性要是使用表达式，要使用v-bind指定

**v-on：**监听事件

**数据绑定：**定义在data中的变量可以在组件中或者模板中使用，data中的数据改变则组件和模板中的数据也跟着改变

**v-model：**双向绑定，即数据在前台发生改变时，data中的数据也会发生改变，并且前台之前引用的数据也会发生改变

条件判断： v-if，v-else，v-else-if和vue中的条件判断一样

**v-if：**条件判断，决定某个内容或者区块是否挂载

**v-show：**条件判断，是否显示，只是隐藏了，这个元素还存在于页面中

**block：**空标签，当多个标签不被显示时，可以使用block包裹然后使用v-if来控制显示与隐藏

**v-for：**循环，可用用列表渲染

事件绑定：

​ 使用v-on：可以简写成@绑定事件

​ 使用 .stop 可以阻止事件穿透即事件冒泡，就是vue中的修饰符.stop

	父级
	子集

**基础组件：**uni-app中已经封装的组件可以不要引用直接使用，根据需要设置属性即可，比如：滚动组件scroll-view、轮播组件swiper等

**自定义组件：**自定义组件和vue的自定义组件一样，但是在uniapp中可以直接引用，不用安装注册引入

父传子通过props来传递：

• 先在父组件上定义要传递的数据方法然后再在子组件上通过props来接收，props接收时有属性要求type和默认值default，然后再子组件中通过v-bind接收数据

子传父通过$emit来传递：

• 先在父组件中自定义一个事件，然后再子组件中通过$emit(参数1，参数2)来触发父组件的自定义事件，并传递数据，第一个参数是自定义事件名，第二个参数是传递的参数
• 然后父组件通过监听自定的事件中函数自带的参数来接收子组件传递过来的参数

子组件可以自定义插槽slot，让父组件可以自定义要显示的内容

常用API： 和小程序的api类似

页面布局：

可以使用scss预编辑器，引入css文件等，rpx可以根据不同的设备进行换算，以iPhone6，750px来进行换算，1px = 2rpx

条件编译

因为每个平台都有自己的一些特性，所以一些平台无法跨域，所以就需要大量的v-if，但是这样会造成代码执行效率低下并且管理混乱，所以就需要条件编译

条件编译就是用不同的特殊的注释作为标记，在编译时根据这些特殊的注释、将注释里面的代码编译到不同的平台

**写法：**以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

	默认的

在html，css，js中都适用

生命周期

应用的生命周期

• 应用生命周期仅可在App.vue中监听，在其它页面监听无效。

页面的生命周期

• nvue 页面weex编译模式支持的生命周期同weex

组件的生命周期

• 组件支持的生命周期，与vue标准组件的生命周期相同

底部tabbar配置

在 pages.json 中提供 tabBar 配置

"tabBar": {
	  "color": "#7A7E83",文字默认颜色
	  "selectedColor": "#3cc51f",选中时文字的颜色
	  "borderStyle": "black",tabbar 上边框的颜色
	  "backgroundColor": "#ffffff",背景色
	  "list": [{
	    "pagePath": "pages/index/index",
	    "iconPath": "static/sy.png",
	    "selectedIconPath": "./static/sy2.png",
	    "text": "首页"
	   }, {
	    "pagePath": "pages/about/about",页面路径
	    "iconPath": "static/my.png",默认图标
	    "selectedIconPath": "static/my2.png",选中时的图标
	    "text": "我的"文本
	   }]
	},

平台配置

配置安卓模拟器，微信小程序，模拟器使用夜神

postman

postman使用过程

• My Workspace里面新建HTTP Request

• 在Get区域输入请求地址，设置请求头，params等，然后send进行测试，成功会在body下面显示数据

• 在Authorization区域加上Bearer Token

uView

uView是一个基于uni-app生态的一个UI框架，框架中有指南，框架，js等等

封装网络请求

这是一个封装完整的网络请求，以及修改以后的请求拦截和响应拦截

// 这里的vm，就是我们在vue文件里面的this，所以我们能在这里获取vuex的变量，比如存放在里面的token变量
const install = (Vue, vm) => {
	// 此为自定义配置参数，具体参数见上方说明
	Vue.prototype.$u.http.setConfig({
		baseUrl: 'https://api.shop.eduwork.cn', // 请求的本域名
		// method: 'POST',
		// 设置为json，返回后会对数据进行一次JSON.parse()
		dataType: 'json',
		showLoading: true, // 是否显示请求中的loading
		loadingText: '请求中...', // 请求loading中的文字提示
		loadingTime: 800, // 在此时间内，请求还没回来的话，就显示加载中动画，单位ms
		originalData: true, // 是否在拦截器中返回服务端的原始数据
		loadingMask: true, // 展示loading的时候，是否给一个透明的蒙层，防止触摸穿透
		// 配置请求头信息
		header: {
			'content-type': 'application/json;charset=UTF-8'
		},
	});
	
	// 请求拦截，配置Token等参数
	Vue.prototype.$u.http.interceptor.request = (config) => {
		// 引用token
		// 方式一，存放在vuex的token，假设使用了uView封装的vuex方式
		// 见：https://uviewui.com/components/globalVariable.html
		// config.header.token = vm.token;
		// config.header.Authorization = "Bearer " + vm.access_token;
		config.header.Authorization = "Bearer " + " eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwczpcL1wvYXBpLnNob3AuZWR1d29yay5jblwvYXBpXC9hdXRoXC9sb2dpbiIsImlhdCI6MTYzMjcyODQ4NSwiZXhwIjoxNjMzMDg4NDg1LCJuYmYiOjE2MzI3Mjg0ODUsImp0aSI6IjRZb1NqYzZUakFCSlliaTUiLCJzdWIiOjIsInBydiI6IjIzYmQ1Yzg5NDlmNjAwYWRiMzllNzAxYzQwMDg3MmRiN2E1OTc2ZjcifQ.hfqRk6weC_N4kZtmaKCUDZQbZJdA5bDSWFJYcrUbcUA";
		
		// 方式二，如果没有使用uView封装的vuex方法，那么需要使用$store.state获取
		// config.header.token = vm.$store.state.token;
		
		// 方式三，如果token放在了globalData，通过getApp().globalData获取
		// config.header.token = getApp().globalData.username;
		
		// 方式四，如果token放在了Storage本地存储中，拦截是每次请求都执行的
		// 所以哪怕您重新登录修改了Storage，下一次的请求将会是最新值
		// const token = uni.getStorageSync('token');
		// config.header.token = token;
		// config.header.Token = 'xxxxxx';
		
		// 可以对某个url进行特别处理，此url参数为this.$u.get(url)中的url值
		// if(config.url == '/user/login') config.header.noToken = true;
		// 最后需要将config进行return
		return config;
		// 如果return一个false值，则会取消本次请求
		// if(config.url == '/user/rest') return false; // 取消某次请求
	}
	
	// 响应拦截，判断状态码是否通过
	Vue.prototype.$u.http.interceptor.response = (res) => {
		// 响应状态码
		const {statusCode, data} = res;
		
		if(statusCode < 400) {
			// res为服务端返回值，可能有code，result等字段
			// 这里对res.result进行返回，将会在this.$u.post(url).then(res => {})的then回调中的res的到
			// 如果配置了originalData为true，请留意这里的返回值
			return data;
		} else if(statusCode == 400) {
			// 400 错误的请求
			vm.$u.toast(data.message)
			// console.log(res)
			return false;
		} else if(statusCode == 401) {
			// 假设401为token失效，这里跳转登录
			vm.$u.toast('验证失败，请重新登录');
			setTimeout(() => {
				// 此为uView的方法，详见路由相关文档
				vm.$u.route('/pages/user/login')
			}, 1500)
			return false;
		} else if(statusCode == 422) {
			// 422 表单验证未通过
			const {errors} = data;
			// console.log(Object.values(errors)[0])
			vm.$u.toast(Object.values(errors)[0][0])
			return false;
		} else {
			// 如果返回false，则会调用Promise的reject回调，
			// 并将进入this.$u.post(url).then().catch(res=>{})的catch回调中，res为服务端的返回值
			return false;
		}
	}
	// 增加patch请求
	vm.$u.patch = (url, params = {}, header = {}) => {
		// 模拟patch请求
		const _params = {
			...params,
			_method: 'PATCH'
		}
		return vm.$u.post(url, _params, header)
	}
}

export default {
	install
}

处理patch请求

// 增加patch请求
	vm.$u.patch = (url, params = {}, header = {}) => {
		// 模拟patch请求
		const _params = {
			...params,
			_method: 'PATCH'
		}
		return vm.$u.post(url, _params, header)
	}

集中管理api

// common/http.api.js

// 如果没有通过拦截器配置域名的话，可以在这里写上完整的URL(加上域名部分)
// let indexUrl = '/api/index'; //api数量过多的话就不写在这里

// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
const install = (Vue, vm) => {
	// 定义api属性
	vm.$u.api = {}
	
	// 首页
	vm.$u.api.getIndex = (params = {}) => vm.$u.get('/api/index', params)
	
	// 认证相关
	// 登录
	vm.$u.api.authLogin = params => vm.$u.post('/api/auth/login', params) 
	
	
	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
	// vm.$u.api = {
	// 	getIndex,
	// 	authLogin,
	// };
}

export default {
	install
}

使用集中管理的api

// 使用promise调用getIndex接口
this.$u.api.getIndex().then(res => {
	console.log(res);
})

// 使用async await调用getIndex接口
const res = await this.$u.api.getIndex()
console.log(res)

vuex的实现

在全局动态响应的变量，我们首先想到的就是vuex

在uni-app中，实现全局变量的方法有：

• 本地存储：一种持久存储的方式，类似于web中的Local Storage

  • 当我们需要将一个变量保存很长一段时间，比如用户的登录状态(Token)，才会使用这种方式

• 配置文件

  • 配置文件，顾名思义，就是把一些变量写入到js文件中，再通过export default的形式导出

• 挂载到Vue.prototype

  • 使用挂载到Vue.prototype的方式，需要在根目录的main.js中进行，在页面中，我们可以使用this.xxx的形式获取变量

• globalData

  • 这个方式，最早是微信小程序特有的，它无法使用vuex进行全局状态的管理，就造了这个方式。

• vuex

  • Vuex其实就是把能够进行全局动态响应的变量进行统一管理的一种状态管理模式

  传统写法简单但是很繁琐，但是在uView中可以变得不那么繁琐

  具体实现：

  先创建一个store目录，在创建index.js文件，在将uview官网上对应的内容复制到上面，然后再main.js里引入

  新建’/store/$u.mixin.js’，并复制uview官网上对应的内容到其中

  如果想要访问vuex上是属性，可以直接

  // vuex上的属性的访问
  console.log(this.vuex_version)
  // 新增vuex方法
  this.$u.vuex('vuex_name', 'Tom')
  console.log(this.vuex_name)
  
  // 需要永久存储，且下次APP启动需要取出的，在state中的变量名
  let saveStateKeys = ['vuex_user', 'vuex_token', 'vuex_name'];
  
  // 如果vuex_version无需保存到本地永久存储，无需lifeData.vuex_version方式
  vuex_version: '1.0.1',
  vuex_name: lifeData.vuex_name ? lifeData.vuex_name : ''
  

  使用组件时注意点

  骨架屏各种属性配置后，如果还是显示不出来，就需要判断循环的列表是否存在数据，如果有就循环，没有就随便循环

  登录成功之后跳转回源页可以使用uni-app中的getCurrentPages()

  getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序输出，第一个元素为首页，最后一个元素为当前页面

获取来源页

在uni-app中想要获取来源页，就是从那个页面跳转过来的，使用getCurrentPages()

getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。

注意： getCurrentPages()仅用于展示页面栈的情况，请勿修改页面栈，以免造成页面状态错误。

唯一标识符

guid(length = 32, firstU = true, radix = 62)

该函数可以生产一个全局唯一、随机的guid，默认首字母为u，可以用于当做元素的id或者class名等需要唯一，随机字符串的地方，因为id或者class不能以数字开头。