小游blog小程序详解

暑假夏令营把微信小程序学了一下,然后就直接开始做这个小程序了,现在夏令营结束了,我的小程序也完工了,虽然做的还不够完善,不过慢慢来吧,以后有时间升级一下功能吧

先在这里感谢CavinCao的开源小程序博客项目,我的小程序的UI界面是在他的基础上改的,还有jasondu的微信海报生成的项目以及html解析项目

进入正题,这次开发的难度主要不是在微信小程序上,而是后台,因为个人小程序是不能打开网页的,而且也不能内嵌网页,对于我这个纯web界面博客来说,只能重新搭建后台服务器了。上次开发的app是完全靠网页控件来显示的,难度在于应用本身,所以感觉就像走了两个极端啊。

所以我把大部分时间都花在搭建后台的api服务器上了,本来我是想直接调用数据库的,不过发现这样做挺麻烦的,而且wordpress的数据库很乱,都不知道怎么排的,所以我就直接采用爬虫把数据爬下来然后在返回json数据就可以实现一个很简单的后台接口功能了。因为我也是第一次搭建后台服务器,所以这些接口都非常简陋,没有任何的认证,不过反正也是爬公开的数据,所以我也就没写认证了(主要还是自己不会写)。

PHP后台源码我也会开源,不过你肯定不能直接拿过来用的,因为是爬虫的原因,不同的网站主题不一样,爬法也肯定不一样,我这里使用的是PHP Query库来爬的,大家可以参考一下这篇文章来简单的学习一下这个库的用法。

PHP后台服务器有以下几个部分:一是爬首页以及分类页的文章,二是爬文章的详细内容,三是爬日记,四是评论功能,五是获取openid。这些东西我都会在源码上面加上注释,请自行修改相关代码,所以推荐那些对PHP很熟悉的人使用。同时小程序的评论系统其实是和我原来的博客不一样的,别问我为什么(因为太麻烦了。。。)。所以大家想使用的话需要自己新建一个数据库,然后下面是数据库的格式:

openid可以直接调用后台的api,请大家自己把APPID还有秘钥加到后台文件中。

后台服务器原理还是比较简单的,主要写起来很麻烦,而且适用性很差,所以大家主要还是要修改这部分的代码,微信小程序则只需要改一下服务器的地址即可。

下面介绍一下小程序:

小程序主要包括三个板块,主页,板块,还有个人中心,个人中心只有最基本的登录功能,其他功能我暂时还没有写(还是时间问题)。

上面面这个是首页的图,下面是api服务器返回的json数据,大家也可以自己写api服务器,只要满足下面的格式就可以了。

首页可以下拉刷新,也可以上拉加载更多,其实这个就是对应我博客页数,通过传入不同的id即可获得不同的数据。

点击列表任意一项即可进入文章详情页,因为微信不支持内嵌网页,而且个人小程序也不能显示网页,所以只能采用一个开源的小程序网页解析的项目,当然这个项目不支持css和js,只能识别标签的style,所以我这里很多效果都无法正常显示,只能显示一些简单的样式,大家就看看文字和图片也可以满足基本的阅读体验。当然这里也提供了阅读原文的功能,点击后就可以查看原文的网址并进行复制,然后可以自行到浏览器上查看。

评论是直接是从api服务器上获取的,不支持显示原文的评论,而且里也不支持回复功能。

海报功能是原小程序的,我只改了一点点(因为原先那个是基于云开发的,所以我修改了一下)。

板块功能其实也很简单,就是显示固定的几个板块(这里是固定的,不是调api获得的)

点击某个板块后会进入文章列表,这里获取文章的原理和主页获取的原理差不多,所以也不需要多解释。

最后一个就是日记了,日记的样式和文章的不一样,所以这里我写了一个专门返回日记的api,日记的样式如下:

返回的json格式如下

其他的好像也没什么了,这里很多地方还请自己看代码把,我这里只说思路。

项目的github地址:https://github.com/youlei55/miniProgrameBlog

目前小程序还在审核,审核通过后会第一时间贴出来让大家体验一下

点赞
  1. NHYAYN说道:

    隔十八行的毕业狗 :huaji:
    现在学妹学姐都那么牛了吗 :huaji:
    我得点根烟冷静一下了。 :huaji:

    1. 小游 小游说道:

      首先,我是男的 :huaji:
      其次我还是小白,技术还很菜的 :heixian:

      1. lybxo说道:

        传送中的令和猛男 :huaji: :huaji2:

  2. sunnyboy说道:

    表示也是大一 下学期大二
    然后在学校感觉我还算diao的了
    然后跟你一比我。。。特么。。。。。
    自闭了。。。。加油收藏了 :huaji:

    1. 小游 小游说道:

      大佬太多了,我也深受打击啊 :bilibili18:

发表评论

昵称和uid可以选填一个,填邮箱必填(留言回复后将会发邮件给你)
tips:输入uid可以快速获得你的昵称和头像

Title - Artist
0:00