借助微信小程序盈利期，，，开发一个小程序能够为线下现实导流，，，而关于一些线下古板商家来说，，，开发一个小程序没有任何基础！！。。。，，下面为各人介绍微信小程序 开发流程介绍，，，适合零基础小程序开发者。。。。。。

新建小程序项目

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

以上列表页面算是完成了。。。。。。此时点击页面的时间，，，应该会报错，，，提醒detail页面未设置，，，那来到app.json内里设置一下detail这个页面。。。。。。

以上是微信小程序 开发流程介绍，，，更多关于微信小程序其他功效开发，，，可以关注本网站，，，谢谢。。。。。。

小程序工具提供多类型商城/门店小程序制作，，，可视化编辑 1秒天生5步上线。。。。。。通过拖拽、拼接？？？？？榻峁剐〕绦蛏坛且趁妫，，所看即所得，，，只需要美工就能做出细腻商城。。。。。。更多小程序请审查：小程序市肆