小程序版博客——整体框架搭建

本篇主要记录下自己搭建小程序版博客的整体框架过程及自己在搭建过程中学习到点和一些坑。

开发前的一些思考

在开发前,还是要稍微想下到底需要哪些功能,哪些页面,尽量有一些计划性(这对所有着手做的事都是一个道理)。

利用Xmind稍微梳理下,明确下主要开发内容,后期开发过程中有问题点或者需要扩展也可以简单在树形图中扩展,至于画原型就省略了,基本按照自己的审美来吧。

然后就是找个UI库了,像我这种半吊子的前端渣渣,还是需要找个轮子用下的,看了开源的有赞UI库,感觉还不错,就用它了。

最后还需要一个第三方插件,将html格式的富文本内容转换成小程序可展示的内容,在网上找了一大圈,貌似只找到wxParse,先尝试着使用,但后面接入后发现,展示文章的样式效果不是特别理想。

框架搭建

页面创建及引入组件

下面就正式开始搭建项目,新增项目之后,在pages把对应的页面加好(首页,专题,我的,详情页)。

接着引入有赞UI库,在github上下载后,在dist文件夹引入项目,在app.wxss引入有赞全局样式:

/**app.wxss**/
@import "dist/index.wxss";

最后引入wxParse,同样在github上下载之后,将对应的文件copy你的项目中即可,在需要引用的页面引入即可。

配置

创建的页面需要串联起来,根据官方文档,需要配置app.json

app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

我的配置供参考:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/mine/mine",
    "pages/topic/topic",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Bug生活2048",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "color": "#959394",
    "selectedColor": "#959394",
    "backgroundColor": "#f0f0f0",
    "borderStyle": "white",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "images/tabbar/home.png",
        "selectedIconPath": "images/tabbar/home_click.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/topic/topic",
        "iconPath": "images/tabbar/like.png",
        "selectedIconPath": "images/tabbar/like_click.png",
        "text": "专题"
      },
      {
        "pagePath": "pages/mine/mine",
        "iconPath": "images/tabbar/about.png",
        "selectedIconPath": "images/tabbar/about_click.png",
        "text": "我的"
      }
    ]
  }
}

到这里,你可以尝试着运行调试一下了,点击底部tab按钮,可以进行页面跳转了,接下来就是丰富页面了。

首页页面搭建

对于页面设计这里没什么好说的,主要是一个列表页,主要利用可滚动视图区域(scroll-view),结合有赞UI和一些CSS样式,自行设计,整体页面效果如下:

专题页面搭建

专题部分比较尴尬,由于ghost目前没有类似文章分类的功能,所以只能取巧根据标签来作为专题的分类,把一些常用的标签整理出来。

结合有赞提供的tab组件和card组件,拼凑出专题页面,页面效果如下:

用户中心页面搭建

用户中心页面样式相对比较简单了,基本上大同小异,主要利用有赞UI的cell组件,页面效果如下:

好啦,到这里,小程序的架子基本上有了,通过手机预览感觉也还不错。

数据请求

页面基本上有点样子了,接着需要实现下数据交互了。这里需要用到小程序的APIwx.request,具体参数说明可以参考官方文档。

这里简单封装了下:

const wxRequest = (params, url) => {
  wx.request({
    url,
    method: params.method || 'GET',
    data: params.data || {},
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    success(res) {
      if (params.success) {
        params.success(res);
      }
    },
    fail(res) {
      if (params.fail) {
        params.fail(res);
      }
    },
    complete(res) {
      if (params.complete) {
        params.complete(res);
      }
    },
  });
};

页面注册可参考文档Page()的具体说明,这里主要用到属性data,其实就是定义些提供给页面的数据变量,同过setData来实现改变数据变量的值。

通过onLoad属性来初始化页面加载。代码参考:

const util = require('../../utils/util.js');
const api = require('../../utils/api.js');
var page = 0
var app = getApp()
Page({
  //初始化一些变量
  data: {
    posts: [],//具体实体
    page: 0
  },
  //初始化页面加载
  onLoad: function () {
    console.log('onLoad')
    var that = this
    this.getData();
  },
  getData: function () {
    let that = this;
    let page = that.data.page;
    api.getBlogList({
      query: {
        limit: 10,
        page: page + 1,
        fields: 'id,title,custom_excerpt,created_at'
      },
      success: (res) => {
        const posts = res.data.posts;
        this.setData({
          posts: this.data.posts.concat(posts),
          page: res.data.meta.pagination.page,
        });
      },
    });
  }
})

这样在wxml下就可以接收对应的数据了:

 <block wx:for="{{posts}}" wx:for-index="idx" wx:for-item="item" data-idx="{{idx}}">
  ......

小结

搭建过程中主要熟悉下小程序的API以及有赞UI库的使用,相关细节可以参考对应的文档,还是比较详细的。

由于目前博客小程序还在开发中,后期等上线后源码会分享出来。

Ps.由于公众号里无法跳转链接,可点击原文直接浏览我的博客,体验会好一丢丢。

原文发布于微信公众号 - Bug生活2048(BugLife2048)

原文发表时间:2018-04-22

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张戈的专栏

WordPress集成PHP缩略图,并开启Nginx缓存的方法

之前张戈博客分享过一篇给 WordPress 开启 Nginx 缩略图的教程,用着确实不错!但是总感觉清晰度不敢恭维,就算将裁剪质量调到 90 依然失真严重,于...

37170
来自专栏DeveWork

响应式 HTML 邮件制作之三个实例

制作HTML 邮件并不是想象中的那么简单,不仅仅要考虑到兼容各大的邮箱的问题,加之安全因素(比如图片可能是默认不打开的,javascript 没有戏了),现在又...

36390
来自专栏美丽应用

Linux Deploy:部署图形界面环境

64710
来自专栏腾讯AlloyTeam的专栏

Node 直出理论与实践总结

直出是什么?到底是怎样的性能优化?本文将结合从在浏览器输入url,到展示最终页面的过程来对其进行一步步分析,并将在手Q web 中的实际应用实践进行总结。

85100
来自专栏魏艾斯博客www.vpsss.net

国外免费 Linux 面板-VestaCP 安装及建站教程

1K20
来自专栏Coding+

Fiddler 极速上手

Fiddler 是一个 http协议 调试代理工具,它能够记录并检查所有你的电脑和互联网之间的http通讯,设置断点,查看所有的“进出” Fiddler 的数据...

17030
来自专栏Jerry的SAP技术分享

到底哪种类型的错误信息会阻止business transaction的保存

当试图在CRM WebUI保存一个business transaction比如Opportunity时,可能会遇到各种各样的错误消息。有的错误消息会阻止Busi...

19760
来自专栏王磊的博客

VueJs开发笔记—IDE选择和优化、框架特性、数据调用、路由选项及使用

一、IDE的选择:   VsCode和WebStorm都是不错的选择,说一下两者的优缺点,调试便捷性来说两者不相上下.   WebStorm缺点:性能方面VsC...

43150
来自专栏deepcc

pjax 历史管理 jQuery.History.js

42150
来自专栏FreeBuf

没想到你是这样的Linux | 终端下有趣的命令合集

前言 刚开始接触Linux的我们,肯定认为Linux系统就是那种枯燥的终端界面。然而实际上Linux下的终端还是有很多种有趣的玩法~~ toilet 简介 to...

48350

扫码关注云+社区

领取腾讯云代金券