评论

学习笔记-个人博客小程序1

学习笔记-博客小程序

昨晚听了犀牛鸟大咖白老师和娇老师的视频授课,闲来无事,希望接下来不在断断续续学习小程序,而是静下心来用心学。发现娇老师总结的三点不错:1、要多看书;2、要总结写学习笔记;3、有一个好的导师很重要;前两者相信大家都能做到,第三者就随缘了。

一直有关注:追风少年分享的个人博客小程序,自己刚好也想写个博客小程序,他也无私地把自己的代码分享出来了:https://github.com/husanfeng/hsf_blog.git;已给他留言,解读他的源码 应该不会被投诉吧?希望能够得到他的理解和支持!

我的目的很简单,希望对自己感兴趣的小程序源码的学习,快速提高自己的技能~

下载好源码后,话不多说了,我们开始吧~

我的天呐,小程序端就有21个页面,一看到就头大;

我们先看看tabBar:

四个关键的页面,分别是:pages/home/home、pages/special/special、pages/ranking/ranking、pages/me/me;

先从pages/home/home开始:

这里用view/scroll-view/swiper组件,然后引用了article-list-compent组件;

compent引用方法在json中引进:


好的,下面我们结合小程序界面来研究下page/home/home里面的代码:

下面看两个界面,第一个是作者的,第二个是我们下载代码后的(我想应该是我们取不到数据,所以界面不一样,只是个框架):

这个首页,我们从上往下看,貌似挺简单,上门一个轮播图,下面是作者发的博客文章标题,但是包括发布时间、评论、浏览和点赞的数量;

我们先看看这个轮播图的代码:

indicator-dots"{{indicatorDots}}"(是否显示面板指示点,是个变量) indicator-active-color"#1296db"(当前选中的指示点颜色:蓝色circular"true" (采用衔接滑动autoplay"{{autoplay}}"(自动切换,变量) interval"{{interval}}" (自动切换时间间隔:变量duration"{{duration}}(滑动动画时长:变量);

block组件循环变量:imgUrls;swiper-item:item.url;这个swiper组件有7个变量,我们进入home.js看看这些变量:

有四个变量是设好固定数值的,我们重点看看imgUrls是个数组类型,通过查找发现imgUrls出现两处,另外一处是:

那我们看看这个initSwiper函数的关键代码:db.collection('top_images').orderBy("_id", 'asc').get({

success: function(res) {

// res.data 包含该记录的数据

console.log(res.data)

_this.setData({

imgUrls: res.data

})

},

查文档说明collection.orderBy的用法:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/database/collection/Collection.orderBy.html

根据文档,我对这段代码的理解是:通过云开发调用作者数据库名为“top_images”的图片,排序的文件名字段为_id,order排列顺序为:asc?asc是字母越大越靠前?

再看看这个initSwiper函数在哪里开始执行:

饿了吃饭先,下午慢慢解析,理解的不对,欢迎指正 不要喷 Thanks♪(・ω・)ノ

最后一次编辑于  2020-03-07  
点赞 2
收藏
评论

2 个评论

  • 一骑白马开吴疆®
    一骑白马开吴疆®
    2020-06-21

    分享一种博客生成方式,在文章来源上,通过webhook(POST到云函数)与github仓库(可以是hexo或jekyll源码)同步,或者说其实与博客构建方式无关,只关注markdown,化繁为简,回归写博文的初衷。在云函数中可以通过markdown解析库来构建。

    下列小程序通过https://github.com/MakerGYT/markdown-it-latex2img从而支持了小程序端latex/mathjax语法的渲染。


    2020-06-21
    赞同 1
    回复
  • 马尚尚
    马尚尚
    2020-03-14
    学习了,非常细致的一篇分享
    2020-03-14
    赞同
    回复
登录 后发表内容