uni-app (1): 正式接触

87 阅读 0 评论 58 点赞

我是靠谱客的博主英勇书本，最近开发中收集的这篇文章主要介绍uni-app (1): 正式接触，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

正式开始学习uni-app, 在之前需要学习vue的相关知识，还有其他一些知识同样需要了解，虽然不需要太过深入，但是至少提到后要会用，或者说心中有数，下面这些技术：

node、npm、less/sass/scss、webpack、babel等等，因为在实际学习过程中会有很多地方涉及到它们，如果对他们没有一定的了解，在学习过程中会有很多困惑，所以务必需要花上一些时间去学习。

关于学习为什么学习uni-app , 除了说是想多学学知识外，无外乎是想接触接触终端应用，小程序，对于一致接触pc的我尤为有吸引力，而uni-app 号称多端开发其中又有条件编译，而且还有很多支持，比如html+、native.js 、nvue（native vue）等等，感觉是不是又高端了一点（对于其他一些框架或集成环境），之前用过apicloud一段时间，说实话，也很方便，对于新手来说还是比较友好的，但是在使用过程中如果你不想去多学一些关于vue其他的一些知识，完全ok，因为webview环境下跟浏览器一样，写html和js 就完了，关于ui插件什么的，用插件市场中的就好，但是总感觉少了些什么，而uni-app不同，如果你想使用它就必须学习这些知识，是挑战也是提升，因为人是懒惰的，只有逼到份上才能向前一步不是么，另外关于apicloud 关于小程序之类的不是太完善，这可是想学习uni-app的一部分原因，大概就是如此，如果你想的和我一样，那么我们一起开始吧~

在关于uni-app 的随笔中其中会掺杂一些个人的理解，说的不对的地方烦请指正。

关于uni-app,官网中是这样介绍的：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序（微信/阿里/百度/头条/QQ）等多个平台。

是一套框架，也就是半成品工程，利用这个工程可以省去很多我们在开放时间，提升开发效率。

在白话uni-app 中，对uni-app 进行了一些说明，uni-app 提供了一个api 库，同时定义许多常用的内置组件，并解释了终端运行环境与pc浏览器运行环境的区分，我们知道的，node是基于v8 引擎的运行环境，而混合式开放中的webview 则是根据终端类型进行区分。

在node环境中是没有window、doc这些浏览器内置对象的，故uni-app 中也不会有，数据的渲染与绑定完全交由vue。

另外因为uni-app 是参考了小程序的，但是其中除了追加了一些api外，基本上与小程序中提供的api一致，只是前缀改了

关于CSS

关于尺寸单位使用px 和rpx ，自适应用rpx。关于布局没得说大家都推荐使用flex。

关于静态图，保存在static 中的：

基本上这篇官方的介绍就是这些，开始根据官方文档学习~

开发规范：

首先要了解什么是SFC、还有相关的介绍vue-loader，它与webpack配合对vue文件进行预编译与打包。在看这些之前建议一定要看完webpack，至少看完webpack基本概念~

在vue-loader 的介绍中提到了预处理器，其中关于sass/scss 个人没有看，只是看了less，看个人喜好了。另外如果是style 和图片资源使用webpack引入，需要把 "sideEffects": false 这个取消掉，否则不会webpack不会进行解析。

在style 标签中使用lang 属性可以指定处理类型，比如

<style lang="scss">
/* 在这里撰写 SCSS */
</style>

相比sass/sacss ，less的配置就简单多了，下载loader，在module中配置lessloader即可：

{
                test: /.(css|less)$/,
                use: [
                    'style-loader',
                    'css-loader',
                    'less-loader'
                ]
            }

另外还有stylus，PostCSS，个人没关注。

关于webpack与babel ，可以参考 https://www.webpackjs.com/loaders/babel-loader/

scrop css ，但单文件组件中，表有scoped 属性的style 标签中的样式至作用域当前组件，对于其他引入的组件不起作用。

另外注意的是：