小程序模板网

基于Bmob从零开始写一个博客小程序

实现以下技能点

1、集成Bmob小程序SDK作为数据存储
2、wemark解析markdown文本
3、列表页布局与上拉无限加载

实现的效果


 

一、创建Bmob应用

进入Bmob官网:http://bmob.cn/,注册一个账号,免费的账号可以创建8个子应用,每个应用单表列数是20列,如要购买付费,可以分别买100元与1000元档,详见官网价目表。


 

1、创建一个应用


 

2、查看它的key信息以及配置自己小程序的key信息,如果有支付的,加配支付MchID与key,支付对于付费会员才可用。


 

3、进入网址:http://docs.bmob.cn/data/wechatApp/a_faststart/doc/index.html,来查阅小程序文档


 

4、为小程序添加白名单
在小程序管理后台,进入设置->开发设置->服务器域名,为4个域名统一添加地址为api.bmob.cn。


 

这事实是不对了,真正在填写的要等小程序报错时才知道,如下图


1-2报白名单错误.png

于是删除掉之前的填写的白名单api.bmob.cn,而使用小程序真正使用到的这个三级域名:4552ad36df85c1f29953ae3679c69248.bmobcloud.com
,小程序以前是1月允许3次修改白名单,目前是1个月允许5次,少走一些弯路可以节省一些次数的。

下图是我更正后的配置信息


 

二、小程序端集成

1、创建小程序项目,appid使用的就是刚刚配置在Bmob后台的那个appid。


 

2、打开app.js引入bmob的js sdk库,并初始化

var Bmob = require('utils/bmob.js');
Bmob.initialize("你的Application ID", "你的REST API Key");

sdk下载地址是:https://github.com/bmob/bmob-WeApp-sdk

三、读取文章列表

由于没有写专门的web后台,于是直接在bmob的后台可视化界面录入

1、建表与字段

字段名 类型 注释
title String 标题
content String 内容
priority Number 越大越靠前

1-3建表与字段.png

2、根目录下新建article目录,再新建list文件夹,下面放着list.wxml、list.wxss与list.js


1-4目录结构.png

注意要将刚刚创建的页面文件添加到app.json中

{
    "pages":[
        "article/list/list"
    ]
}

3、引入bmob.js文件,读取所有的文章列表列表

var Bmob = require('../../utils/bmob.js');
var that;
Page({
    onLoad: function () {
        that = this;
        var Article = Bmob.Object.extend("article");
        var query = new Bmob.Query(Article);
        // 按照priority逆序排列
        query.descending('priority');
        // 查询所有数据
        query.find({
            success: function(results) {
                // 请求成功将数据存入article_list
                that.setData({
                    article_list: results
                });
            },
            error: function(error) {
                alert("查询失败: " + error.code + " " + error.message);
            }
        });
    }
});

定义一个全局的that变量,以解决异步请求时作用域改变的问题,以后的每一个方法都使用that以代替this。

4、制作列表页布局文件与样式

<!-- 遍历文章列表 -->
<view wx:for="{{article_list}}" class="row" wx:key="">
    <!-- 缩略图 -->
    <view>
        <image src="{{item.thumb}}" class="thumb" mode="aspectFill" />
    </view>
    <!-- 标题与日期 -->
    <view>
        <!-- 标题 -->
        <view class="title">{{item.title}}</view>
        <!-- 日期 -->
        <view class="time">{{item.updatedAt}}</view>
    </view>
</view>

其中图片使用了aspectFill模式,保证了图片不变形且是填充满<image>标签的;且<image>需要包在<view>中,不然css设定的宽度无效,仅高度有效。


 
/*每行行内元素按行分布*/
.row {
    display: flex;
    flex-direction: row;
    margin: 10px;
}

/*缩略图*/
.thumb {
    width: 100px;
    height: 75px;
    margin-right: 10px;
    margin-top: 5px;
}

/*文章标题*/
.title {
   
    color: #333;
    margin: 10px 0;
    line-height: 130%;
}

/*日期*/
.time {
    font-size: 14px;
    color: #999;
    margin: 10px 0;
}

使用了flex布局作为左右排列与上下排列的控制。其中缩略图与文本呈左右排列, 标题与日期呈上面排列。

四、列表页分页

刚刚实现的列表是读取的全部,一般来讲会有上拉加载的效果,也就是分页

1、通过skip与limit实现分页

将请求代码独立出一个成员方法loadArticle(),以方便下拉加载与onLoad加载是共用

loadArticle: function () {
    var page_size = 10;
    ...
    // 分页
    query.limit(page_size);
    query.skip(that.data.page_index * page_size);
    // 查询所有数据
    query.find({
        success: function(results) {
            // 请求成功将数据存入article_list
            that.setData({
                article_list: that.data.article_list.concat(results)
            });
    });
}

使用concat方法将分页请求得到数组合并入原始数组,以求不断迭加。

onReachBottom: function () {
    that.setData({
        page_index: ++that.data.page_index
    });
    that.loadArticle();
}

实现onReachBottom方法加page_index不断加1,使页码递增后,再请求Bmob数据。

2、底部加上加载状态的文本显示

页面上加一个<view>

<view class="loading-indicator">
    {{loadingTip}}
</view>

配上样式

/*上拉加载提示*/
.loading-indicator {
    text-align: center;
    font-size: 12px;
    margin: 10px 0;
}

js文件如下处理

data: {
      loadingTip: '上拉加载更多'
}

声明好loadingTip数据后,如果本次请求返回的行数小于每页行数代表是否还有更多数据(粗略的算法,更合理地做法是多请求一行例如11行,返回不够数了才是真没有下一页了)

// 判断上拉加载状态
if (results.length < page_size) {
    that.setData({
        loadingTip: '没有更多内容'
    });
}

五、制作详情页

1、处理带参跳转

首先,为.row行添加一个点击事件

<view wx:for="{{article_list}}" class="row" wx:key="" bindtap="showDetail" data-index="{{index}}">

然后,取出wxml绑定的数值,设置跳转路径

showDetail: function (e) {
    // 获取wxml元素绑定的index值
    var index = e.currentTarget.dataset.index;
    // 取出objectId
    var objectId = that.data.article_list[index].id;
    // 跳转到详情页
    wx.navigateTo({
        url: '../detail/detail?objectId=' + objectId
    });
}

最后,在article目录创建detail文件夹,除创建同上页面3个文件外,再创建一个.json文件,配置页面标题栏文本显示

{
    "navigationBarTitleText": "文章详情"
}

2、detail页面接收参数

Page({
    onLoad: function (options) {
        // 获取传参
        var objectId = options.objectId;
    }
})

3、取出文章数据

以objectId为参数,向Bmob请求文详情数据

var Bmob = require('../../utils/bmob.js');
var that;

Page({
    data: {
        content: ''
    },
    onLoad: function (options) {
        that = this;
        // 获取传参
        var objectId = options.objectId;
        // 向Bmob请求详情页数据
        var Article = Bmob.Object.extend("article");
        //创建查询对象,入口参数是对象类的实例
        var query = new Bmob.Query(Article);
        //查询单条数据,第一个参数是这条数据的objectId值
        query.get(objectId, {
            success: function(result) {
                // 查询成功,调用get方法获取对应属性的值
                var content = result.get("content");
                that.setData({
                    content: content
                });
            },
            error: function(object, error) {
                // 查询失败
            }
        });
    }
})

4、渲染页面


 
<view class="container">
    <view class="title">{{article.title}}</view>
    <view class="time">{{article.updatedAt}}</view>
    <view class="content">{{article.content}}</view>
</view>

外层包裹一个container是为了设置边距,美化页面。

/*外部容器*/
.container {
    margin: 20px 10px;
}

/*标题*/
.title {
    text-align: center;
    color: #333;
    font-size: 20px;
    margin: 10px 0;
}

/*日期*/
.time {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin: 10px 0;
}

/*内容*/
.content {
    margin: 20px 0;
    font-size: 14px;
    color: #555;
    line-height: 140%;
}

如此,已经顺利获取到了详情页内容并显示出来了。剩下就是将markdown转为正常的显示。

六、利用wemark渲染文章

有大牛写好了一个针对小程序的markdown解析库,下载是https://github.com/TooBug/wemark

接下来按照git上的教程集成wemark。

1、wxml引入

<import src="../../wemark/wemark.wxml"/>
<template is="wemark" data="{{...wemark}}"></template>

删除原来的<view class="content">{{article.content}}</view>,因为不再用到它了。

2、wxss引入

@import '../../wemark/wemark.wxss'

3、js中引入

var wemark = require('../../wemark/wemark');

然后设定数据

    data: {
        wemark: {}
    },

再在请求Bmob成功回调里加上

// 渲染markdown
wemark.parse(result.get('content'), that, {
    imageWidth: getApp().screenWidth - 20
})

效果如下


 

这个例子是比较简单的,但是做复杂的基础,诸如flex布局,data存储,navigate传值,无限加载,可以说是必然会用到的,对于没有接触过小程序开发的朋友应该是有借鉴意义的。


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18211.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询