评论

我是如何从零开始写出一个微信小程序的

代码详解如果从0开始,开发小程序

话不多说,直接开干
工具: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条记录。当数据多了之后,一次查询很多数据,这样是不友好的,并不是说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 object of 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 new timeago().format(date, 'zh_CN')
  }
})

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

<!--index.wxml-->
<view class='container'>
  <view class='pane' wx:for='{{detail}}' wx:key="index" data-id='{{item.id}}' bindtap='router'>
    <image src='{{item.image}}'mode='aspectFill'></image>
    <view class='content'>
      <text class='title'>{{ item.title }}</text>
      <text class='date'>{{ item.createdAt }}</text>
    </view>
  </view>
  <view wx:if='{{!nodata}}' class='nodata'>没有更多数据了</view>
</view>

三、来对页面进行一些美化,编写一样样式吧。毕竟这是一个看脸的社会

/**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吧。

欢迎沟通:
Q群:372103594
个人QQ:2967459363

最后一次编辑于  03-05  
点赞 2
收藏
评论

5 个评论

  • 💣
    💣
    03-07

    新手不用看了。浪费时间 广告贴。

    03-07
    赞同 3
    回复
  • 梁海涛
    梁海涛
    03-06

    推荐一款 一键安装的开源小程序商程源码,我一个编程初学者也能快速部署自己的小程序商城,简直美包包:https://github.crmeb.net/u/demo

    03-06
    赞同
    回复
  • ÿ
    ÿ
    03-05

    作为一个初学者 我很想知道“把"bmob-min.js"和"underscore.js"放到相应的文件,例如放到utils中”这在哪下载,还有“timeago.js”这个在哪下载 bmob是用来做什么的? 在解决什么问题上比较方便? 一只菜鸡发出了疑问

    03-05
    赞同
    回复 1
    • Bmob后端云
      Bmob后端云
      03-06

      请:

      看官网:www.bmob.cn

      加Q群

      慢慢学习

      03-06
      回复
  • .
    .
    03-05

    无法读取未定义的属性“extend”;

    03-05
    赞同
    回复 1
    • Bmob后端云
      Bmob后端云
      03-06

      加Q群,有技术客服

      03-06
      回复
  • raphealguo
    raphealguo
    03-05

    ###新建小程序项目 格式有点问题,###后边加个空格

    03-05
    赞同
    回复 1
    • Bmob后端云
      Bmob后端云
      03-05

      哈哈,多谢,比较忙,直接从md文件上复制过来的,没注意格式

      03-05
      回复