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。
    原文作者:siberiawolf
    原文地址: https://segmentfault.com/a/1190000017168549
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞