uni-app 建立的第一个应用

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

背景介绍

通过上一篇文章uni-app官方教程学习手记的学习以后，我就着手作这个项目了。

目前已经初步搭出了总体的框架，秉着取之于社会，回馈于社会的原则，我将这个项目开源到GitHub uni-shop，发展壮大uni-app社区。项目确定有不足和考虑不周之处，欢迎你们指正并提出Issues。

由于这是个真实的项目，为了一名合格的程序员的职业操守，项目真实数据部分并不会开源。为了提升总体的流畅性和帮助本身开发，数据部分采用Easy Mock模拟的假数据。有须要的朋友能够自行修改接口。

这个项目就相似于一个微信，或者说模仿一个微信应用。包括聊天、群聊、朋友圈等等。由于本人水平有限，前期计划只完成一对一两人聊天功能，不包括其余功能。目前聊天的功能尚未实现，由于我并无作过这方面的应用。

另外就是这个项目设计的自己，本人也不知道彻底仿照一个微信作的目的是什么？或者说申请应用上架App Store时，是否合法？再或者是否对腾讯微信形成侵权？但愿有知道的朋友，能够给我留言。

抛去这些困惑之外，单纯对这个项目而言，经过这个过程，将本身本来不会的东西，经过一段时间的学习和实践，最终实现了。我想，这才是一名程序员对程序的热情吧~ 把不可能变成可能，把不会变成学会。

目录结构

┌─components            uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                存放本地网页的目录
├─platforms             存放各平台专用页面的目
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─static                存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

以上是一个uni-app工程包含的目录及文件，能够经过目录结构查看详细信息。

知识点

简单罗列出项目中使用到的组件和相关技术，详细信息查询官方手册便可。

• pages.json：用来对 uni-app 进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等。项目中包括修改标题文本、启动页修改透明标题栏、开发环境启动指定页面，设置底部tab选项卡和图标文字等，都是经过修改这个文件实现的。
• vuex：专为 Vue.js 应用程序开发的状态管理模式。由于项目模拟了用户登陆的过程，因此采用vuex管理用户登陆状态，并将用户信息，包括头像、昵称、帐号等信息存储起来。
• uni.setStorageSync：将 data 存储在本地缓存中指定的 key 中。由于vuex不是持久化的状态，一点用户关掉程序，而后再次启动程序，就会丢失掉用户信息。这里我想到的解决办法就是使用storage，将用户信息保存在本地缓存中。
• uni.reLaunch(OBJECT)：关闭全部页面，打开到应用内的某个页面。这个接口的主要区别就是关掉当前全部页面，而后新打开一个页面。与uni.navigateTo(OBJECT)不一样。navigateTo接口是在当前页面打开新的页面。
• 使用代码块直接建立组件模板：在Hbulider X中，内置了不少的代码块，灵活使用代码块能够提升很多开发效率。
• 使用 Chrome 调试：最新版本的HbuliderX已经能够开发H5程序了。而且能够在Chrome中调试程序，感受比在微信开发者工具中调试更舒服。
• onPullDownRefresh：监听页面用户下拉刷新事件。由于我没有想明白该怎样实现微信聊天功能的，消息实时同步的过程，因此暂时让用户手动刷新获取最新消息。体验并很差~ :-( 
• index-list：在hello uniapp中，有这个例子，参考使用便可作出相似微信通信录的页面。
• qrcode二维码：参考这个页面内容，能够生成二维码。
• scan扫描二维码：参考这个例子能够实现扫描二维码。

知识点大概就这么多，剩下的都是具体的细节，看代码或者官方手册便可。

修复的bug问题

• 注册页面文字两端对齐bug。原本觉得跟浏览器中同样，使用转义字符就能解决，项目中使用了 ，可是发如今某些安卓机中，会失效。因此改为了css实现两端对齐。使用css3 justify-content实现。
• 启动页跳过按钮失效。启动页计划是不显示导航栏的，为了跳过启动页，添加了一个跳过按钮。可是我没有考虑到导航栏的高度。由于我原本觉得这个导航栏已经被隐藏了，其实否则，这个导航栏一直存在，只不过变成了透明而已。若是这个跳过按钮位置是在导航栏上，会致使按钮失效。经过查找论坛文档，找到了这个导航栏高度【示例】原生标题栏titleNView使用说明，是固定高度44px。

原文地址：http://www.javashuo.com/article/p-sdqcitjf-bn.html