从零开发一个微信小程序教程

很多人了解bmob快速入门开发小程序，不懂的小伙伴可以看看“使用bmob后端云快速搭建小程序用户模块”这篇教程，并完成了简单的基本配置之后依然不知道如何下手去写自己的代码，其实，要想从零开发一个微信小程序，最好从实际项目开始动手，就算没有代码基础的小伙伴在开发过程中也能了解到小程序开发的技巧。下面为大家展示从零开始开发一个小程序步骤。

下载和安装BmobSDK，先搭建好开发环境和服务器，为项目做准备。

一、把bmob-min.js和underscore.js放到相应的文件，例如放到utils中

二、接着是在app.js中加入下面两行代码进行全局初始化

const Bmob = require(\'utils/bmob.js\');

Bmob.initialize(你的Application ID, 你的REST API Key);

数据库的搭建

一、创建一个名字为detail的表，然后点击添加列创建3个字段，一个一个的添加

title字段,String 类型,用于存放文章的标题 image字段,String 类型,用于存放文章的图片 detail字段 String类型,用于存放文章的正文，然后添加一些数据进行测试。

新建小程序项目

一、新建项目选择小程序项目，选择代码存放的硬盘路径，填入你的小程序 AppID，给你的项目起一个好听的名字，最后，点击确定，你就得到了你的小程序了开发者工具传送门

目录结构

page

index

index.js

index.wxml

index.wxss

logs

logs.js

logs.json

logs.wxml

logs.wxss

utils

util.js

app.js

app.json

app.wxss

project.config.json

列表页面实现

一、去到index.js中 Ctrl + A然后按Delete清空这个页面，然后自己来写逻辑吧，首先我们需要引入bmob.js 然后在onLoad小程序生命周期中去请求detail表中的数据，让bmob和小程序完成第一次交互

//index.js

//获取应用实例

const Bmob = require(\'../../utils/bmob.js\'); //每个需要使用到bmob的页面都需要引入这个js

Page({

onLoad() {

let Diary =Bmob.Object.extend(detail); //引入detail这张表

let query = newBmob.Query(Diary);

query.find({

success: (results)=> {

console.log(results)//打印数据

},

error(error) {

console.log(`查询失败:${error.code } ${error.message}`);

}

});

},

})

这里完成了一次对bmob的数据查询，bmob文档传送门, 这个查询默认返回10条记录。当数据多了之后，一次查询很多数据，这样是不友好的，并不是说bmob查询数据慢，而是指如果将来你的用户在网速比较慢的情况使用你的小程序，请求数据等待时间过长，这个等待的过程也许会导致用户不再使用你的小程序。所以我们需要优化用户体验。那么将代码改造成一上拉加载更多。

//index.js

//获取应用实例

const app = getApp();

const Bmob = require(\'../../utils/bmob.js\'); //每个需要使用到bmob的页面都需要引入这个js

Page({

data: {

detail:[], //页面数据

pagination:0, //页码

pageSize: 4, //每页数据

nodata:true //无数据

},

onLoad() {

//初始页面第一次获取页面数据

this.getData();

},

getData(){

let Diary =Bmob.Object.extend(detail); //引入detail这张表

let query = new Bmob.Query(Diary);

query.limit(this.data.pageSize); //返回n条数据

query.skip(this.data.pageSize * this.data.pagination); //分页查询

query.descending(\'createdAt\'); //已created列倒序

query.find({

success: (results)=> {

let data = [];

//将得到的数据存入数组

for (let objectof results) {

data.push({

id:object.id,

title:object.get(\'title\'),

image:object.get(\'image\'),

detail:object.get(\'detail\'),

createdAt:app.timeago(object.createdAt) //调用timeagoJs把日期转成N天前格式

})

}

//判断是否有数据返回

if(data.length){

let detail =this.data.detail; //得到页面上已经存在的数据(数组)

let pagination= this.data.pagination; //获取当前分页(第几页)

detail.push.apply(detail,data); //将页面上面的数组和最新获取到的数组进行合并

pagination =pagination ? pagination+1 : 1; //此处用于判断是首次渲染数据还是下拉加载渲染数据

//更新数据

this.setData({

detail:detail,

pagination:pagination

})

}else{

//没有返回数据，页面不再加载数据

this.setData({

nodata: false

})

}

},

error(error) {

console.log(`查询失败:${error.code } ${error.message}`);

}

});

},

router(e) {

//跳转至文章详情页

const id =e.currentTarget.dataset.id

wx.navigateTo({

url:`../detail/detail?id=${id}`

})

},

onReachBottom(){

//下拉触底加载更多数据

this.getData();

}

})

上述代码中在日期处使用了timeagoJs下载地址,下载timeagoJs放到util文件夹中,然后在app.js中引入。

//app.js

const Bmob = require(\'./utils/bmob.js\')

const timeago = require(./utils/timeago.min.js);

Bmob.initialize(你的Application ID, 你的REST API Key);

App({

timeago(date){

return newtimeago().format(date, \'zh_CN\')

}

})

二、完成了列表页逻辑层之后，去到index.wxml编写视图层，视图层就简单许多了，得到的数据是一个数组，数组里面是一个json,用wx:for方法把它渲染出来就好了。

三、来对页面进行一些美化，编写一样样式吧。

/**index.wxss**/

.container{ padding: 30rpx;}

.pane{ width: 100%; margin-bottom:30rpx; border-radius: 5rpx;overflow: hidden; box-shadow: 0 0 10rpx rgba(0, 0, 0, .1) }

.pane image{ width: 100%; height: 240rpx; display: block;}

.pane .content{ background-color: #FFF; padding: 20rpx;}

.pane .title{ display: block; font-size: 30rpx; font-weight:bold; margin-bottom: 20rpx;}

.pane .date{ display: block; font-size: 24rpx; color: #999}

.nodata{ text-align: center; font-size: 24rpx; color: #999}

如果你不喜欢写这些ui布局，或者前端ui，css比较差，可以直接用别人写好的现成的样式传送门。

以上列表页面算是完成了。此时点击页面的时候，应该会报错，提示detail页面未配置，那来到app.json里面配置一下detail这个页面。文章的id已经传过来了,文章的详情页就当是自己的一个小练习，熟悉bmob吧。

请观看 小程序视频教程 了解详情，更多资讯请关注 小程序开发教程