基于Bmob从零开始写一个博客小程序
2019独角兽企业重金招聘Python工程师标准>>>
实现以下技能点
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。
这事实是不对了,真正在填写的要等小程序报错时才知道,如下图
于是删除掉之前的填写的白名单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 | 越大越靠前 |
2、根目录下新建article目录,再新建list文件夹,下面放着list.wxml、list.wxss与list.js
注意要将刚刚创建的页面文件添加到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_listthat.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 {font-size: 16px;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_listthat.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;// 取出objectIdvar 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传值,无限加载,可以说是必然会用到的,对于没有接触过小程序开发的朋友应该是有借鉴意义的。
转载于:https://my.oschina.net/huangxiujie/blog/983128
基于Bmob从零开始写一个博客小程序相关推荐
- 微信小程序|搭建一个博客小程序
文章目录 一.文章前言 二.创建小程序 三.功能开发 (1)首页 (2)领域页 (3)博客详情页 (4)个人中心页 一.文章前言 此文主要通过小程序搭建一个博客系统,实现博客的一些基础功能,也可以当做 ...
- github项目怎么运行_利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- 利用 GitHub 从零开始搭建一个博客
"NightTeam",一个值得加星标的公众号. 趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域 ...
- 如何利用 GitHub 从零开始搭建一个博客
趁着周末,搭建了一下 NightTeam 的官方博客和官方主页,耗时数个小时,两个站点终于完工了. 由于 NightTeam 的域名是 nightteam.cn,所以这里官方博客使用了二级域名 blo ...
- 使用Node.js+Koa 从零开始写个人博客系统——后端部分(一)
使用Node.js+Koa 从零开始写个人博客系统系列 提示:在此文章中你可以学习到的内容如下: 1 如何使用Koa快速搭建项目 2 对Koa的核心组件Koa-Route的简单使用 3 3层架构思想 ...
- 用小程序·云开发打造功能全面的博客小程序丨实战
用小程序·云开发将博客小程序常用功能"一网打尽" 本文介绍mini博客小程序的详情页的功能按钮如何实现,具体包括评论.点赞.收藏和海报功能,这里记录下整个实现过程和实际编码中的一些 ...
- Mamba Blog 博客小程序版
项目简介 这是一个个人博客小程序版,使用 Mpvue 编写而成,服务端使用的是Bmob后端云,无需开发服务端接口即可使用,快速便捷,适合个人使用,功能包括签到,收藏文章,查看文章,消息通知,评论文章, ...
- 全新版个人博客小程序,无需开发服务端接口即可使用
介绍: 全新版个人博客小程序,服务端使用的是Bmob后端云,无需开发服务端接口即可使用,快速便捷,代码简洁,功能包括文章列表,文章分类列表,赞赏功能,签到,收藏文章,查看文章,点赞文章,消息通知,评论 ...
- python文件分发_python 写一个文件分发小程序
一.概述 该小程序实现从源端到目标端的文件一键拷贝,源端和目标段都在一台电脑上面,只是目录不同而已 二.参数文件说明 1. settings.txt的说明 a. 通过配置settings.txt,填源 ...
最新文章
- 从0梳理1场CV缺陷检测赛事!
- [导入]用程序来还原数据库(一个遗留了两年的问题)
- oracle 赋值表数据类型,PL/SQL数据类型及操作符
- switch与if效率实例解析·5年以下编程经验必看【C#】
- 了解活动目录操作主机角色及GUI命令行查看方法
- Redis的存储(实现)原理
- android 字符串转字节数组,java – 在Android中将字节数组转换为Charsequence
- c++ 编译添加dll_Windows下osg编译
- Error:Comments are not permitted in JSON
- java从0单排之java就业培训教程复习与面试题回顾——01
- J1939协议之通俗易懂----概述
- php获取笔顺矢量,PHP获取汉字笔画数功能【测试可用】
- Wordpress搭建完毕上传主题报错,Unable to create directory wp-content/uploads/...
- web技术基础---网站设计说明书
- 使用pinyin4j完成中文拼音转换
- 纯手工html+css实现静态游戏网首页(免费拿源码)
- smartbi试用体验
- 【向生活低头】十分白痴地自动删微博文章脚本
- 微信小程序上传Excel文本文件功能
- ASUS华硕天选2 FX506H INTELI711代CPU 原装出厂系统恢复原厂系统