共计 5547 个字符，预计需要花费 14 分钟才能阅读完成。
背景介绍
大概在今年的十月份左右，我了解到 Dcloud 推出了 uni-app。当时下载了一个 Hbuilder X，下载了官方提供的 hello 示例教程。经过一番努力，在云端打包成功了。当时这个软件还不够完善，用 iphone 真机模拟运行时，还会存在中文乱码问题。我还特意提交了一个 bug。
当时觉得这个框架真的好用。早先开发过混合 app，也就是在 webview 下内嵌 html5 页面，经常会出现卡顿的和性能问题。这个解决方案 DCloud 本身也提供了，就是 mui。但是 uni-app 是不一样的，一套代码，可以完美的运行在安卓、苹果、小程序甚至未来会支持 H5 页面。想想都觉得蛮兴奋的。
然后我并没有动手去做任何项目，毕竟是新项目还需要发展一段时间。再有就是前端水太深，不能瞎折腾，时刻保持关注就行。一旦有需求，随时能最快上手就是最好的。
这两天刚好朋友有个项目让我接手。仔细了解了下项目情况，发现项目刚开始做，由一个前端人员采用 mui 框架做的。做了不到一半页面就跑路了。这个项目没有任何的安卓或者苹果的开发人员，朋友跟我也没有任何相关的客户端开发经验。
我这么一听，一下子想起来 uni-app 了。这就是个机会啊，既能接私活挣钱，又能学习新技术积累经验，更重要的是，一旦这个项目做成，就意味着自己不仅仅只会 html、css、js 了。以后可以吹牛逼说，我丫的客户端 IOS 和 Android 都能搞定~ 想想以后求职面试向面试官吹牛，我就有点小激动~~ 扯偏了 :)
学习手记
甭管多高深的框架，要想学习就得老老实实的去看官网。我又去看了一下官网，发现才隔了不到两个月，更新的内容还是蛮多的。更新得越频繁，说明框架越有活力，也就更值得我去折腾一下。大概的看了下文档之后，心中的第一个疑问就冒出来了。
既然 mui 和 uni-app 都是 DCloud 出品，mui 能直接平滑过渡到 uni-app 不？官方给出的答案是否定的。
如果已有 5 + 或 mui App、wap2app、原生 App，是无法迁移到 uni-app 的。
然后我就想起来，之前的 webview 存在的性能卡顿问题，看到官网给出的答案，我就放心了。也就下定决心，将朋友的 mui 项目改写成 uni-app 的。
对于 Hybrid 方案，uni-app 比普通基于 webview 的 Hybrid 方案体验更好，包括比 DCloud 之前的 mui 体验更好。
对比纯原生渲染的方案，体验差不多，但易用性和生态完整度上 uni-app 明显胜出（uni-app 自身功能组件丰富，并且小程序的周边丰富生态都可以用于跨平台开发）。
心中的顾虑都解除了，那就开始学习这个框架吧。以下内容基本都来源于官方网站，仅此记录自己学习过程~
官方给出了一个视频：https://ke.qq.com/course/343370，老老实实地认真看过了视频，加上之前运行过 demo，心中有了个大概。
光看视频是不行的，感觉像是明白了，等到一动手操作的时候，就会发现哪里忘记或者记错了。所以我新建了一个仓库在腾讯云开发者平台，因为目前腾讯云是免费的，不限制创建项目数量，所以可以随便折腾。
新建项目时注意事项
HBuilder X 提倡使用快捷键开发，所以尽量使用快捷键。这点在视频中有提到。我觉得还是非常好的一款编辑器。
如果是练习项目，可以选择 hello 模版。也可以在 hello 模版基础上二次开发。
新建空白的项目需要拷贝 uni.css 和 uni.js，保存到 common 目录。照着视频做，直接拷贝，非常方便
新建的项目需要修改内容页面的标题，打开 pages.json 将文件中的 navigationBarTitleText 修改成自己的标题即可。
使用代码进行编辑
视频中随便敲了一下键盘，噼里啪啦的出现了一堆的代码，感觉还是不错的。应该是内置了一个代码块。所以去官网查了一下，果然 nice。内置了很多的代码块。代码块分为 Tag 代码块、JS 代码块。使用代码块直接创建组件模板
新闻列表页 index.vue
视频中就是一个新闻列表页，而列表页也就是一个列表而已。在 index.vue 中编写如下代码。
v-for 表示要循环的语句，其中的 news 是在 js 部分中的 data 定义的属性，表示新闻列表。v-for 中的 item 表示一个列表项，也就是一个新闻；index 表示列表的下标。
@tap 表示绑定点击事件。因为是在移动端，还是不要写 @click 了。click 事件在移动端会有 300ms 的延迟
:data-postid 表示绑定一个动态的数据，而 postid 表示这个动态的数据属性是这个名字。
如果想直接输出数据中的内容，通过 {{}} 两对大括号将数据内容包裹在里面即可。例如{{item.title}}
视频中特别强调了声明 data 属性时要注意，必须声明为返回一个初始数据对象的函数。只需要更新最新版本的 HBuilder X 新建页面的时候就会自动生成。
编写 js 代码的时候，编辑器会自动用 eslint 对代码进行检查。可以通过工具 - 插件配置 -eslint-vue 查看和修改配置项。
onLoad 是页面的生命周期。uni-app 完整支持 Vue 实例的生命周期，同时还支持应用生命周期及页面生命周期
uni.request 是发起请求，直接通过代码块敲代码会特别快。另外这个接口跟 ajax 还是有些不太一样的。例如发送给服务器的数据都是 string 类型的。具体可以查看文档发起网络请求。
关于项目目录、开发规范一定要遵守，直接通过官网学习即可。开发规范
<template>
<view class=”content”>
<view class=”uni-list”>
<view class=”uni-list-cell” hover-class=”uni-list-cell-hover” v-for=”(item,index) in news” :key=”index” @tap=”opennews” :data-postid=”item.post_id”>
<view class=”uni-media-list”>
<image class=”uni-media-list-logo” :src=”item.author_avatar”></image>
<view class=”uni-media-list-body”>
<view class=”uni-media-list-text-top”>{{item.title}}</view>
<view class=”uni-media-list-text-bottom uni-ellipsis”>{{item.created_at}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
news: []
};
},
onLoad:function(){
uni.request({
url: ‘https://unidemo.dcloud.net.cn/api/news’,
method: ‘GET’,
data: {},
success: res => {
this.news = res.data;
},
fail: () => {},
complete: () => {}
});
},
methods:{
opennews(e){
uni.navigateTo({
url: ‘../news/news?postid=’+e.currentTarget.dataset.postid
});
}
}
}
</script>
<style>
.uni-media-list-body{height: auto;}
.uni-media-list-text-top{line-height: 1.6em;}
</style>
这个列表页面就算完成了。通过整体代码，可以发现采用 vue 这种开发模式，代码如此的简洁，总共才不到 50 行的代码。相比较于传统的 jQuery 方式，不知道要方便多少倍。通过代码，再一次鼓舞我继续下去，将项目修改成 uni-app 项目，不管工作量有多么大，也不管坑有多深了。
新闻详情页 news.vue
新闻详情页，超级简单，全部代码才区区 40 行。就可以比较好的展示页面了。因为新闻页面一般都包含 <p></p> 标签等富文本内容，所以使用 uni-app 提供的内置组件 rich-text 来实现。
另外需要注意的就是，在页面的 onLoad 函数中，接到的参数 e，实际上就是在页面 index.vue 传过来的参数。这种页面之间传参的方式非常方便。不用写任何多余的代码。
<template>
<view class=”wrap”>
<view class=”title”>
{{title}}
</view>
<view class=”content”>
<rich-text :nodes=”content”></rich-text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: ”,
content: ”
};
},
onLoad:function(e){
uni.request({
url: ‘https://unidemo.dcloud.net.cn/api/news/36kr/’+ e.postid,
method: ‘GET’,
data: {},
success: res => {
this.title = res.data.title;
this.content = res.data.content;
},
fail: () => {},
complete: () => {}
});
}
}
</script>
<style>
.wrap{padding: 10upx 2%;width: 96%;flex-wrap: wrap;}
.title{line-height: 2em;font-weight: bold;font-size: 40upx;}
.content{line-height: 2em;}
</style>
运行和调试项目
uni-app 调试是在微信开发者工具之中调试的。所以本地一定要按照这个软件。之后 ctrl+R，在微信中运行就可以调试了。开发 App 程序和微信小程序都需要在微信开发者工具之中调试。运行与调试介绍
我觉得还是非常方便的，因为首先在 HBuilder X 编辑代码之后，按下 ctrl+s，会自动编译，然后就会自动刷新微信开发者工具。这就好像是前端开发中会使用自动刷新工具一样。以前我开发的时候还会专门去用一些工具去做到实时刷新，然后可以双屏幕开发。但是我发现没有那个第三方软件做得比较好的，所以每次在浏览器里我还是需要手动刷新。但是这个 HBuilder X 内置的实时刷新，是非常好用的。
另外就是编译的时候会对代码进行检查，如果有错误会直接在控制台报错。
最后就是发布安卓包和苹果包了。因为我没有申请相应的开发者证书，不能进行本地打包。这里还是要对 HBuilder X 再点一个赞的。它在软件内部集成了一个打包工具，支持本地打包和云打包。如果使用云打包还可以使用 Dcloud 公用的开发者证书进行测试，或者使用自己的开发者证书。非常非常的方便。
我将自己做的第一个新闻列表、新闻详情程序打包，安装到了安卓手机上测试了下，效果非常棒。因为我的苹果手机没有越狱，我也不想对自己手机越狱，就没有测试苹果系统下效果。
用 Mock 模拟虚拟数据。
在看这个项目之前，我一直没有使用过 Mock 数据，进行开发。主要是我没有接触过。但是刚好在接这个项目的前一天，我知道了还有 Mock 数据这个东西，然后就学习了一下。我才发现自己是有多么的懒惰，没有学习这个技能。Mock 数据简直是前端开发的神器啊。在实际项目开发中，经常是前端开发完成了，后端数据还没有到。等后端数据到了，会发现接口跟当初预定的接口不一致了，等各种意想不到的问题。尤其是在等接口的过程中，我以前是自己写假数据。但是当后端接口数据提供之后，会发现自己写的假数据有问题，然后就影响到我的代码了。经常搞得自己焦头烂额。
Mock 数据就是为了解决这个痛点的。通过对比学习，我决定使用 Easy-Mock。使用方法和注意事项可以参考数据模拟神器 easy-mock 正式开源
之所以采用这种平台化的 Mock 数据，是因为我没有花时间去看怎么在本地搭建一个测试服务。直接就拿来主义了。
总结
通过这个新闻列表的程序，快速上手了 uni-app，完成了一套代码，多端运行。按照官网给出的说法是，学习成本非常低的，但对比我个人，我觉得还是有成本的，至少要理解其中的概念，才能更愉快的上手项目。
需要熟练掌握至少以下知识点
Vue 的语法，至少要知道如何创建文件、怎样绑定数据、怎样通讯、如何绑定事件、怎样通过绑定数据刷新页面。我虽然没有做过 vue 的项目，但是好在我有看过 vue 文档，并练习了官网的例子。否则，在运行这个项目之前我得花不少时间去 vue 官网学习 vue~
微信小程序相关知识。同样的，如果完全没有看过微信小程序相关知识，同样会遇到问题，尤其是后续开发会用到微信小程序 API
css3、flex 布局、ES6、打包、发布、模块化开发等等。相关的知识点，都需要学习、强化。
可以发现，通过 uni-app，就将目前主流的技术全都链接起来了。这样的好处是非常多的。对我个人而言，可以学习新框架、开发 IOS 和 Android APP 项目、串联起来目前主流的技术栈，积累经验。另外最重要的就是，通过这个过程，还能挣一笔零花钱~ 不仅学习了知识，积累了项目经验，还有伙食费，真是好处多多啊~
目前已经上手了这个框架，下一步就应该考虑将 mui 项目，修改成 uni-app 项目了。希望这个过程是幸福并快乐的。目前项目是 180 多个 html 页面，希望采用 vue 之后，页面数量能减少一半。
（完）