最簡單的小程式怎麼做？

知曉雲發表於2017-12-04

前言

Hello，各位掘金的讀者們，我是犯迷糊的小羊，目前是一枚前端攻城獅。

微信小程式正處於風口浪尖上，很多萌新開發者都有「做一個小程式練練手」的想法，那麼本文就向大家介紹一下，我是如何建立我的第一個小程式的；文章的最後，以一個小程式 Demo 給詳細大家分享一下如何在小程式中接入 SDK ~

成為一名小程式開發者

申請成為小程式開發者是一件再簡單不過的事兒，僅需 2 步，比把大象放進冰箱還簡單哈~~~

  1. 登入微信公眾平臺，註冊成為小程式開發使用者。此過程微信要你依次完成賬號資訊、郵箱啟用和資訊登記等流程；

    註冊流程：資訊登記

  2. 完成上述操作後，就能進入小程式管理後臺，進入設定模組，獲取開發小程式的 AppID。恩，現在小羊已經是一枚準小程式開發者拉；

AppID

如何建立我的第一個小程式

獲得了准入資格後，小羊開始參照小程式官方文件，下載官方的開發者工具並建立了一個初始化的小程式；

minapp: creation

Welldone，小羊的第一個初始化小程式誕生了，喜大普奔有木有╰(￣▽￣)╭。 接下來，拿瓶益力多一邊吮吸一邊看看小程式官方的簡易教程文件，熟悉一下小程式程式碼組織方式和開發特性；

minapp: initialization

有了開發工具和基礎知識積累，好吧，可以表演 freestyle 咯；

選擇什麼型別的小程式開發呢？因為當時小羊開發的第一個小程式是作為知曉雲的 demo 給各位童鞋熟悉產品的介面使用的，因此小羊心目中的小程式應該是精簡的；

“簡” 是像小羊這樣的小白開發者一看就懂，“精” 是能夠儘可能在有限的程式碼中體現知曉雲功能的強大性；

於是，我整了個經典的 TodoMVC 的小程式——我的書架，我的書架這個 demo 基本將知曉雲的核心模組之一——資料管理的 CRUD 操作基本予以展示，通過這個 demo 能夠讓各位童鞋學會常見的資料增刪改查功能；

我的書架演示如下：

bookshelf

如何在小程式中接入和使用知曉雲的 SDK

正式使用 SDK 前的一些事兒

在正式使用知曉雲的 SDK 前，首先確保走完以下 2 個流程：

  • 在知曉雲建立的應用後，完成小程式的授權 目前，知曉雲在註冊模組和設定模組都有提供小程式授權操作，二者的授權流程大體一致； 下面演示設定模組的小程式操作：

點選應用標籤，進入應用的管理皮膚

進入應用

進入管理皮膚後，切換到設定模組並進入小程式設定 tab 頁，點選授權小程式按鈕即可完成授權

image.png

伺服器域名

閱讀開發文件

接下來的工作就是，看看知曉雲的 SDK 的使用說明文件，老夫掐指一算約莫花費10分鐘時間將 SDK 的接入小程式的方法和資料表操作看了一遍，畢竟 demo 只涉及資料操作嘛，所以要做到有的放矢，要啥看啥；

匯入 SDK 和初始化

下載知曉雲提供的 SDK 後，將其引入小程式的 app.js 中，並通過在前面的設定模組的小程式設定 tab 頁中獲取當前應用的 ClientID；

// app.js
App({
  onLaunch: function() {

    // 引入 BaaS SDK
    require('./utils/sdk-v1.0.10.js')

    // 從 BaaS 後臺獲取 ClientID
    let clientId = 'dbc6118437e43ada74c6'

    // initialize
    wx.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 物件上，以供後面各種資料操作介面的引數呼叫；

create table

// pages/index/index.js
Page({
  data: {
    tableID: 1, // 從 https://cloud.minapp.com/dashboard/ 管理後臺的資料表中獲取
  }
})
複製程式碼

使用知曉雲的 SDK

小羊在這裡不會細談我的書架是如何編寫的，因為不同的童鞋的對這個 demo 的實現方式可能不一，小羊只談談在哪些控制元件當中使用到知曉雲提供的介面來實現小羊的需求；

  • 建立書目的一條記錄

小羊的需求很簡單，我的書架首要功能就是可以新增一本書；

翻查了文件，發現建立一條記錄很簡單，只需新建一個資料表例項，然後呼叫該例項的 create 方法即可。

具體操作方法如下：

    // create a book
    let tableID = this.data.tableID
    let bookName = this.data.creatingBookName

    if (!bookName) return
    
    let
      Books = new wx.BaaS.TableObject(tableID),
      Book = Books.create(),
  
    let data = {
      bookName,
    }

    Book.set(data).save()
      .then(res => {})
      .catch(err => {})
複製程式碼

image.png

  • 更新一條記錄

有時，小羊手抖，在輸入書目的時候填寫了錯別字，那麼理應提供一個更新記錄的功能吧；

知曉雲在資料表例項提供一個 update 介面讓更新資料 so easy；

    let 
      tableID = 1，
      recordID = 1, // 需要更新資料的 ID
      bookName = '黑客與畫家'

    let
      Books = new wx.BaaS.TableObject(tableId),
      Book = Books.getWithoutData(recordId)

    let data = {
      bookName
    }

    Book.set(data)
      .update()
      .then(res => {})
      .catch(err => {})
複製程式碼

image.png

  • 刪除一條記錄

最後，當小羊的書架不再存在某本書時，必然需要一個刪除操作，通過呼叫資料表例項的 delete 方法就可以實現一條記錄的刪除操作

    let tableID = 1
    let recordID = 1

    let Books = new wx.BaaS.TableObject(tableId)

    Books.delete(recordId)
      .then(res => {}
      .catch(err => {})
複製程式碼

image.png

後記

以上就是小羊用知曉雲烹調出的第一個小程式——我的書架，最主要就是用到了知曉雲的資料管理功能模組；

當然，知曉雲還提供作為 BaaS 產品的基礎 檔案上傳和 資料統計功能等，同時具備貼切小程式的特性功能，譬如 微信支付和富文字編輯功能；

除了我的書架的 demo 外，知曉雲官方還提供 lbs-demo 用於演示稍微複雜的業務實現，以及 payment-demo，用於展示 SDK 的線上支付的特性支援，程式碼開源已開源在 github上，有興趣的童鞋可以 star 或是 fork；

Anyway，耐著性子聽完小羊的聒噪的童鞋還有問題的話，可以第一時間諮詢知曉雲團隊的溫柔、可愛的知曉妹（微訊號：minsupport2），她會為你一一解答哈~~~

實踐證明，用了知曉雲，王者農藥小羊多 A 了 幾 局，排位還連勝呢~

PS：如果想獲得其他小程式 Demo，也可以新增知曉妹（微訊號：minsupport2）噢~

相關文章