uni-app课程学习心得

时间飞逝，在不知不觉间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中添加使用中心解耦。

由于本人才疏学浅，对于该门课程的学习也不是很深入。在跟随老师的带领与组内成员的帮助下，在课程结束的考核中也勉勉强强能交出一份合格的答卷，

以上也只是学完该门课程的心得体会而已。