uni-app官方教程学习手记

1,665 阅读11分钟

本人微信公众号:前端修炼之路,欢迎关注

背景介绍

大概在今年的十月份左右,我了解到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自身功能组件丰富,并且小程序的周边丰富生态都可以用于跨平台开发)。

心中的顾虑都解除了,那就开始学习这个框架吧。以下内容基本都来源于官方网站,仅此记录自己学习过程~

官方给出了一个视频:ke.qq.com/course/3433…

光看视频是不行的,感觉像是明白了,等到一动手操作的时候,就会发现哪里忘记或者记错了。所以我新建了一个仓库在腾讯云开发者平台,因为目前腾讯云是免费的,不限制创建项目数量,所以可以随便折腾。

新建项目时注意事项

  • 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之后,页面数量能减少一半。

(完)