摘要：所以不僅本地視圖會刷新，云數據庫也會同步更新，更新回調在里執行。實例查詢歲的用戶同步本地到云數據庫返回值返回對象的實例。

好的設計便是感覺不到設計的存在

開發小程序，但是：沒有后端！沒有運維！沒有 DBA！沒有域名！沒有證書！沒有錢！沒有精力！

沒關系，會 javascript 就可以，Westore Cloud 帶你起飛~~

https://github.com/dntzhang/westore

開發者可以使用云開發開發微信小程序、小游戲，無需搭建服務器，即可使用云端能力。

云開發為開發者提供完整的云端支持，弱化后端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業務開發，即可實現快速上線和迭代，同時這一能力，同開發者已經使用的云服務相互兼容，并不互斥。

目前提供三大基礎能力支持：

云函數：在云端運行的代碼，微信私有協議天然鑒權，開發者只需編寫自身業務邏輯代碼

數據庫：一個既可在小程序前端操作，也能在云函數中讀寫的 JSON 數據庫

存儲：在小程序前端直接上傳/下載云端文件，在云開發控制臺可視化管理

關于小程序云更多信息的官方文檔可以點擊這里

Westore Cloud 在基于小程序云的數據庫能力，讓開發者感知不到數據庫的存在(隱形云)，只需要專注于本地數據、本地數據邏輯和本地數據的流動，通過簡單的 pull、push、add 和 remove 同步本地數據和云數據庫。數據庫相關的官方文檔可以點這里。架構圖如下所示:

典型的 Data First 架構設計，中小型項目可以去掉 Models 和 Adapter 兩大模塊。可以與 Model first 的架構對比:

Model first 的架構里，如果不需要持久化存儲，可以去掉 Database，只剩下 Models。Models 與渲染無關，專注于模型的抽象與模型之間的邏輯，具體是渲染到 Web、安卓、IOS 還是 Flash 或者 WPF 統統不屬于 Models 需要操心的問提。

小程序直連數據庫

數據庫數據項函數擴展

極簡的 API 設計 (pull push add remove)

只需要一種編程語言(javascript)編寫前端、后端、mongodb

開發者只需專注數據和數據的邏輯(即store)，隱形的數據庫同步功能

無延遲的設計(先更新本地刷新視圖、再sync db、最后 diff 本地更新視圖)

安裝上面建立的集合名稱一一對應建立好 store 的 data:

export default {
  data: {
    //user 對應 db 的 collectionName
    "user": [],
    //其他 collection 可以繼續添加
    "product": []
  },
  env:"test-06eb2e"
}

上面的 env 對應云控制臺的環境 ID:

通過 add 方法往集合 user 添加數據:

this.store.add("user", {
  name: "dntzhang",
  city: "深圳",
  age: 22,
  gender: 1
}).then((res) => { })

通過 add 方法往集合 product 添加數據:

this.store.add("product", {
  address: {
    province:"廣東省",
    city:"深圳市",
  },
  agent: [ "微信支付", "微信搜一搜", "微信讀書"]
})

export default {
  data: {
    "user":[],
    "product": []
  },
  methods:{
    //這里可以擴展 collection 每一項的方法
    "product":{
      "agentString":function(){
        //this.agent 對應 product 集合的 agent字段
        return this.agent.join("-")
      }
    }
  },
  env:"test-06eb2e"
}

通過上面的擴展方法，在遍歷 product 表的每一項時，可以直接使用 agentString 屬性綁定到視圖，比如展示本地第一條數據的 agentString:

{{product[0].agentString}}

this.store.pull("user").then(res => {
  this.store.data.user = res.data
  this.update()
})

   用戶信息
   姓名:{{user[0].name}}
   年齡:{{user[0].age}}
   城市:{{user[0].city}}
   性別:{{user[0].gender===1?"男":"女"}}
    產品(測試深層屬性綁定和更新)
   省:{{product[0].address.province}}
   市:{{product[0].address.city}}
    代理商:{{product[0].agentString}}
   
   
   
    新增 User
   

this.store.data.user[0].name = "dntzhang" + Math.floor(Math.random() * 100)
this.store.push().then((res) => {
  console.log("成功更新云數據庫")
})

push 方法等于 update local + update cloud。所以不僅本地視圖會刷新，云數據庫也會同步更新，更新回調在 then 里執行。

支持精準更新深層的嵌套屬性，如:

this.store.data.product[0].address.city = "廣州市"
this.store.data.product[0].agent[0] = "微信"
this.store.data.product[0].agent[1] = "QQ"
this.store.data.product[0].agent[2] = "騰訊云"
this.store.push()

更新后:

const item = this.store.data.user.splice(index, 1)[0]
this.update() //更新本地數據和視圖
this.store.remove("user", item._id)  //同步到云數據庫

const user = {
  name: "new user" + this.store.data.user.length,
  age: 1,
  city: "江西",
  gender: 2
}
this.store.data.user.push(user)
//優先更新本地視圖
this.update() 
//增加到云數據庫
this.store.add("user", user)

如果新增的條數據后續需要修改且同步到云數據庫需要設置 _id，即最后一行代碼改成:

this.store.add("user", user).then((res) => {
  //設置_id，方便后續修改進行 push
  user._id = res._id
  this.update()
})

增加改查完整的 DEMO 可以點擊這里。

拉取云數據庫集合的 JSON 數據

更多 where 的構建查詢條件的 API 可以點擊這里。

返回 Promise 對象的實例。

查詢 18 歲的用戶:

this.store.pull("user", {age: 18}).then(res => {
  this.store.data.user = res.data
  this.update()
})

同步本地 JSON 到云數據庫

返回 Promise 對象的實例。

this.store.data.user[0].name = "dntzhang"
this.store.data.product[0].address.city = "廣州市"
this.store.data.product[0].agent[1] = "QQ"
this.store.data.product[0].agent[2] = "騰訊云"
this.store.push().then((res) => {
  console.log("同步數據完成！")
})

添加 JSON 數據到數據庫

返回 Promise 對象的實例。

const user = {
  name: "new user" + this.store.data.user.length,
  age: 1,
  city: "江西",
  gender: 2
}
this.store.data.user.push(user)
this.update()
this.store.add("user", user).then((res) => {
  //設置_id
  user._id = res._id
  this.update()
})

根據 id 刪除數據庫中的數據

返回 Promise 對象的實例。

const item = this.store.data.user.splice(index, 1)[0]
this.update()
this.store.remove("user", item._id)

diffToPushObj({ "user[2].name": { cc: 1 }, "user[2].age": 13, "user[1].a.b": { xxx: 1 } })

返回:

{ "user-2": { "name": { "cc": 1 }, "age": 13 }, "user-1": { "a": { "b": { "xxx": 1 } } } }

其中，"user-2".split("-") 之后可以得到DB的集合名user，數字 2 代表本地數據第三條。

https://github.com/dntzhang/westore

MIT @dntzhang