目录
一、介绍
UniApp是一个基于Vue.js框架的跨平台应用开发框架，可以让开发者使用Vue.js语法编写一次代码，然后在多个平台上运行，包括iOS、Android、Web等。UniApp的目标是实现一套代码，多端运行，从而减少开发者的工作量和时间成本。
二、UniApp和原生开发的区别
-
开发语言和技术栈：
- 原生开发通常使用特定平台的开发语言和工具，如Java或Kotlin语言进行Android开发，Objective-C或Swift语言进行iOS开发。
- UniApp使用Vue.js作为主要开发语言，结合HTML和CSS，开发者可以使用熟悉的前端技术栈进行跨平台开发。
-
开发效率：
- UniApp可以实现一套代码，多端运行，大大提高了开发效率。开发者只需编写一次代码，就可以在多个平台上运行，而不需要针对每个平台单独开发。
- 原生开发需要分别针对不同的平台进行开发，需要熟悉各个平台的开发环境和技术栈，因此开发周期相对较长。
-
性能表现：
- 原生应用通常能够充分利用设备的硬件资源，性能表现较好。
- UniApp虽然在性能方面有一定的损耗，但在大多数情况下，性能仍然可以满足应用的需求，尤其是对于一般的业务应用而言。
-
平台适配：
- UniApp提供了一套统一的组件和API，可以在不同平台上实现一致的用户界面和功能。
- 原生开发需要针对不同的平台进行适配，因为不同的平台有不同的UI和交互规范，需要进行相应的调整和优化。
三、环境搭建
-
下载HBuilderX
HBuilderX-高效极客技巧 - 下载微信开发者工具
最终如果需要打包到微信小程序去预览运行的话，就要下载微信开发者工具了
微信开发者工具下载地址与更新日志 | 微信开放文档 - 创建uni-app项目
打开HBuilderX -> 文件 -> 新建 -> 项目,这样就可以打开新建页面，这下面三个框可以先不勾选，选择需要的vue版本然后点击创建。
- 运行项目
在浏览器运行
HBuilderX支持多种运行项目的方式，比如微信小程序或者是浏览器内运行
注：如果是第一次运行项目，控制台会提示要下载插件，这时候等待下载完成，然后重新运行项目就可以了。
在微信小程序内运行
第一次运行小程序需要配置一下开发者工具的安装路径
并且需要将开发者工具的服务端口打开，然后重新运行就可以了
四、目录结构
pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue：是我们的根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage：就是打包目录，在这里有各个平台的打包文件
pages：所有的页面存放目录
static：静态资源目录，例如图片等
components：组件存放目录
具体的配件项建议前往官网自行查阅详细资料
五、uni-app的生命周期
-
应用生命周期：
onLaunch(options): 应用初始化完成时触发，可以在这里进行一些全局的初始化操作。onShow(options): 应用启动或从后台进入前台时触发，可以在这里处理应用进入前台时的逻辑。onHide(): 应用从前台进入后台时触发，可以在这里处理应用进入后台时的逻辑。onError(error): 应用发生错误时触发，可以在这里处理错误信息。
-
页面生命周期：
onLoad(options): 页面加载时触发，可以在这里获取页面参数。onShow(): 页面显示时触发，可以在这里处理页面展示时的逻辑。onReady(): 页面初次渲染完成时触发，表示页面已经准备好，可以和视图层进行交互。onHide(): 页面隐藏时触发，可以在这里处理页面隐藏时的逻辑。onUnload(): 页面卸载时触发，可以在这里进行页面资源的释放和清理。
六、组件
使用uni-app自带的组件在跨平台兼容性方面有很大的优势
- UniApp内置组件是跨平台的，可以在多个平台上运行，包括iOS、Android、Web等。开发者只需编写一套代码，就可以在不同平台上运行，无需针对每个平台单独开发。
- 原生组件是特定平台的组件，例如Android和iOS都有自己的一套UI组件库，开发者需要针对不同的平台分别进行开发和适配。
-
视图容器：
view: 视图容器，类似于HTML中的div元素，用于包裹其他组件。scroll-view: 滚动视图容器，用于显示可滚动的内容。
-
基础内容：
text: 文本内容，用于显示文字。icon: 图标组件，用于显示图标。progress: 进度条组件，用于显示进度。
-
表单组件：
input: 输入框组件，用于用户输入文本。textarea: 多行输入框组件，用于用户输入多行文本。button: 按钮组件，用于触发事件或提交表单。checkbox: 复选框组件，用于多选。radio: 单选框组件，用于单选。
-
媒体组件：
image: 图片组件，用于显示图片。video: 视频组件，用于播放视频。
-
导航组件：
navigator: 导航组件，用于跳转页面或打开链接。
-
列表组件：
list: 列表容器组件，用于展示列表数据。cell: 列表项组件，用于展示列表中的每一项数据。
-
布局组件：
flex: 弹性布局容器，用于实现弹性布局。grid: 栅格布局容器，用于实现网格布局。
-
动画组件：
animation: 动画组件，用于实现动画效果。
-
其他组件：
canvas: 画布组件，用于绘制图形和动画。
七、API
uni-app提供了很多的js api，包括路由、拦截器、数据缓存方面等。
这里主要介绍几个常用的api
1.定时器
setTimeout(callback, delay, rest)
设定一个定时器。在定时到期以后执行注册的回调函数
clearTimeout(timeoutID)
取消由 setTimeout 设置的定时器。
<script lang="ts">
let timer: ReturnType<typeof setTimeout> | null = null;
export default {
data() {
return {};
},
methods: {
onSetTimeout() {
timer = setTimeout(() => {
console.log("setTimeout");
}, 1000);
},
clearTimer() {
// clearTime
if (timer) {
clearTimeout(timer);
timer = null;
}
},
},
beforeUnmount() {
// clearTime
this.clearTimer();
},
};
</script>
2.uni.navigateTo(OBJECT)
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。
//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});
八、插件
uniapp提供了大量官方或第三方插件可以通过官方插件市场来下载插件 DCloud 插件市场
可以点击 工具->插件安装来快捷安装插件
在这里可以看到已经安装的插件和推荐安装的插件
可以在插件市场选择想要的插件然后点击一键导入到hbuilderx
九、其他
除了以上这些内容之外uni-app还提供了一些别的产品例如UniCloud，他可以为开发者提供云端支持，助力开发者快速构建和部署UniApp应用。UniCloud平台集成了丰富的云端资源和服务，包括数据库、存储、函数、消息推送等，开发者可以在UniCloud平台上进行应用开发、测试和部署，无需搭建和维护自己的后端服务器。
如果有需要可以自行去了解该方面的内容。
654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
