移动端开发之UniApp

移动端开发

React Native 和 Uni-app 都是用于开发跨平台移动应用程序的框架，它们有一些相似之处，但也有一些区别。

React Native

React Native 是由 Facebook 推出的开源框架，用于构建原生移动应用程序。它的主要特点包括：

基于 React: React Native 使用 React 框架的语法和组件模型，使得开发者可以使用 JavaScript 构建移动应用程序。
原生组件: React Native 允许开发者使用 JavaScript 编写组件，并将这些组件渲染成原生组件，以提供更接近原生应用的性能和用户体验。
跨平台: React Native 支持同时构建 iOS 和 Android 应用程序，开发者可以使用相同的代码库来构建跨平台的移动应用。
生态系统: React Native 有一个庞大的生态系统，有大量的第三方库和组件可供开发者使用，可以加速应用程序的开发过程。

Uni-app

Uni-app 是 DCloud 推出的开源框架，用于构建跨平台的移动应用程序。它的主要特点包括：

基于 Vue: Uni-app 使用 Vue 框架的语法和组件模型，使得开发者可以使用熟悉的技术栈来构建移动应用程序。
编译到原生代码: Uni-app 提供了一套编译器，可以将开发者编写的代码编译成原生的 iOS 和 Android 应用程序，从而实现跨平台开发。
多端支持: Uni-app 不仅支持 iOS 和 Android，还支持微信小程序、H5 等多个平台，开发者可以使用同一套代码来开发不同平台的应用。
生态系统: Uni-app 也有一个庞大的生态系统，提供了丰富的插件和组件，可以帮助开发者快速构建功能丰富的移动应用程序。

主要区别

技术栈: React Native 使用 React，而 Uni-app 使用 Vue，开发者可以根据自己的技术背景和喜好选择合适的框架。
原生组件渲染: React Native 将组件渲染成原生组件，而 Uni-app 则是将代码编译成原生代码。这导致 React Native 在性能和体验上可能会更接近原生应用。
多端支持: Uni-app 支持更多的平台，包括微信小程序和 H5 等，而 React Native 主要专注于 iOS 和 Android。
生态系统: React Native 的生态系统更加成熟，但 Uni-app 也在不断发展壮大。

综上所述，React Native 和 Uni-app 都是流行的跨平台移动应用程序开发框架，选择哪一个取决于项目需求、团队技术栈和个人喜好。本文重点讲解Uni-app 。

Uni-app

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

uni-app支持通过可视化界面（HBuilderX）、vue-cli命令行两种方式快速创建项目。

全局文件

APP.vue

App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素，也就是没有<template>。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

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

main.js 入口

main.js是 uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex。

首先引入了Vue库和App.vue，创建了一个vue实例，并且挂载vue实例。

pages.json 页面路由

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

manifest.json 应用配置

manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。

内置组件

视图容器

所有的视图组件，包括view、swiper等，本身不显示任何可视化元素。它们的用途都是为了包裹其他真正显示的组件。

视图容器	描述
view	视图容器
scroll-view	可滚动视图区域
swiper	滑块视图容器

uni-ui

uni-ui是DCloud提供的一个跨端ui库，它是基于vue组件的、flex布局的、无dom的跨全端ui框架。

uni-ui不包括基础组件，它是基础组件的补充。

使用

uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别组件等多种使用方式

API

基础

日志打印

使用 console 打印日志：

console.debug
console.info
console.warn
console.error

定时器

API	说明
setTimeout(callback, delay, rest)	设定一个定时器。在定时到期以后执行注册的回调函数
clearTimeout(timeoutID)	取消由 setTimeout 设置的定时器。
setInterval(callback, delay, rest)	设定一个定时器。按照指定的周期（以毫秒计）来执行注册的回调函数
clearInterval(intervalID)	取消由 setInterval 设置的定时器。

拦截器

添加拦截器

uni.addInterceptor(STRING, OBJECT)

STRING 参数说明

需要拦截的api名称，如：uni.addInterceptor('request', OBJECT) ，将拦截 uni.request()

注意：

仅支持异步接口，如：uni.setStorage(OBJECT)，暂不支持同步接口如：uni.setStorageSync(KEY,DATA)

示例：

uni.request({
    url: 'request/login', //仅为示例，并非真实接口地址。
    success: (res) => {
        console.log(res.data);
    }
});

uni.addInterceptor('request', {
  invoke(args) {
    args.url = 'https://www.example.com/'+args.url;   // request 触发前拼接 url 
  },
  success(args) {
    // 请求成功后，修改code值为1
    args.data.code = 1
  }, 
  fail(err) {
    console.log('interceptor-fail',err)
  }, 
  complete(res) {
    console.log('interceptor-complete',res)
  }
})

网络请求

发起请求

queryRegional() {
		uni.request({
			url: '/regional/list',
			data: JSON.stringify(data),
			method: "POST",
			header: {
				'content-type': 'application/json' //自定义请求头信息
			},
			success: (res) => {
				let regionalList = [];
				if (res.statusCode == 200) {
					regionalList.push(res.data);
					this.regionalList = regionalList;
				}
			},
			fail: (res) => {
				this.regionalList = []
				console.log(res)
			}
		});
	},

上传下载


uni.uploadFile(OBJECT)	将本地资源上传到开发者服务器，客户端发起一个 `POST` 请求
uni.downloadFile(OBJECT)	下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

WebSocket

uni.connectSocket(OBJECT)

页面和路由

API	说明
uni.navigateTo(OBJECT)	保留当前页面，跳转到应用内的某个页面，使用`uni.navigateBack`可以返回到原页面。
uni.navigateBack(OBJECT)	关闭当前页面，返回上一页面或多级页面。可通过 `getCurrentPages()` 获取当前的页面栈，决定需要返回几层。
uni.redirectTo(OBJECT)	关闭当前页面，跳转到应用内的某个页面。

页面跳转

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面，跳转到B页面
uni.navigateTo({
	url: 'B?id=1'
});

// 此处是B页面，跳转到C页面
uni.navigateTo({
	url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
	delta: 2
});

获取当前页面栈

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

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

refresh(){
				let page = getCurrentPages();
				let beforPage = page[page.length - 2];
				uni.navigateBack({
					success:()=>{
						beforPage.$vm.refresh();//调用上个页面的方法
					}
				})
			}

每个页面实例的方法属性列表：

方法	描述	平台说明
page.$getAppWebview()	获取当前页面的webview对象实例	App
page.$vm	当前页面的 Vue 实例
page.route	获取当前页面的路由

$vm

当前页面的 Vue 实例

通过页面的 Vue 实例可以获取页面的数据、调用页面上的方法以及监听页面的生命周期等

const page = getCurrentPages()[0];
const vm = page.$vm;

// 获取页面数据
let title = vm.$data.title;
// 调用页面方法
vm.test()
// 监听生命周期 (小程序端部分其他生命周期需在页面选项中配置过才可生效)
vm.$on('hook:onHide', () => {
  console.log('onHide');
});

数据缓存

API	描述
uni.setStorage(OBJECT)	将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。
uni.setStorageSync(KEY,DATA)	将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。
uni.getStorage(OBJECT)	从本地缓存中异步获取指定 key 对应的内容。
uni.getStorageSync(KEY)	从本地缓存中同步获取指定 key 对应的内容。
uni.removeStorage(OBJECT)	从本地缓存中异步移除指定 key。
uni.removeStorageSync(KEY)	从本地缓存中同步移除指定 key。
uni.clearStorage()	清理本地数据缓存。
uni.clearStorageSync()	同步清理本地数据缓存。

示例：

uni.setStorage({
	key: 'storage_key',
	data: 'hello',
	success: function () {
		console.log('success');
	}
});
//
try {
	uni.setStorageSync('storage_key', 'hello');
} catch (e) {
	// error
}

uni-app的Storage在不同端的实现不同：

H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
App端为原生的plus.storage，无大小限制，不是缓存，是持久化的
各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
百度小程序策略详见、字节跳动小程序策略详见

位置

获取位置

媒体

图片

文件

视频

uView

uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序等多个平台(引言自uni-app网)。

表单

<u--form labelPosition="left" labelWidth="190" :model="formData" :rules="rules" ref="uForm">
		
		<u-form-item label="姓名" prop="name" borderBottom ref="item1">
			<u--input v-model="formData.name" border="none" placeholder="请输入姓名"></u--input>
		</u-form-item>
		<u-form-item label="地址" prop="address" borderBottom>
			<u--input v-model="formData.address" placeholder="请输入地址" border="none" ></u--input>
		</u-form-item>
		<u-form-item label="故障发生时间" prop="hitchTime" borderBottom @click="dateTimeShow = true">
			<u--input v-model="formData.hitchTime" disabled disabledColor="#ffffff" border="none"
				placeholder="请选择故障发生时间"></u--input>
		</u-form-item>
	</u--form>

选择器 picker

<u-picker :show="showRegional" :columns="regionalList" keyName="name" @cancel="showRegional = false"
				@confirm="changeRegional"></u-picker>
			<u-datetime-picker :show="dateTimeShow" mode="datetime" ref="datetimePicker" :formatter="formatter"
				@cancel="dateTimeShow = false" @confirm="changeTime"></u-datetime-picker>

时间选择器 datetime-picker

按钮

<u-button class="button-list-child" text="重置" @click="reset"></u-button>

README

作者：银法王

参考：

uni-app官网

uView官网

前端 > Uni-app

#前端 #Uni-app

移动端开发之UniApp

http://jackpot-lang.online/2023/03/08/前端之路/移动端开发之UniApp/

作者

Jackpot

发布于

2023年3月8日

许可协议

分布式数据库中间件ShardingSphere 上一篇

低代码平台系统设计下一篇