UniApp实战分享：从零开始构建跨平台应用

目录

一、Uni-app简介

二、开发工具        

三、快速上手 

四、项目结构

五、组件/标签的变化 

六、生命周期 

七、插件 

---

一、Uni-app简介

Uni-app是一个基于Vue.js框架的跨平台开发解决方案，开发者可以使用一套代码编写应用，并将其轻松地发布到iOS、Android、Web（响应式）以及各种小程序平台（包括微信、支付宝、百度、头条、飞书、QQ、快手、钉钉、淘宝）以及快应用等多个平台。Uni-app的特点包括开发便捷、跨平台支持广泛、代码复用性高等，是现代移动应用开发的一种重要选择。

官网：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架 

二、开发工具        

1. Hbuilderx （开发与编译工具）

2. 微信小程序开发工具（微信小程序预览和真机测试）

三、快速上手 

 1.新建项目

2.运行项目

可以点击运行图标或者工具栏上方的运行去选择需要运行的方式去运行 

注意如果是第一次运行小程序端的话需要在运行设置配置一下小程序开发平台的路径 

3.发行打包

HBuilderX提供了各种打包操作，包括原生APP、web网页、各类小程序等。具体操作可以自行查阅官网

四、项目结构

pages.json ：文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等
manifest.json ：文件是应用的配置文件，用于指定应用的名称、图标、权限等。
App.vue：是我们的根组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。
main.js：是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。
uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
unpackage：就是打包目录，在这里有各个平台的打包文件
pages：所有的页面存放目录
static：静态资源目录，例如图片等
components：组件存放目录

五、组件/标签的变化 

以前我们用的是HTML标签，比如 <div>，但现在我们用的是小程序组件，比如 <view>。虽然它们都是用尖括号包围起来的一段英文，但它们之间有些区别。HTML标签是浏览器内置的，而组件则是可以自由扩展的，就像你可以把一段JavaScript封装成函数或模块一样，也可以把一个UI控件封装成一个组件。

uni-app遵循小程序规范，提供了一些内置组件。

下面是HTML标签和uni-app内置组件的对应关系：

• <div> 改成了 <view>
• <span>、<font> 改成了 <text>
• <a> 改成了 <navigator>
• <img> 改成了 <image>
• <input> 现在只表示输入框了。在以前的HTML规范中，<input> 不仅包含输入框，还有单选框、复选框、时间选择、日期选择、文件选择等功能。但在uni-app和小程序规范中，<input> 只表示输入框。其他功能有各自的组件或API
• <form>、<button>、<label>、<textarea>、<canvas>、<video> 这些还是一样的。
• <select> 改成了 <picker>
• <iframe> 改成了 <web-view>
• <ul>、<li> 不再使用，都用 <view> 替代。通常使用 uList 组件来制作列表。
• <audio> 不再推荐使用，改成了使用API。背景音频API文档。其实老的HTML标签也可以在uni-app中使用，uni-app编译器会在编译时将老标签转换为新标签，比如将 <div> 编译成 <view>。但不建议这样做，因为在调试H5端时容易混淆。

六、生命周期 

1. 应用生命周期函数：

   • onLaunch(options): 当小程序初始化完成时触发，全局只触发一次。
   • onShow(options): 当小程序启动，或从后台进入前台显示时触发。
   • onHide(): 当小程序从前台进入后台时触发。

2. 页面生命周期函数：

   • onLoad(options): 监听页面加载，页面创建时执行。
   • onShow(): 监听页面显示。
   • onReady(): 监听页面初次渲染完成。
   • onHide(): 监听页面隐藏。
   • onUnload(): 监听页面卸载。

3. 组件生命周期函数：

   • beforeCreate(): 组件实例刚刚被创建，属性计算之前执行。
   • created(): 组件实例已经完全创建，属性已经计算完成。
   • beforeMount(): 组件挂载开始之前执行。
   • mounted(): 组件挂载完成之后执行。
   • beforeUpdate(): 组件更新开始之前执行（数据变化，虚拟 DOM 重新渲染之前）。
   • updated(): 组件更新完成之后执行。
   • beforeDestroy(): 组件销毁前执行。
   • destroyed(): 组件销毁后执行。

七、插件 

 在hbuilderx的插件市场当中提供了多种多样的插件，支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型。

可以通过应用内的工具栏跳转至插件市场或是直接输入网址跳转DCloud 插件市场 

 

在这里可以看到一些已经安装的插件和想要安装的新插件 

 

在插件市场点击按钮可以意见安装插件到应用中