手把手教你写个微信小程序

手把手教你写个微信小程序

很多人看完bmob快速入门，并完成了bmob的基本配置之后依然不知道如何下手去写自己的代码，那么跟着我一起来一步一步做个小程序吧。
工具：Bmob后端云

新建小程序项目

一、新建项目选择小程序项目，选择代码存放的硬盘路径，填入你的小程序 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

下载和安装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类型,用于存放文章的正文

然后添加一些数据进行测试

列表页面实现

一、去到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 = new Bmob.Query(Diary);
    query.find({
      success: (results) => {
        console.log(results)//打印数据
      },
      error(error) {
        console.log(`查询失败: ${error.code } ${error.message}`);
      }
    });
  },
})

这里完成了一次对bmob的数据查询，bmob文档传送门, 这个查询默认返回10条记录。当数据多了之后，一次查询很多数据