摘要：所以不僅本地視圖會(huì)刷新，云數(shù)據(jù)庫(kù)也會(huì)同步更新，更新回調(diào)在里執(zhí)行。實(shí)例查詢歲的用戶同步本地到云數(shù)據(jù)庫(kù)返回值返回對(duì)象的實(shí)例。

好的設(shè)計(jì)便是感覺(jué)不到設(shè)計(jì)的存在

開(kāi)發(fā)小程序，但是：沒(méi)有后端！沒(méi)有運(yùn)維！沒(méi)有 DBA！沒(méi)有域名！沒(méi)有證書(shū)！沒(méi)有錢(qián)！沒(méi)有精力！

沒(méi)關(guān)系，會(huì) javascript 就可以，Westore Cloud 帶你起飛~~

https://github.com/dntzhang/westore

開(kāi)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲，無(wú)需搭建服務(wù)器，即可使用云端能力。

云開(kāi)發(fā)為開(kāi)發(fā)者提供完整的云端支持，弱化后端和運(yùn)維概念，無(wú)需搭建服務(wù)器，使用平臺(tái)提供的 API 進(jìn)行核心業(yè)務(wù)開(kāi)發(fā)，即可實(shí)現(xiàn)快速上線和迭代，同時(shí)這一能力，同開(kāi)發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥。

目前提供三大基礎(chǔ)能力支持：

云函數(shù)：在云端運(yùn)行的代碼，微信私有協(xié)議天然鑒權(quán)，開(kāi)發(fā)者只需編寫(xiě)自身業(yè)務(wù)邏輯代碼

數(shù)據(jù)庫(kù)：一個(gè)既可在小程序前端操作，也能在云函數(shù)中讀寫(xiě)的 JSON 數(shù)據(jù)庫(kù)

存儲(chǔ)：在小程序前端直接上傳/下載云端文件，在云開(kāi)發(fā)控制臺(tái)可視化管理

關(guān)于小程序云更多信息的官方文檔可以點(diǎn)擊這里

Westore Cloud 在基于小程序云的數(shù)據(jù)庫(kù)能力，讓開(kāi)發(fā)者感知不到數(shù)據(jù)庫(kù)的存在(隱形云)，只需要專注于本地?cái)?shù)據(jù)、本地?cái)?shù)據(jù)邏輯和本地?cái)?shù)據(jù)的流動(dòng)，通過(guò)簡(jiǎn)單的 pull、push、add 和 remove 同步本地?cái)?shù)據(jù)和云數(shù)據(jù)庫(kù)。數(shù)據(jù)庫(kù)相關(guān)的官方文檔可以點(diǎn)這里。架構(gòu)圖如下所示:

典型的 Data First 架構(gòu)設(shè)計(jì)，中小型項(xiàng)目可以去掉 Models 和 Adapter 兩大模塊。可以與 Model first 的架構(gòu)對(duì)比:

Model first 的架構(gòu)里，如果不需要持久化存儲(chǔ)，可以去掉 Database，只剩下 Models。Models 與渲染無(wú)關(guān)，專注于模型的抽象與模型之間的邏輯，具體是渲染到 Web、安卓、IOS 還是 Flash 或者 WPF 統(tǒng)統(tǒng)不屬于 Models 需要操心的問(wèn)提。

小程序直連數(shù)據(jù)庫(kù)

數(shù)據(jù)庫(kù)數(shù)據(jù)項(xiàng)函數(shù)擴(kuò)展

極簡(jiǎn)的 API 設(shè)計(jì) (pull push add remove)

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

開(kāi)發(fā)者只需專注數(shù)據(jù)和數(shù)據(jù)的邏輯(即store)，隱形的數(shù)據(jù)庫(kù)同步功能

無(wú)延遲的設(shè)計(jì)(先更新本地刷新視圖、再sync db、最后 diff 本地更新視圖)

安裝上面建立的集合名稱一一對(duì)應(yīng)建立好 store 的 data:

export default {
  data: {
    //user 對(duì)應(yīng) db 的 collectionName
    "user": [],
    //其他 collection 可以繼續(xù)添加
    "product": []
  },
  env:"test-06eb2e"
}

上面的 env 對(duì)應(yīng)云控制臺(tái)的環(huán)境 ID:

通過(guò) add 方法往集合 user 添加數(shù)據(jù):

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

通過(guò) add 方法往集合 product 添加數(shù)據(jù):

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

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

通過(guò)上面的擴(kuò)展方法，在遍歷 product 表的每一項(xiàng)時(shí)，可以直接使用 agentString 屬性綁定到視圖，比如展示本地第一條數(shù)據(jù)的 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?"男":"女"}}
    產(chǎn)品(測(cè)試深層屬性綁定和更新)
   省:{{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("成功更新云數(shù)據(jù)庫(kù)")
})

push 方法等于 update local + update cloud。所以不僅本地視圖會(huì)刷新，云數(shù)據(jù)庫(kù)也會(huì)同步更新，更新回調(diào)在 then 里執(zhí)行。

支持精準(zhǔn)更新深層的嵌套屬性，如:

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() //更新本地?cái)?shù)據(jù)和視圖
this.store.remove("user", item._id)  //同步到云數(shù)據(jù)庫(kù)

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

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

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

增加改查完整的 DEMO 可以點(diǎn)擊這里。

拉取云數(shù)據(jù)庫(kù)集合的 JSON 數(shù)據(jù)

更多 where 的構(gòu)建查詢條件的 API 可以點(diǎn)擊這里。

返回 Promise 對(duì)象的實(shí)例。

查詢 18 歲的用戶:

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

同步本地 JSON 到云數(shù)據(jù)庫(kù)

返回 Promise 對(duì)象的實(shí)例。

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("同步數(shù)據(jù)完成！")
})

添加 JSON 數(shù)據(jù)到數(shù)據(jù)庫(kù)

返回 Promise 對(duì)象的實(shí)例。

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) => {
  //設(shè)置_id
  user._id = res._id
  this.update()
})

根據(jù) id 刪除數(shù)據(jù)庫(kù)中的數(shù)據(jù)

返回 Promise 對(duì)象的實(shí)例。

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，數(shù)字 2 代表本地?cái)?shù)據(jù)第三條。

https://github.com/dntzhang/westore

MIT @dntzhang