欢迎来到258分享网,纯净的网络源码分享基地!

258资源分享网

全部作品
全部作品
网站源码
微信源码
素材特效
源码插件
视频教程
建站学院
热门搜索: 织梦  农业种植  农业  安全设置  官方
258资源分享 > 建站学院 > 微信开发 > 与你一起写小程序--仿网易蜗牛读书小程序

推荐下载

HTML5响应式自适应网咯设计

2020-05-12   浏览:797

HTML5自适应律师工作室类网

2020-04-04   浏览:665

高端HTML5响应式企业通用网

2020-05-06   浏览:578

html5响应式外贸网站英文版

2020-05-08   浏览:552

茶叶家具销售类网站

2020-04-28   浏览:550

与你一起写小程序--仿网易蜗牛读书小程序

发布时间:2020-11-04  

最近一段时间在学习怎么写小程序,然后自己利用课外时间,也撸了一个。一直都很喜欢网易蜗牛读书这款App,对于喜爱的事物总是情不自禁的,于是就仿照网易蜗牛读书的App简单做了这款小程序。

  项目预览:

 

img

 

项目准备:

大家若是感兴趣,可以跟着我一起来做哟^_^

☟ 蓝体点击就能跳转到相应页面进行下载或者查看教程

1、微信开发者工具 他能帮助我们快速的进行小程序的开发。当然,在开发之前我们还需要拥有一个小程序账号(注册教程),通过账号我们就能够管理自己的小程序了。需要注意的是,只有满了18岁的童鞋们才可以注册。

2、vs code (密码:g2g5) 64位系统的,其他版本就自己去搜一下安装包啦。虽然在微信开发者工具里面就能够直接写,但还是喜欢在vs code里面进行coding。这个按大家喜好自由选择哦。

3、Iconfont-阿里巴巴矢量图标库 一个阿里爸爸做的开源图库,它不仅有几百个公司的开源图标库,还有各式各样的小图标。有了这个图标库真是大大提高了我们的效率,我们能够根据需要进行图标搜索,还能够设置颜色、大小和图片格式。你想要的基本都有哦~

4、EasyMock 简单高效的伪造数据 用于后台的数据模拟,得到JSON数据,方便开发。

5、微信小程序开发文档 W3C的这个文档真是超级详细,我们能够在这里查找到微信小程序的API、组件以及一些框架等。

另外还使用了一款MarkMan进行测量,但若是追求精准还原的话,还是用PS更细腻。

项目开发过程:

每一次的开发都是一个成长的过程。在开发过程中,我们会遇到各种问题,这就给了我们一个独立思考的空间,能够锻炼我们解决问题和查询文档的能力。当然,在思考查询之后还可以请教他人、进行探讨,这样往往能够帮助我们快速的找到盲点,甚至能够了解到更多我们忽视的点。和别人的交流也是学习中很重要的一环,所以在此分享了自己小小的一点经验,欢迎一起交流,一起学习。

1、开始项目

在项目开始时,我们首先在 app.json 文件中配置主体界面,设置好tabBar 。在这里我们对小程序设置确定了一个整体的基调。

"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "网易蜗牛读书", "navigationBarTextStyle":"black" }, "tabBar":{ "color":"#999999", "selectedColor":"#444444", "backgroungColor":"#ffffff", "borderStyle":"#e0e0e0", "list": [ { "pagePath":"pages/leader/leader", "iconPath": "assets/icons/lingdu.png", "selectedIconPath": "assets/icons/lingdu_sel.png", "text":"领读" }, { "pagePath":"pages/stack/stack", "iconPath": "assets/icons/stack.png", "selectedIconPath": "assets/icons/stack_sel.png", "text":"分类" }, { "pagePath": "pages/bookdesk/bookdesk", "iconPath": "assets/icons/bookdesk.png", "selectedIconPath": "assets/icons/bookdesk_sel.png", "text":"书桌" }, { "pagePath":"pages/mine/mine", "iconPath": "assets/icons/mine.png", "selectedIconPath": "assets/icons/mine_sel.png", "text":"我的" } ] }

对于 pages 页面,在开发过程中进行过很多次调整。到现在为止觉得还算整洁和便于管理了。在起初,不管是一级页面还是二级页面,我都把它们放在了 pages 目录下。这样一开始还不觉得有什么,可是到后来页面越来越多,要对之前写过的页面进行修改和调整的时候,恍然间发现一堆文件夹,查找起来就觉得眼花缭乱,还要和页面进行配对,非常恼火。于是按照页面不同的级别层次,进行了相应的调整。按照不同的tabBar确定了主体的文件夹,然后各级页面又分别在各自所属层级的目录下。另外对于页面的命名尽量通俗易懂,这样方便自己对各页面进行查看和管理。

"pages":[ "pages/index/index", "pages/leader/leader", // 领读人 "pages/leader/stories/stories", "pages/leader/authors/authors", "pages/stack/stack", // 分类 "pages/stack/booklist/booklist", "pages/stack/booklist/bookdetail/bookdetail", "pages/bookdesk/bookdesk", // 书桌 "pages/mine/mine", // 我的 "pages/mine/news/news", "pages/logs/logs" ],

与你一起写小程序--仿网易蜗牛读书小程序

在分类页面下具有多层级的一个页面创建展示:

与你一起写小程序--仿网易蜗牛读书小程序