uni-app跨平台开发与应用一课一得

我今年是学生，我学习快一学期的Uni-app和HBuilderX了，我是在学习Uni-app和HBuilderX的过程中写了这一篇学习心得的文章。学生文写得不好，大家多多海涵，大家随便看看就好。

 

我们班的这一学期学的两门课程叫做“Uni-app跨平台开发与应用，从入门到实践”。Uni-app和HBuilderX不是什么很easy的英语单词，是小程序技术和需要的写代码平台的意思。我在我们学习心得的文章这里啊，谢谢我们班的任课老师，是我们班的任课老师教会我很多关于写Uni-app代码和使用HBuilderX的技巧，也教会我很多关于设计Uni-app小程序页面的技巧，我也学会很多Uni-app和快捷使用HBuilderX的知识。最令我印象深刻的是在我们学习课堂上跟着我们班任课老师用HBuilderX和Vue代码写的Uni-app项目的登录功能。我在这里多提一嘴，登录功能呢，是我之前看到和用过的功能，但我没想要怎么做出来，我一代码都不会写，不过我跟着我们班的任课老师在我们学习课堂上写一遍，我终于写出来了，写出来的一下，我太有成就了。

在我们的学习课堂上跟着我们班的任课老师编写Uni-app小程序和前端页面的过程中，我对Uni-app和Vue的函数，传参，属性用在微信小程序和Vue中做的前端和后端接口上有了较上学期还要深入的学习和实践。

---

在给大家看我们小程序的功能之前，我还是给大家在讲讲Uni-app的基础知识，否则大家要么都是小白不懂Uni-app，要么不记得了：

 

一、Uni-app 介绍

前端开发框架

uni-app（uni，读you ni，是统一的意思）是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序、快应用等多个平台。

软件平台

Chrome、Edge……

上线时间

2015年

软件语言

JavaScript

产生背景

DCloud于2012年开始研发小程序技术，优化webview的功能和性能，推出了HBuilder开发工具，为后续产业化做准备。

2015年，DCloud正式商用了自己的小程序，产品名为“流应用”，它不是模式的轻应用，而是能接近原生功能、性能的App，并且即点即用，第一次使用时可以做到边下载边使用。

发展历程

DCloud为将该技术发扬光大，并推进各家流量巨头接入该标准，开展小程序业务。

主要功能

uni-app实现了一套代码，同时运行到多个平台；一套代码，同时运行到iOS模拟器、Android模拟器、H5、微信开发者工具、支付宝小程序Studio、百度开发者工具、字节跳动开发者工具、QQ开发者工具（底部8个终端选项卡代表8个终端模拟器）

---

二、UniAPP 详情

(1) 什么是 UniAPP?

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS，Android，HS，以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉》等多个平台，方便开发者快速交付，不需要转换开发思维，不需要更改开发习惯。

(2) 为什么要选择 UniAPP?

1.开发者/案例数量更多：

几十万应用、uni 统计月活12亿、70+微信/QQ群。

2.平台能力不受限：

在跨遇的同时，通过条件编译 + 平台特有 API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。

3.性能体验优秀：

加载新页面速度更快、自动 diff更新数据，App 端支持原生渲染支撑更流畅的用户体验，小程序端的性能优于市场其他框架。

4.周边生态丰富：插件市场数千款插件，支持 NPM，支持小程序组件和SDK，微信生态的各种 sdk 可直接用于跨平台 APP。

5.学习成本低：基于通用的的前端技术栈,采用vue语法·微信小程序api,无额外学习成本。

(3) UniAPP开发环境搭建

1.下载开发工具 HBuilderX

官网：https://www.dcloud.io/hbuilderx.html

 

HBuilderx 是通用的前端开发工具，但为 uni-app 做了特别强化。

下载 App 开发版，可开箱即用；如下载标准版，在运行或发行 uni-app 时，会提示安装 uni-app 插件，插件下載完成后方可使用。

2.创建 uni-app 项目：

选择 uni-app 类型，输入工程名，选择模板，点击创建，即可成功创建。

uni-app自带的模板有 Hello uni-app，是官方的组件和API示例。

还有一个重要模板是 uni ui项目模板，日常开发推荐使用该模板，已内置大量常用组件。

3.运行 uni-app：

主要包括：浏览器运行、真机运行、小程序运行等。

4.发布 uni-app：

主要包括：云端原生APP,离线原生APP,H5、各种小程序……