小程序实战 -- 仿网易蜗牛读书

本文作者分享了仿照网易蜗牛读书App开发小程序的实战经验,包括项目准备、页面布局、数据模拟、功能实现等方面,强调了合理文件结构、BEM命名规范和动态数据获取的重要性。此外,作者还提到了使用EasyMock造数据、navigator与switchTab的页面跳转方式,以及使用swiper实现轮播效果。最后,作者鼓励读者一起交流学习。
摘要由CSDN通过智能技术生成

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

项目地址:杳杳飞花/Reading

项目预览:

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":"分类"
  },
 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值