UNIAPP 技术分享

hinata_23

已于 2024-04-23 18:54:15 修改

阅读量1.2k

点赞数 25

文章标签： uni-app

于 2024-04-23 18:50:07 首次发布

本文链接：https://blog.csdn.net/hinata_23/article/details/138135517

版权

UNIAPP 技术分享（1）

uni-app 介绍
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。
开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、微信小程序等多个平台，保证其正确运行并达到优秀体验。

uni-app 继承自 Vue.js，提供了完整的 Vue.js 开发体验。

uni-app 组件规范和扩展api与微信小程序基本相同。

有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app ，开发出兼容多端的应用。

uni-app提供了条件编译优化，可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。

uni-app打包到App时仍然使用了5+引擎，5+的所有能力都可以在uni-app中可以使用。在App端运行性能和微信小程序基本相同。

对于技术人员而言：不用学那么多的平台开发技术、研究那么多前端框架，学会基于vue的uni-app就够了。
对于公司而言：更低成本，覆盖更多用户，uni-app是高效利器。
uni-app多端演示

为方便开发者体验uni-app的组件、接口、模板，DCloud发布了Hello uni-app演示程序（代码已开源，详见Github），Hello uni-app实现了一套代码，同时发布到iOS、Android、微信小程序。

一、什么是 UNIAPP，介绍 UNIAPP 用途和技术基本原理。

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
据 DCloud 称， uni-app 在手，做啥都不愁。即使不跨端，uni-app也是更好的小程序开发框架（详见）、更好的App跨平台框架、更方便的H5开发框架。不管领导安排什么样的项目，都可以快速交付，不需要转换开发思维、不需要更改开发习惯。
据 DCloud 称，很多人以为小程序是微信先推出的，其实 DCloud 才是这个行业的始作俑者。DCloud于2012年开始研发小程序技术，优化webview的功能和性能，并加入W3C和HTML5中国产业联盟，推出了HBuilder开发工具，为后续产业化做准备。2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是B/S模式的轻应用，而是能接近原生功能、性能的动态App，并且即点即用。

功能架构图：

编译到小程序能力通过缝合美团前端团队的mp-vue实现。
原生渲染能力通过缝合阿里巴巴团队的weex实现。
uniapp提供向微信小程序看齐的内置组件和api。

得益于双线程模型导致的渲染性能劣势，uniapp使用webview渲染APP时性能亦不如传统的5+Hybrid模式

二，如何创建运行发布项目？介绍通过命令行创建项目、运行或发布到各平台

1）全局安装 vue-cli：

npm install -g @vue/cli

2）创建项目：

vue create -p dcloudio/uni-preset-vue 项目名称

3）运行项目：

npm run dev:%PLATFORM%

4）发布项目：

npm run build:%PLATFORM%

三、开发规范

uni-app 使用vue的语法结合小程序的标签和API。为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

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

示例:

以下是一个简单的Uni-app示例代码，用于创建一个包含一个按钮的页面，并在按钮点击时弹出一个提示框：

<template>
  <view class="container">
    <view class="content">
      <text class="title">Welcome to Uni-app!</text>
      <button @click="showAlert">Click Me!</button>
    </view>
  </view>
</template>

<script>
  export default {
    methods: {
      showAlert() {
        uni.showToast({
          title: 'Hello Uni-app!',
          icon: 'none'
        });
      }
    }
  }
</script>

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  .content {
    text-align: center;
  }
  .title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #007AFF;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
  }
  button:hover {
    background-color: #0056b3;
  }
</style>

什么是 uni-app
uni-app 是一个使用vue的语法 + 微信小程序的标签和API的跨平台前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台，几乎覆盖所有流量端。
uni-app 具有跨端数量更多、性能体验更优秀、学习成本低、开发成本低等几大关键优势。
使用 uni-app 的前置条件
不要认为uni-app 可以跨多端，就感觉开发难度会直线上升。如果说，你开发过小程序，恰好又会vue，那么你的学习成本会非常的低。如果你原生小程序与vue 都没有接触过的话，我建议你花一些时间，看一看他们的官方文档。再回来学习uni-app。
为了更好的跨端开发，参考uni-app 统一规范：

页面组件我们要遵循Vue 单文件组件 (SFC) 规范
组件标签靠近微信小程序规范
接口能力（JS API）靠近微信小程序规范
数据绑定及事件处理靠近Vue.js 规范，同时补充了App及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
开发工具
毫无疑问，首选使用官方推出的HBuilderX 编辑器
可视化的方式比较简单，HBuilderX 内置相关环境，开箱即用，无需配置node 。

文件夹 PATH 列表

│ ├─code
│ │ ├─hello-uni
│ │ │ │ App.vue
│ │ │ │ main.js
│ │ │ │ manifest.json
│ │ │ │ pages.json
│ │ │ │ uni.scss
│ │ │ │ unpackage
│ │ │ │
│ │ │ ├─cnponents
│ │ │ │ │ a.vue
│ │ │ │ │ b.vue
│ │ │ │ │ test.vue
│ │ │ │ │
│ │ │ │ └─uni-calendar
│ │ │ │ calendar.js
│ │ │ │ uni-calendar-item.vue
│ │ │ │ uni-calendar.vue
│ │ │ │ util.js
│ │ │ │
│ │ │ ├─pages
│ │ │ │ ├─contact
│ │ │ │ │ contact.vue
│ │ │ │ │
│ │ │ │ ├─detail
│ │ │ │ │ detail.vue
│ │ │ │ │
│ │ │ │ ├─home
│ │ │ │ │ home.vue
│ │ │ │ │
│ │ │ │ ├─index
│ │ │ │ │ index.vue
│ │ │ │ │
│ │ │ │ ├─list
│ │ │ │ │ list.vue
│ │ │ │ │
│ │ │ │ ├─message
│ │ │ │ │ message.vue
│ │ │ │ │
│ │ │ │ ├─navigator
│ │ │ │ │ navogator.vue
│ │ │ │ │
│ │ │ │ └─uni-style
│ │ │ │ a.css
│ │ │ │ uni-style.vue
│ │ │ │
│ │ │ └─static
│ │ │ │ logo.png
│ │ │ │
│ │ │ ├─fonts
│ │ │ │ iconfont.css
│ │ │ │ iconfont.eot
│ │ │ │ iconfont.svg
│ │ │ │ iconfont.ttf
│ │ │ │ iconfont.woff
│ │ │ │ iconfont.woff2
│ │ │ │
│ │ │ └─tabs
│ │ │ contact-active.png
│ │ │ contact.png
│ │ │ home-active.png
│ │ │ home.png
│ │ │ message-active.png
│ │ │ message.png
│ │ │
│ │ └─hm_shop
│ │ │ App.vue
│ │ │ main.js
│ │ │ manifest.json
│ │ │ pages.json
│ │ │ uni.scss
│ │ │ unpackage
│ │ │
│ │ ├─cnponents
│ │ │ ├─goods-list
│ │ │ │ goods-list.vue
│ │ │ │
│ │ │ ├─news-item
│ │ │ │ news-item.vue
│ │ │ │
│ │ │ └─uni-goods-nav
│ │ │ uni-goods-nav.vue
│ │ │
│ │ ├─pages
│ │ │ ├─cart
│ │ │ │ cart.vue
│ │ │ │
│ │ │ ├─contact
│ │ │ │ contact.vue
│ │ │ │
│ │ │ ├─goods
│ │ │ │ goods.vue
│ │ │ │
│ │ │ ├─goods-detail
│ │ │ │ goods-detail.vue
│ │ │ │
│ │ │ ├─index
│ │ │ │ index.vue
│ │ │ │
│ │ │ ├─member
│ │ │ │ member.vue
│ │ │ │
│ │ │ ├─news
│ │ │ │ news.vue
│ │ │ │
│ │ │ ├─news-detail
│ │ │ │ news-detail.vue
│ │ │ │
│ │ │ └─pics
│ │ │ pics.vue
│ │ │
│ │ ├─static
│ │ │ │ hmlogo.png
│ │ │ │ logo.png
│ │ │ │
│ │ │ └─icon
│ │ │ cart-active.png
│ │ │ cart.png
│ │ │ home-active.png
│ │ │ home.png
│ │ │ member-active.png
│ │ │ member.png
│ │ │ news-active.png
│ │ │ news.png
│ │ │
│ │ └─util
│ │ api.js
│ │
│ ├─大纲
│ │ │ uniapp基础知识.md
│ │ │
│ │ └─images
│ │ 2view.png
│ │ create.jpg
│ │
│ ├─素材
│ │ │ bz.png
│ │ │ download.zip
│ │ │ HBuilderX.2.4.6.20191210.full.zip
│ │ │ heima_shop_server.zip
│ │ │ hmlogo.png
│ │ │ 项目接口文档.md
│ │ │
│ │ ├─fonts
│ │ │ iconfont.css
│ │ │ iconfont.eot
│ │ │ iconfont.svg
│ │ │ iconfont.ttf
│ │ │ iconfont.woff
│ │ │ iconfont.woff2
│ │ │
│ │ ├─font_nav
│ │ │ demo.css
│ │ │ demo_index.html
│ │ │ iconfont.css
│ │ │ iconfont.eot
│ │ │ iconfont.js
│ │ │ iconfont.json
│ │ │ iconfont.svg
│ │ │ iconfont.ttf
│ │ │ iconfont.woff
│ │ │ iconfont.woff2
│ │ │
│ │ ├─icon
│ │ │ cart-active.png
│ │ │ cart.png
│ │ │ home-active.png
│ │ │ home.png
│ │ │ member-active.png
│ │ │ member.png
│ │ │ news-active.png
│ │ │ news.png
│ │ │
│ │ └─tabs
│ │ contact-active.png
│ │ contact.png
│ │ home-active.png
│ │ home.png
│ │ message-active.png
│ │ message.png
│ │