小程序云開發(fā)發(fā)布有一段時間了，最近著手做了一個基于云開發(fā)的小程序項目--仿《微博鮮知》，來自新浪的這款全新風格的小程序雖然界面非常簡約清新，但是內(nèi)部還是內(nèi)藏了很多玄機，在實現(xiàn)的路上遇上了不少坎坷，在這里分享給大家。希望給大家提供一些思路。
先展示一下最終結果： 更多圖片資源在這里
一、 組件化思想
開發(fā)一個完整的小程序時，我們應該先分析其內(nèi)部的結構。重復的結構抽離出來作為組件，組件非常的靈活，可以嵌入一個頁面或多個頁面。
在上面的gif圖中我們可以看到首頁的內(nèi)容是一個個的新聞塊。 雖然這個新聞塊只在首頁中使用到，但是我還是把它抽離成了一個組件。這樣做的好處是頁面結構將會更加的清晰，并且耦合度降低，比如想換個主界面風格時，你可以直接換另一個組件添加進來。
還有新聞內(nèi)部頁面中，有多個小標題，每個小標題里面嵌入了不等數(shù)量的新聞。如果不是采用組件化的話，到時候inner頁面的wxml結構就會亂成一鍋粥。所以這里的建議是盡量組件化分離開來。
對于組件很陌生可以先看我的之前的這篇文章組件化開發(fā)tabbar
下面是項目的頁面與組件目錄：
二、數(shù)據(jù)庫設計
既然是“全棧”，后端肯定要搞搞。后端的核心就是數(shù)據(jù)。那么我們就先把數(shù)據(jù)庫分析一下。這里我是這樣分析的，
從頁面獲得字段，
然后再理解數(shù)據(jù)間的關聯(lián)，如一對多，一對一。
這里我構建了5個集合
fresh-mainNews 主頁新聞集合
subNews字段是一個數(shù)列，存儲著fresh-subNews Doc的_id，這樣就將這兩個集合綁定了起來，在后面我們會講到在云函數(shù)中把這兩個集合融合起來返回一個新的數(shù)據(jù)變得完整一些的集合。
有人可能會問，云數(shù)據(jù)庫不是noSQL嗎，為什么不把所有數(shù)據(jù)全部整合到一個全部的JSON,那樣就可以只調(diào)用一次JSON。
我的理解是： 我們查詢只是需要查詢我們想要的數(shù)據(jù)，不需要的數(shù)據(jù)可以等需要的時候再根據(jù)關聯(lián)去請求。 比如這個項目中的首頁新聞塊，每一個新聞塊內(nèi)部都關聯(lián)著大量的子新聞，第一次加載就全部把這個小程序需要的所有數(shù)據(jù)都加載出來就有點瘋狂了。
fresh-subNews 內(nèi)部頁面新聞小標題集合
fresh-comments 評論集合
fresh-detailNews 詳細新聞集合
fresh-users 用戶集合
三、頁面構建
講到這里就該說頁面的構建了。頁面可以想象成一個架子，一個承載數(shù)據(jù)的容器。頁面通上數(shù)據(jù)，就變得活起來。MVVM，數(shù)據(jù)驅(qū)動視圖。交互靠數(shù)據(jù)，組件間的通信，組件與頁面間的通信都是數(shù)據(jù)。{{}} -> 就像是流浪法師大招神奇的傳送門。后面會將給出一個精彩的組件通信例子（點擊目錄如何實現(xiàn)標題欄置頂）。
四、關于云開發(fā)。
云開發(fā)三大核心：
云函數(shù)：通俗的理解就是你寫的函數(shù)在云端運行，可以把復雜的業(yè)務邏輯放在云函數(shù)里
數(shù)據(jù)庫：一個既可在小程序前端操作，也能在云函數(shù)中讀寫的 JSON 數(shù)據(jù)庫
存儲：在小程序前端直接上傳/下載云端文件，在云開發(fā)控制臺可視化管理，可以上傳照片下載照片，或者一些其他文件。
在這里詳細介紹一下操作云函數(shù)提取數(shù)據(jù)庫的流程, 這里我們以獲取首頁數(shù)據(jù)為例：
先在云函數(shù)目錄新建一個函數(shù)：mianNewsGet
2. 打開該云函數(shù)的index.js 我這里用的是vsCode+node+yarn環(huán)境。 open in terminal(在終端中打開)，yarn一下，添加依賴。 或者參考云函數(shù)官方文檔
編寫云函數(shù)查詢數(shù)據(jù)
// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
// 云函數(shù)初始化
cloud.init()
//獲取數(shù)據(jù)庫句柄
const db = cloud.database()
// 云函數(shù)入口函數(shù)
exports.main = async () => {
const mainNewsList = [];
//向fresh-mainNews集合中獲得全部數(shù)據(jù)、因為數(shù)據(jù)庫里面現(xiàn)在存的數(shù)據(jù)不多，
//如果多的話可以設置一個limit以及skip來獲取特定數(shù)量的數(shù)據(jù)
const mainNews = await db.collection("fresh-mainNews").get();
for(let i = 0; i < mainNews.data.length; i++) {
const mainNew = mainNews.data[i];
let user_id = mainNew.setMan;
//條件查詢 獲取特定id的docments
const user = await db.collection('fresh-users').where({
_id: user_id
}).get();
//限定條件如果有多條，只添加一條進去
if (user.data.length > 0) {
mainNew.setMan = user.data[0]
}
//這個循環(huán)是集合的拼接
for (let i = 0; i < mainNew.subNews.length; i++) {
const subNews = await db.collection("fresh-subNews").where({
_id: mainNew.subNews[i]
}).get();
if (subNews.data.length > 0) {
mainNew.subNews[i] = subNews.data[0]
}
}
//把拼好的docments挨個放進mainNewsList里面也就是形成了一個全新的
//融合的數(shù)據(jù)更為完整的JSON數(shù)組
mainNewsList.push(mainNew);
}
return mainNewsList;
}
復制代碼
在首頁index.js里面onLoad函數(shù)里面調(diào)用云函數(shù)
var that = this;
wx.cloud.callFunction({
// 聲明調(diào)用的函數(shù)名
name: 'mainNewsGet',
// data里面存放的數(shù)據(jù)可以傳遞給云函數(shù)的event 效果：event.a = 1
data: {
a: 1
}
}).then(res => {
//res.result的值是云函數(shù)的return的值
//這里將查詢的結果放入mainNewsList中，然后就可以在wxml中調(diào)用數(shù)據(jù)
that.setData({
mainNewsList: res.result
})
//打印一下結果看看有沒有成功獲取數(shù)據(jù)
console.log(this.data.mainNewsList)
}).catch(err => {
console.log(err)
})
獲取的數(shù)據(jù)：
我們可以看到原本的subNews里面本來存放的是_id的數(shù)值，融合后變成_id對應的整個doc
變化: [_id1.value,_id2.value~~] ---> [{_id1:value,key1:value1,key2:value2},~~~]
云函數(shù)的調(diào)用，數(shù)據(jù)庫的查詢。就是這么簡單的四步，云開發(fā)的門檻很低，功能也很強大,只要你去嘗試，很輕松的就能夠?qū)崿F(xiàn)。
五、關于時間格式化。
寫在utils文件夾里添加xx.js
const formatTime = date => {
var dateNow = new Date();
var date = new Date(date);
const hour = date.getHours()
const minute = date.getMinutes()
var times = (dateNow - date) / 1000;
let tip = '';
if (times <= 0) {
tip = '剛剛'
return tip;
} else if (Math.floor(times / 60) <= 0) {
tip = '剛剛'
return tip;
} else if (times < 3600) {
tip = Math.floor(times / 60) + '分鐘前'
return tip;
}
else if (times >= 3600 && (times <= 86400)) {
tip = Math.floor(times / 3600) + '小時前'
return tip;
} else if (times / 86400 <= 1) {
tip = Math.ceil(times / 86400) + '昨天'
}
else if (times / 86400 <= 31 && times / 86400 > 1) {
tip = Math.ceil(times / 86400) + '天前'
}
else if (times / 86400 >= 31) {
tip = '好幾光年前~~'
}
else tip = null;
return tip + [hour, minute].map(formatNumber).join(':')
}
const formatNumber = n => {
n = n.toString()
return n[1] ? n : '0' + n
}
//將這個接口暴露
module.exports = {
formatTime: formatTime,
}
復制代碼
在需要的頁面的xx.js里面引入
import { formatTime } from '../../utils/api.js';
格式化獲取的時間數(shù)據(jù)
let mainNewsList = that.data.mainNewsList
for(let i =0; i < mainNewsList.length;i++) {
let time = formatTime(mainNewsList[i].time)
//這是setData()的數(shù)組用法，會經(jīng)常用到
var str = 'mainNewsList['+i+'].time'
that.setData({
[str]:time
})
}
復制代碼
六、 關于一些很有用但是你可能不知道的小程序技巧
全屏顯示圖片，能夠?qū)崿F(xiàn)多張圖片左右滑動并且還有數(shù)字索引現(xiàn)在在屏幕上，并且長按還能收藏以及下載(之前不知道這個API還特地做了一個組件來實現(xiàn)類似功能，簡直吐血)
wx.previewImage({
current: imgUrl, // 當前顯示圖片的http鏈接
urls: imagePack // 需要預覽的圖片http鏈接列表
})
復制代碼
非常方便的一個API能夠滑動到某個位置
wx.pageScrollTo({
scrollTop: 一個數(shù)值（自帶px單位）, //滾動到數(shù)值所在的位置
duration: 50 //執(zhí)行滾動所花的時間
})
復制代碼
查詢節(jié)點query.selectAll('類名')及query.select('#id')官方文檔
var that = this
let catalogIndex = that.data.catalogIndex;
query.selectAll('類名').boundingClientRect(function (rects) {
rects.forEach(function (rect) {
rect.top // 節(jié)點的上邊界坐標st,
//還有一些別的屬性，這個查詢節(jié)點是后面講到的目錄跳轉(zhuǎn)關鍵API
})
})
}).exec()
},
復制代碼
setData()一些技巧。
//給數(shù)組設置值 還可以有var xx = 'xx['+idx+'].key'的形式
var doneList = 'doneList['+idx+']'
that.setData({
[doneList]: true,
})
復制代碼
有時候我們還可以先改變某個數(shù)的值再去setData()它，這是setData()的一個很好用的技巧，不過需要去運用一下才好理解 如：
dataPack.likeNum = (supLikeNum===-1 ? dataPack.likeNum: supLikeNum);
this.setData({
comment: dataPack,
})
復制代碼
七、 項目最精彩的兩個部分
1.點擊目錄欄頁面將相應新聞欄置頂，先看下效果
這個效果在別的小程序里面都沒有見過，應該是微博鮮知獨創(chuàng)的，在這里先對原作者表達一下敬意。內(nèi)部的構造也是非常巧妙，不同于我們常見的外賣的錨點定位。
我們先來分析一波：
mvvm，視圖是由數(shù)據(jù)驅(qū)動的，我們要透過現(xiàn)象看本質(zhì)，去思考底層的數(shù)據(jù)，這樣我們很快就會有思路:
點擊目錄欄的item項如果綁定了一個data-idx等于循環(huán)的索引，可以在e.currentTarget.dataset.idx拿到這個item的索引。
我們把這個數(shù)據(jù)通過組件通信傳遞到inner頁面,然后在由inner頁面把數(shù)據(jù)轉(zhuǎn)交給subNews
并且在inner頁面的js中綁定subNews的goTop事件，這樣產(chǎn)生了一個catalog組件->inner頁面->subNews的關聯(lián)，數(shù)據(jù)為item的索引。觸發(fā)catalog就能夠控制subNews組件的移動，是不是還有點繞， ok
<block wx:for="{{subNews}}" wx:for-item="subNewsItem" wx:for-index="idx" wx:key="index">
<view class="subTitle-item" bind:tap="scrollFind"
//關鍵1：綁定item索引
data-hi="{{idx}}">
<text>{{subNewsItem.title}}</text>
</view>
</block>
復制代碼
獲得索引，并綁定inner頁面 catalog/index.js
scrollFind: function(e) {
//點擊后 實現(xiàn)inner頁面特定新聞小標題置頂
let curIndex = e.currentTarget.dataset.hi
// 關鍵2： 與inner頁面取得聯(lián)系
var myEventDetail = {index: curIndex} // detail對象，提供給事件監(jiān)聽函數(shù)
var myEventOption = {} // 觸發(fā)事件的選項
this.triggerEvent('catalog', myEventDetail)
}
復制代碼
inner/inner.js 取得與catalog的通信
onCatalog: function(e) {
e.detail // 自定義組件觸發(fā)事件時提供的detail對象
console.log(e.detail.index)
//關鍵:3 把索引存儲到data
this.setData({
catalogIndex : e.detail.index
})
//關鍵4: 頁面可以通過組件的id取得其頁面引用組件的方法
// this.subNews=this.selectComponent("#subNews")
this.subNews.goTop();
},
復制代碼
給subNews傳catalogIndex，并且標上id
<subNews ~省略~ catalogIndex="{{catalogIndex}}" id="subNews"></subNews>
復制代碼
在subNews中先定義一個圖片加載事件，這樣在頁面加載完成時會觸發(fā)其綁定的事件，這是來自瀑布流的靈感。可以在圖片加載出來的時候觸發(fā)onImageLoad函數(shù)，而在這個函數(shù)里我們可以干一些準備的事情。
//subNews/index.wxml
//一個看不見的圖片，來自瀑布流的靈感，能夠產(chǎn)生主動觸發(fā)的事件
<view style="display:none">
<image src="{{mainImg}}" bindload="onImageLoad"></image>
</view>
復制代碼
//subNews/index.js
onImageLoad: function () {
var that = this
let offsetList = that.data.offsetList;
const query = wx.createSelectorQuery().in(this)
//之前講到過的API獲取節(jié)點信息，我們把它存儲到offsetList偏移量數(shù)組，他存儲著每一個節(jié)點在屏幕的位置，
//配合wx.pageScrollTo可以達到新聞欄置頂?shù)男Ч?
query.selectAll('.subNews-wrapper').boundingClientRect(function (rects) {
rects.forEach(function (rect) {
rect.top // 節(jié)點的上邊界坐標
offsetList.push(rect.top)
that.setData({
offsetList,
})
})
}).exec()
},
復制代碼
給標題欄綁定上goTop事件
goTop: function (e) {
var that = this
let catalogIndex = that.data.catalogIndex;
//這里offsetList是一個data里面的數(shù)據(jù)，來保存所有的節(jié)點的上邊距坐標
let offsetList = that.data.offsetList;
wx.pageScrollTo({
scrollTop: offsetList[catalogIndex], //滾動到具體數(shù)值所在的位置
duration: 50 //執(zhí)行滾動所花的時間
})
}
復制代碼
至此，你就實現(xiàn)了這個看似簡單卻非常巧妙的功能，組件->頁面->組件，秀得眼花繚亂。如果還是有些不理解的話，等下可以下載我的代碼去看。
至于為什么要弄一個圖片的加載然后觸發(fā)那個事件呢，這是因為如果你把獲取offsetList偏移量數(shù)組的函數(shù)放在goTop里的話，進入頁面第一次的點擊會無效，這樣產(chǎn)生的體驗肯定是非常不舒服的。
2. 點贊優(yōu)化
先展示一下效果：
先說一下優(yōu)化的是什么：點贊效果的延遲極大降低
因為點贊的變化是由用戶產(chǎn)生的一個交互，傳統(tǒng)的觀點就是用戶點贊->后端更新數(shù)據(jù)->前端拉取數(shù)據(jù)->數(shù)據(jù)驅(qū)動視圖的變化。
真實的體驗就是，非常的慢，慢到點擊后2秒才能看到點贊的效果，這種差勁的交互簡直就是一場災難。
先給傳統(tǒng)的、局部刷新優(yōu)化的，效果還是很差的一段代碼：
for(let i = 0; i< that.data.comments.length; i++)
{
//當點擊該個評論時，只更新這一條數(shù)據(jù)
if (i == idx) {
var str = 'comments['+idx+'].likeNum'
that.setData({
[str]:res.result.data.likeNum,
})
console.log(likeNumList[idx])
}
}
data: {
doneList: [], //是否按下
likeNumList: [], //模擬點贊數(shù)數(shù)組
likeAdd: 10, //點贊每次增加數(shù)，根據(jù)你的設置來，你后端每次加1這里就寫1
},
var doneList = 'doneList['+idx+']'
likeNumList[idx] = (that.data.comments[idx].likeNum + that.data.likeAdd);
that.setData({
likeNumList,
[doneList]: true,
likeAdd: that.data.likeAdd+10
})
復制
<text class="dianzanNum">{{likeNumList[idx]?likeNumList[idx]:item.likeNum}}</text>
復制代碼
優(yōu)化思路是怎么樣的呢？
用一個數(shù)組來存放/模擬更新的數(shù)據(jù)，如果數(shù)字的索引位置被賦值，則頁面直接顯示這個更新的數(shù)字，也是異曲同工之妙。因為用戶關心的是數(shù)據(jù)的變化，我們可以先把數(shù)據(jù)的變化產(chǎn)生，至于數(shù)據(jù)后端的變化讓他異步慢慢的去做。
從這里發(fā)散思想，是不是評論功能也能夠用這樣的思路同樣去達到極致的速度與交互體驗呢。
點贊的延遲幾乎為無，體驗到點贊的極致快感，讓人幾乎停不下來~~（暗示一波）
篇幅所限，文章到這里就差不多了。
項目地址: github-HappyBirdwe-weiboFresh 奉上
精心寫的項目，細節(jié)很不錯喲，歡迎大家☆☆☆☆star☆☆☆☆
結語：
學習的道路上免不了坎坷，希望文章的分享能夠為大家提供一些思路，學習的過程減少一點彎路，這就是這篇文章最大的價值，歡迎大家提問及指正。
