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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞