Uni-app是一款基于Vue.js框架的跨平台开发工具，可用于开发H5、小程序、App等多端应用。在此次的Uni-app课程中，我学习到了很多有关Uni-app技术的知识和技巧，使我对Uni-app有了更深入、全面的认识。

我的项目是一个基于uni-app框架的博客应用，主要功能包括：

首页：展示博客列表，支持分页、下拉刷新和上拉加载更多； 博客详情页：展示博客内容、作者信息和评论列表等； 发布博客：支持发布新博客并添加标签； 编辑博客：支持对已发布的博客进行修改； 个人中心：展示用户信息和已发布博客列表； 我的收藏：展示用户收藏的博客列表； 搜索：支持对博客进行关键字搜索； 登录和注册：支持使用手机号和验证码进行登录和注册；

uniapp项目的特点包括：

基于uni-app框架：可以快速构建多端通用应用； 使用Vue.js框架：可以快速开发高效的单页应用； 使用EasyMock模拟接口数据：可以快速模拟后端接口数据，提高开发效率； 支持多语言：支持中英文切换； 界面简洁美观：设计风格简洁、清晰，操作流畅，用户体验良好。

甭管多⾼深的框架，要想学习就得⽼⽼实实的去看官⽹。我⼜去看了⼀下官⽹，发现才隔了不到两个⽉，更新的内容还是蛮多的。更新得越频繁，说明框架越有活⼒，也就更值得我去折腾⼀下。⼤概的看了下⽂档之后，⼼中的第⼀个疑问就冒出来了。 既然mui和uni-app都是DCloud出品，mui能直接平滑过渡到uni-app不？ 官⽅给出的答案是否定的。

然后我就想起来，之前的webview存在的性能卡顿问题，看到官⽹给出的答案，我就放⼼了。也就下定决⼼，将朋友的mui项⽬改写成uni-app的。

官⽅给出了⼀个视频：，⽼⽼实实地认真看过了视频，加上之前运⾏过demo，⼼中有了个⼤概。 光看视频是不⾏的，感觉像是明⽩了，等到⼀动⼿操作的时候，就会发现哪⾥忘记或者记错了。所以我新建了⼀个仓库在腾讯云开发者平 台，因为⽬前腾讯云是免费的，不限制创建项⽬数量，所以可以随便折腾。 新建项⽬时注意事项 HBuilder X提倡使⽤快捷键开发，所以尽量使⽤快捷键。这点在视频中有提到。我觉得还是⾮常好的⼀款编辑器。 如果是练习项⽬，可以选择hello 模版。也可以在hello模版基础上⼆次开发。 新建空⽩的项⽬需要拷贝uni.css和uni.js，保存到common⽬录。照着视频做，直接拷贝，⾮常方便 新建的项⽬需要修改内容页⾯的标题，打开pages.json将⽂件中的navigationBarTitleText修改成⾃⼰的标题即可。 使⽤代码进⾏编辑视频中随便敲了⼀下键盘，噼⾥啪啦的出现了⼀堆的代码，感觉还是不错的。应该是内置了⼀个代码块。所以去官⽹查了⼀下，果然nice。内置了很多的代码块。代码块分为Tag代码块、JS代块。

视频中就是⼀个新闻列表页，⽽列表页也就是⼀个列表⽽已。在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类型的。具体可以查看⽂档。 关于项⽬⽬录、开发规范⼀定要遵守，直接通过官⽹学习即可。