Uni-App-学习⼼得
背景介绍
⼤概在今年的⼗⽉份左右，我了解到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的。
⼼中的顾虑都解除了，那就开始学习这个框架吧。以下内容基本都来源于官⽅⽹站，仅此记录⾃⼰学习过程~
官⽅给出了⼀个视频：，⽼⽼实实地认真看过了视频，加上之前运⾏过demo，⼼中有了个⼤概。
光看视频是不⾏的，感觉像是明⽩了，等到⼀动⼿操作的时候，就会发现哪⾥忘记或者记错了。所以我新建了⼀个仓库在腾讯云开发者平台，因为⽬前腾讯云是免费的，不限制创建项⽬数量，所以可以随便折腾。
新建项⽬时注意事项
HBuilder X提倡使⽤快捷键开发，所以尽量使⽤快捷键。这点在视频中有提到。我觉得还是⾮常好的⼀款编辑器。
如果是练习项⽬，可以选择hello 模版。也可以在hello模版基础上⼆次开发。
新建空⽩的项⽬需要拷贝uni.css和uni.js，保存到common⽬录。照着视频做，直接拷贝，⾮常⽅便
新建的项⽬需要修改内容页⾯的标题，打开pages.json将⽂件中的navigationBarTitleText修改成⾃⼰的标题即可。
使⽤代码进⾏编辑
视频中随便敲了⼀下键盘，噼⾥啪啦的出现了⼀堆的代码，感觉还是不错的。应该是内置了⼀个代码块。所以去官⽹查了⼀下，果然nice。内置了很多的代码块。代码块分为Tag代码块、JS代码块。mui框架常用组件有哪些
新闻列表页 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 实例的⽣命周期，同时还⽀持应⽤⽣命周期及页⾯⽣命周期
关于项⽬⽬录、开发规范⼀定要遵守，直接通过官⽹学习即可。
<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">{{ated_at}}</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
news: []
};
},
onLoad:function(){
url: 'unidemo.dcloud/api/news',
method: 'GET',
data: {},
success: res => {
},
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提供的内置组件来实现。
另外需要注意的就是，在页⾯的onLoad函数中，接到的参数e，实际上就是在页⾯index.vue传过来的参数。这种页⾯之间传参的⽅式⾮常
⽅便。不⽤写任何多余的代码。
{{title}}
</view>
<view class="content">
<rich-text :nodes="content"></rich-text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: '',
content: ''
};
},
onLoad:function(e){
url: 'unidemo.dcloud/api/news/36kr/'+ e.postid,
method: 'GET',
data: {},
success: res => {
this.title = res.data.title;
},
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数据就是为了解决这个痛点的。通过对⽐学习，我决定使⽤。使⽤⽅法和注意事项可以参考
之所以采⽤这种平台化的Mock数据，是因为我没有花时间去看怎么在本地搭建⼀个测试服务。直接就拿来主义了。
总结
通过这个新闻列表的程序，快速上⼿了uni-app，完成了⼀套代码，多端运⾏。按照官⽹给出的说法是，学习成本⾮常低的，但对⽐我个⼈，我觉得还是有成本的，⾄少要理解其中的概念，才能更愉快的上⼿项⽬。
需要熟练掌握⾄少以下知识点
Vue的语法，⾄少要知道如何创建⽂件、怎样绑定数据、怎样通讯、如何绑定事件、怎样通过绑定数据刷新页⾯。我虽然没有做过vue 的项⽬，但是好在我有看过vue⽂档，并练习了官⽹的例⼦。否则，在运⾏这个项⽬之前我得花不少时间去vue官⽹学习vue~
⼩程序相关知识。同样的，如果完全没有看过⼩程序相关知识，同样会遇到问题，尤其是后续开发会⽤到⼩程序API css3、flex布局、ES6、打包、发布、模块化开发等等。相关的知识点，都需要学习、强化。
可以发现，通过uni-app，就将⽬前主流的技术全都链接起来了。这样的好处是⾮常多的。对我个⼈⽽⾔，可以学习新框架、开发IOS和Android APP项⽬、串联起来⽬前主流的技术栈，积累经验。另外最重要的就是，通过这个过程，还能挣⼀笔零花钱~ 不仅学习了知识，积累了项⽬经验，还有伙⾷费，真是好处多多啊~
⽬前已经上⼿了这个框架，下⼀步就应该考虑将mui项⽬，修改成uni-app项⽬了。希望这个过程是幸福并快乐的。⽬前项⽬是180多个html页⾯，希望采⽤vue之后，页⾯数量能减少⼀半。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。