时间飞逝,在不知不觉间uni课程的学习已经结束了。在这近半学期的学习中,虽然我不能说我将uni这门课程学习的有多么好,但是通过老师的教导和同学们的帮助下,我还是受益良多的。
首先我先简单介绍一下这门课程
uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者可以通过编写 Vue.js 代码,uni-app 将其编译到iOS、Android、微信小程序等多个平台,保证其正确运行并达到优秀体验。uni-app 继承自 Vue.js,提供了完整的 Vue.js 开发体验。uni-app 组件规范和扩展api与微信小程序基本相同。有一定 Vue.js 和微信小程序开发经验的开发者可快速上手 uni-app ,开发出兼容多端的应用。uni-app提供了条件编译优化,可以优雅的为某平台写个性化代码、调用专有能力而不影响其他平台。
基本了解了课程,那我们是不是还得了解一下需要用到的开发工具HBuilder X呢?我认为,有一个层次清晰的目录结构是有必要的,那就简单了解一下HBuilder X的目录结构吧
common 可以用来存放一些公共css及js文件;
component 可以存放我们自己封装的一些组件;
static 用来存放我们的静态文件比如图片,icon之类的;
hybrid 可以存放我们写的本地html文件;
platforms 存放各平台专用页面的目录;
pages 存放我们写的项目页面;
main.js 初始化入口文件,创建vue实例,app实例,引用vuex;
App.vue 用来配置app的全局样式以及监听应用的生命周期;
manifest.json 配置应用的名字,图标等各种信息;
pages.json 配置页面的路由、底部导航、顶部标题按钮搜索框等页面类信息。
回想当初的学习,之前我连安装软件都安错的人,现在也已经可以对HBuilder X熟练使用了,不用再一步一步的向别人请教了。在老师的教学课程中不仅仅是学到了实践如何操作,我也学到了蛮多的理论知识。
就拿我比较熟悉的一个知识点关于页面通知怎么实现来说吧。它有两个方法
方式一:getCurrentPages() 方法获取上一个页面
1、列表页添加更新列表项阅读次数的函数refreshReadCount(id, count)。
2、通过navigateTo导航到详情页面。
3、获取前一页面的实例使用getCurrentPages()。
4、通过前一页面实例,调用相应函数,更新相应列表项的阅读次数。
方式二:消息通知中心
1、注册全局变量。
2、自定义通知/控制中心文件notification.js在其中添加notices数组保存通知对象且自定义add添加通知函数、remove移除通知函数、post给观察者发送通知并执行通知任务的函数,并导出。
3、在main.js全局引入notification.js且挂载到全局。
4、在index.vue的onLoad中使用add函数注册通知,添加onUnload并在其中使用remove函数移除通知。
5、在blog.vue的addReadCount中添加使用中心解耦。
由于本人才疏学浅,对于该门课程的学习也不是很深入。在跟随老师的带领与组内成员的帮助下,在课程结束的考核中也勉勉强强能交出一份合格的答卷,
以上也只是学完该门课程的心得体会而已。