写在前面小程序开发渐进红利期,更多开发者慕名而来,网上的学习资料也层出不穷,有点眼花缭乱的意思了。在经过一个多月的摸索式学习后,我也终于写了不算精美的一个小程序。 那为什么写这篇文章:
几个问题
正文简介取了一个很low的名字“全民精进阅读”,意为沉浸式阅读体验,是一款rss源阅读小程序,主要功能包括:已关注源、源列表、源文章详情、源中心。可直接阅读知乎每日精选、the week等优质中英文源。 使用起来效果是这样的:
也可以直接微信扫码体验:
灵感来源信息大爆炸时代,每天可看的实在太多,头条、公众号、知乎、各垂直平台、大佬博客......只想找一个“安静”的地方,便捷地阅读一些精选的东西。于是乎就想起了RSS,想着将其与小程序结合,抱着试一试的心态写了一下,顺便当做练习。 模块分析(这个部分是废话,干货请直接查阅“代码实现”部分或者下载源码体验)有了目标,接下来就是具体构思了。 最终需求为实现对RSS源的关注、展示。拆解为如下原子功能:
同时,为了能够选择到想关注的RSS源以及能有一个有效的反馈渠道和声明,还需两个个功能:
针对上述功能,进行模块设计,这里推荐使用UE在线编辑应用墨刀来尝试完成。 根据《Do not make me think》的原则,可以设计为如下5模块(页面):
各模块间的交互如下图(省略返回):
关于UI设计,作为前端开发首先能想到的就是宫格--简明扼要,很符合预期。所以就没有做专门的UI设计,在开发过程中“随机应变”。 说了辣么多,该亮代码了。。。 代码实现技术准备根据以上部分的分析,已经把小程序的所有功能点罗列出来了,现在做技术分析:
具体实现做好准备之后,就可以在微信开发者工具内开发了。 首先,初始化项目后,修改创建出如下目录:
页面一:rssed 已关注源展示考虑到用户实际操作流,进入小程序后首先进入的就应该是已关注的源展示,新用户访问到的是空页面。用户可在页面操作触发添加关注、删除已关注。
对于已关注的源,关键信息是源名称、源logo。因此,基于清爽设计,采用宫格布局,这里使用的是zanui的栅格系统。从zanui的源码(本文使用的是v1.9.91版本)中找到栅格系统组件dist/col/index.wxss,将内容复制到项目的app.wxss中,当作通用样式,wxml参照zanui源码中的/pages/layout/index.wxml。 栅格系统中对高度没有做控制,需要自行实现正方形方块,添加如下wxss代码:
值得一提的是,第三方UI库的引入方式除了这种部分引入外,还可以整体引入,方法为:已zanui为例,将其资源文件通过@import直接引入到app.wxss中。 @import "dist/index.wxss"; 复制代码
此数据,加载该页面后从Storage中的取值rssedData,rssedData 在已关注是写入缓存。 3. 渲染与取消关注 根据数据结构和UI设计,使用wx:for循环渲染出宫格。 由于需要查看、取消关注某个源,因此就需要在元素上添加data-rss-id等值,用于事件绑定与跨页面传参。 删除采用常见的长按出现删除按钮,点击按钮就删除的方案。 4. 其他页的关联设计 作为主页面,需要有访问其他功能也的入口,这里将工业入口放入宫格最后,作为关联。
页面二:rsscenter 源中心对于新用户而言,访问过已关注页面后,紧接着需要访问的就是源中心了。需要完成下面的功能:
另外,对于关注的源应该有特殊标识,所以需要对数据做处理,通过对比Storage中rssedData和rss.js文件中的数据,给页面数据添加rssed(type:boolean)字段。 这里的数据来源于网络收集,暂时固定写死在小程序中,因此我提出来放到了项目的/data/rss.js文件中。后续版本,这个放到服务端管理,可以做到动态增删改。 2. RSS源简介 采用弹出框的形式,展示基本信息,提供关注按钮。这里使用了zanui的popup组件,引入方式同栅格系统。 3. RSS源关注 更新Storage,使用wx.reLaunch跳转至已关注页。
wx.reLaunch({ url: `../rssed/rssed`, }); 复制代码 页面三:源内容展示采用经典设计,如下图。
其中的description字段为该文章简介内容的hmtl文档,部分源将全部内容放到其中,所以加载的时候可能比较慢。 2. 列表渲染与带参数跳转 拿到上述数据之后,对数据进行缓存放入Storage中。然后使用wx:for渲染列表。 页面跳转至详情页时带上文章的数组index值: wx.navigateTo({ url: `../detail/detail?id=${rssItemData}&favicon=${favicon}`, }); 复制代码 在detail.js中取值 onLoad: function (options) { this.showDetail(options.id, options.favicon); }, 复制代码
页面四:源文章详细展示核心就是读取Storage中的数据,将html富文本转为wxml。 这里采用的是wxParse库。将wxParse源码下载后,拷贝至项目根目录,然后在/pages/detail/detail.js中引入、调用。 const WxParse = require('../../wxParse/wxParse.js'); ... WxParse.wxParse('article', 'html', rssDataItem.description, that, 5); ... 复制代码 ps:单独引入三方库的好处在于,可以自定义部分标签的展示,这个根据实际需求而定。 页面五:更多从已关注页面跳转而来,展示一些额外信息。简单的文字排版,不赘述。 最后小程序开发本身并不复杂,但是要做好做优还需要多学习和练习。这款小程序目前也只是停留在能用的阶段,还有很多需要完善和优化的地方,希望对大家学习有用。另外,有更好的建议请私我,谢谢大家。 |
小程序 | 注释级微信小程序demo,助你快速切入开发
发布:2018-09-01 09:49浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08