uni-app学习心得

作为一名前端开发者，我最近开始使用 uni-app 框架进行开发。uni-app 是一款跨平台的开发框架，使用 Vue.js 开发语言，允许开发人员将一个代码库快速发布到多个平台，包括H5、iOS、Android等。在使用 uni-app 进行开发的过程中，我也有了一些心得体会。

uni-app具有如下特点：

跨平台更多：一套代码，多端发行！

运行体验更好：组件、api与微信小程序一致，兼容weex原生渲染。

通用技术栈，学习成本更低 vue的语法、微信小程序的标签和api，内嵌mpvue开源框架

开放生态，组件更丰富：支持npm安装第三方包，支持微信小程序自定义组件及SDK，兼容mpvue组件及项目，App端支持和原生混合编码，Dcloud将发布插件市场

开发一次，多端覆盖：小程序、android、ios、H5。条件编译，解决各端差异。通过 #ifdef、#endif 的方式，为不同端编译不同的代码

对于本项目，uni-app能够方便我们编码与操作，且其框架学习较为容易，成本低，本项目基于客户端与服务器端，即cs模式，uniapp中 weapp.socket.io 能够很好的契合本项目。

1.uni-app的框架简介

 2.环境搭建

安装编辑器HbuilderX 下载地址，HBuilderX是通用的前端开发工具，但为uni-app做了特别强化。下载App开发版，可开箱即用，安装微信开发者工具 下载地址

3.运行项目 

在菜单栏中点击运行，运行到浏览器，选择浏览器即可运行

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具，即可在微信开发者工具里面体验uni-app

在微信开发者工具里运行：进入hello-uniapp项目，点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

4.文件引入

 5.生命周期

6.路由 

7.运行环境

 

8.页面样式与布局

1）单位：px，rpx

px无法动态适应不同宽度的屏幕，rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位，推荐使用rpx，全端支持。

px:屏幕像素

rpx:响应式px，一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App 端和 H5 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算

设计稿 1px / 设计稿基准宽度 = 框架样式 1rpx / 750rpx

2）选择器：.class、id、element、element element、 ::after、::before

注意：在 uni-app 中不支持*选择器；元素选择器里没有body，改为了page。微信小程序即是如此。

3）内联样式

style：一般接收动态的样式（请尽量避免将静态的样式写进 style 中，以免影响渲染速度）<view :style="{color:color}" />

class：指定静态样式 <view class="normal_view" />

4）全局/局部样式

全局样式：定义在 App.vue 中的样式，作用于每一个页面。注意：nvue页面暂不支持全局样式。

局部样式：在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器

总之，使用 uni-app 进行跨平台开发可能需要一些前端基础知识、框架本身的使用方法和一些平台相关的配合知识，需要一定的学习成本和较长的掌握过程。然而，uni-app框架本身的高度抽象和封装能够大大简化从前端到移动端、小程序端的开发流程，减少了开发工作量并且提高了开发效率，对于具有多端开发的需求的团队或项目来说是一个不错的选择

demon实现登录界面

 

uni-app官网uni-app,uniCloud,serverlesshttps://uniapp.dcloud.net.cn/