最简单的小程序怎么做？

前言

Hello，各位掘金的读者们，我是犯迷糊的小羊，目前是一枚前端攻城狮。

微信小程序正处于风口浪尖上，很多萌新开发者都有「做一个小程序练练手」的想法，那么本文就向大家介绍一下，我是如何创建我的第一个小程序的；文章的最后，以一个小程序 Demo 给详细大家分享一下如何在小程序中接入 SDK ~

成为一名小程序开发者

申请成为小程序开发者是一件再简单不过的事儿，仅需 2 步，比把大象放进冰箱还简单哈~~~

登录微信公众平台，注册成为小程序开发用户。此过程微信要你依次完成账号信息、邮箱激活和信息登记等流程；
完成上述操作后，就能进入小程序管理后台，进入设置模块，获取开发小程序的 AppID。恩，现在小羊已经是一枚准小程序开发者拉；

如何创建我的第一个小程序

获得了准入资格后，小羊开始参照小程序官方文档，下载官方的开发者工具并创建了一个初始化的小程序；

Welldone，小羊的第一个初始化小程序诞生了，喜大普奔有木有╰(￣▽￣)╭。接下来，拿瓶益力多一边吮吸一边看看小程序官方的简易教程文档，熟悉一下小程序代码组织方式和开发特性；

有了开发工具和基础知识积累，好吧，可以表演 freestyle 咯；

选择什么类型的小程序开发呢？因为当时小羊开发的第一个小程序是作为知晓云的 demo 给各位童鞋熟悉产品的接口使用的，因此小羊心目中的小程序应该是精简的；

“简” 是像小羊这样的小白开发者一看就懂，“精” 是能够尽可能在有限的代码中体现知晓云功能的强大性；

于是，我整了个经典的 TodoMVC 的小程序——我的书架，我的书架这个 demo 基本将知晓云的核心模块之一——数据管理的 CRUD 操作基本予以展示，通过这个 demo 能够让各位童鞋学会常见的数据增删改查功能；

我的书架演示如下：

如何在小程序中接入和使用知晓云的 SDK

正式使用 SDK 前的一些事儿

在正式使用知晓云的 SDK 前，首先确保走完以下 2 个流程：

在知晓云创建的应用后，完成小程序的授权目前，知晓云在注册模块和设置模块都有提供小程序授权操作，二者的授权流程大体一致；下面演示设置模块的小程序操作：

点击应用标签，进入应用的管理面板

进入管理面板后，切换到设置模块并进入小程序设置 tab 页，点击授权小程序按钮即可完成授权

授权成功后，在「小程序后台」配置安全域名

阅读开发文档

接下来的工作就是，看看知晓云的 SDK 的使用说明文档，老夫掐指一算约莫花费10分钟时间将 SDK 的接入小程序的方法和数据表操作看了一遍，毕竟 demo 只涉及数据操作嘛，所以要做到有的放矢，要啥看啥；

导入 SDK 和初始化

下载知晓云提供的 SDK 后，将其引入小程序的 app.js 中，并通过在前面的设置模块的小程序设置 tab 页中获取当前应用的 ClientID；

// app.js
App({onLaunch: function() {// 引入 BaaS SDKrequire('./utils/sdk-v1.0.10.js')// 从 BaaS 后台获取 ClientIDlet clientId = 'dbc6118437e43ada74c6'// initializewx.BaaS.init(clientId)}
})
复制代码

设计数据结构和创建数据表

完成上述操作后，小羊就可以使用 SDK 提供的各种接口，接下来思考一下“我的书架”将用到什么数据及其结构；

由于是第一个 demo ，本着精简的原则，小羊在此就只设计了一个 bookName 的字段

字段	类型	示例
bookName	string	‘傲慢与偏见’

[Tips] 知晓云的数据管理模块会为每张数据表自动创建 id，create_by，create_at，update_at 和 acl 等字段

根据文档提示，在使用知晓云的数据管理模块时，需要首先提供存放数据的 tableID。因此，首先要在知晓云开发者平台创建数据表从而获取 tableID：

获取 tableID 后，小羊将其放在了 pages/index/index.js 文件的 data 对象上，以供后面各种数据操作接口的参数调用；

// pages/index/index.js
Page({data: {tableID: 1, // 从 https://cloud.minapp.com/dashboard/ 管理后台的数据表中获取}
})
复制代码

使用知晓云的 SDK

小羊在这里不会细谈我的书架是如何编写的，因为不同的童鞋的对这个 demo 的实现方式可能不一，小羊只谈谈在哪些控件当中使用到知晓云提供的接口来实现小羊的需求；

创建书目的一条记录

小羊的需求很简单，我的书架首要功能就是可以添加一本书；

翻查了文档，发现创建一条记录很简单，只需新建一个数据表实例，然后调用该实例的 create 方法即可。

具体操作方法如下：

    // create a booklet tableID = this.data.tableIDlet bookName = this.data.creatingBookNameif (!bookName) returnletBooks = new wx.BaaS.TableObject(tableID),Book = Books.create(),let data = {bookName,}Book.set(data).save().then(res => {}).catch(err => {})
复制代码

更新一条记录

有时，小羊手抖，在输入书目的时候填写了错别字，那么理应提供一个更新记录的功能吧；

知晓云在数据表实例提供一个 update 接口让更新数据 so easy；

    let tableID = 1，recordID = 1, // 需要更新数据的 IDbookName = '黑客与画家'letBooks = new wx.BaaS.TableObject(tableId),Book = Books.getWithoutData(recordId)let data = {bookName}Book.set(data).update().then(res => {}).catch(err => {})
复制代码

删除一条记录

最后，当小羊的书架不再存在某本书时，必然需要一个删除操作，通过调用数据表实例的 delete 方法就可以实现一条记录的删除操作

    let tableID = 1let recordID = 1let Books = new wx.BaaS.TableObject(tableId)Books.delete(recordId).then(res => {}.catch(err => {})
复制代码

后记

以上就是小羊用知晓云烹调出的第一个小程序——我的书架，最主要就是用到了知晓云的数据管理功能模块；

当然，知晓云还提供作为 BaaS 产品的基础 文件上传和 数据统计功能等，同时具备贴切小程序的特性功能，譬如 微信支付和富文本编辑功能；

除了我的书架的 demo 外，知晓云官方还提供 lbs-demo 用于演示稍微复杂的业务实现，以及 payment-demo，用于展示 SDK 的在线支付的特性支持，代码开源已开源在 github上，有兴趣的童鞋可以 star 或是 fork；

Anyway，耐着性子听完小羊的聒噪的童鞋还有问题的话，可以第一时间咨询知晓云团队的温柔、可爱的知晓妹（微信号：minsupport2），她会为你一一解答哈~~~

实践证明，用了知晓云，王者农药小羊多 A 了几局，排位还连胜呢~

PS：如果想获得其他小程序 Demo，也可以添加知晓妹（微信号：minsupport2）噢~