請勿使用本文章及源碼作為商業用途！

前言

當初做這個小程序是為了婚禮前的需要，結婚之後，希望這個小程序能夠留存下來，特地花了一些空閑時間將小程序轉化成為“相冊類小程序”

體驗碼

準備工作

1. mpvue框架 
2. 小程序·雲開發 

注意：使用mpvue前，首先你得先熟悉vue框架的基本使用 

項目結構介紹

注意：接下來展示的代碼，有幾個對比，分別是本人優化前和優化后的代碼對比，感興趣的可以着重看一下優化后的成熟寫法。

​

• common目錄： 放一些公共資源，如js,css,json
• components目錄：組件相關的.vue文件都放在這裏
• pages目錄：所有頁面都放在這個目錄
• utils目錄：使用mpvue時自動生成，可忽略
• app.json文件：

{
  "pages": [ "pages/index/main", "pages/photo/main", "pages/map/main", "pages/greet/main", "pages/message/main" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "tabBar": { "color": "#ccc", "selectedColor": "#ff4c91", "borderStyle": "white", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/main", "iconPath": "static/images/1-1.png", "selectedIconPath": "static/images/1-2.png", "text": "邀請函" }, { "pagePath": "pages/photo/main", "iconPath": "static/images/2-1.png", "selectedIconPath": "static/images/2-2.png", "text": "甜蜜相冊" }, { "pagePath": "pages/map/main", "iconPath": "static/images/3-1.png", "selectedIconPath": "static/images/3-2.png", "text": "酒店導航" }, { "pagePath": "pages/greet/main", "iconPath": "static/images/4-1.png", "selectedIconPath": "static/images/4-2.png", "text": "好友祝福" }, { "pagePath": "pages/message/main", "iconPath": "static/images/5-1.png", "selectedIconPath": "static/images/5-2.png", "text": "留言評論" } ] }, "requiredBackgroundModes": ["audio"] }

• App.vue文件 （本人主要是為了增加項目更新后的提醒），所以在這個文件加了些相關內容，內容如下：

<script>
export default { onLaunch () { // 檢測小程序是否有新版本更新 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 請求完新版本信息的回調 if (res.hasUpdate) { updateManager.onUpdateReady(function () { wx.showModal({ title: '更新提示', content: '新版本已經準備好，是否重啟應用？', success: function (res) { if (res.confirm) { // 新的版本已經下載好，調用 applyUpdate 應用新版本並重啟  updateManager.applyUpdate() } } }) }) // 小程序有新版本，會主動觸發下載操作（無需開發者觸發）  wx.getUpdateManager().onUpdateFailed(function () { // 當新版本下載失敗，會進行回調  wx.showModal({ title: '提示', content: '檢查到有新版本，下載失敗，請檢查網絡設置', showCancel: false }) }) } }) } else { // 版本過低則無法使用該方法  wx.showModal({ title: '提示', confirmColor: '#5BB53C', content: '當前微信版本過低，無法使用該功能，請升級到最新微信版本后重試。' }) } } } </script> <style lang="stylus"> page height 100% image display block </style>

• main.js文件：

import Vue from 'vue'
import App from './App' Vue.config.productionTip = false App.mpType = 'app' wx.cloud.init({ env: '雲開發環境ID' }) const app = new Vue(App) app.$mount()

• functions目錄：主要放一些雲函數，這裏不清楚雲函數的文章後面會提及
• images目錄：主要放一些靜態資源圖片

頁面介紹

首頁——邀請函

首頁着重和大家講解下背景音樂的實現方法

const audioCtx = wx.createInnerAudioContext()

 接口獲取實例

接着，通過實例的相關方法來實現音樂的播放與暫停功能

具體代碼如下：

<script>
import IndexSwiper from 'components/indexSwiper' import tools from 'common/js/h_tools' const audioCtx = wx.createInnerAudioContext() export default { name: 'Index', components: { IndexSwiper }, data () { return { isPlay: true, list: [] } }, onShow () { const that = this that.isPlay = true that.getMusicUrl() }, methods: { audioPlay () { const that = this if (that.isPlay) { audioCtx.pause() that.isPlay = false tools.showToast('您已暫停音樂播放~') } else { audioCtx.play() that.isPlay = true tools.showToast('背景音樂已開啟~') } }, getList () { const that = this const db = wx.cloud.database() const banner = db.collection('banner') banner.get().then(res => { that.list = res.data[0].bannerList }) }, getMusicUrl () { const that = this const db = wx.cloud.database() const music = db.collection('music') music.get().then(res => { let musicUrl = res.data[0].musicUrl audioCtx.src = musicUrl audioCtx.loop = true audioCtx.play() that.getList() }) } }, onShareAppMessage: function (res) { return { path: '/pages/index/main' } } } </script>

以上代碼中使用到了雲開發相關功能，文章後面會介紹，請大家稍安勿躁

相冊頁——就一個輪播圖，這裏就不過多介紹

地圖頁——這裏着重講一下地圖標籤map

map標籤 

這裏講一下標記點markers：

data () {
    return { // qqSdk: '',  markers: [{ iconPath: '../../static/images/nav.png', id: 0, latitude: 30.08059, longitude: 115.93027, width: 50, height: 50 }] } }

<template>
    <div class="map">
        <image mode="aspectFit" class="head-img" src="../../static/images/t1.png"/>
        <map class="content" id="map" longitude="115.93027" latitude="30.08059" :markers="markers" scale="18" @tap="toNav">
        </map>
        <div class="call">
            <div class="left" @tap="linkHe">
                <image src="../../static/images/he.png"/>
                <span>呼叫新郎</span>
            </div>
            <div class="right" @tap="linkShe">
                <image src="../../static/images/she.png"/>
                <span>呼叫新娘</span>
            </div>
        </div>
        <image class="footer" src="../../static/images/grren-flower-line.png"/>
    </div>
</template>

祝福頁——也是雲開發相關內容，後面會介紹

留言頁——也是雲開發相關內容，後面會介紹

雲開發介紹

project.config.json文件：

"cloudfunctionRoot": "static/functions/"

進行雲開發首先我們需要找到上面這個文件，在上面這個json文件中加上上面這行代碼

cloudfunctionRoot 用於指定存放雲函數的目錄

app.json文件：

"window": {
    "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black" }, "cloud": true

增加字段 "cloud": true實現雲開發能力的兼容性

開通雲開發

在開發者工具工具欄左側，點擊 “雲開發” 按鈕即可開通雲開發

雲開發控制台

​

數據庫

 雲開發提供了一個 JSON 數據庫

 

存儲

 

雲開發提供了一塊存儲空間，提供了上傳文件到雲端、帶權限管理的雲端下載能力，開發者可以在小程序端和雲函數端通過 API 使用雲存儲功能。

 

雲函數

 

雲函數是一段運行在雲端的代碼，無需管理服務器，在開發工具內編寫、一鍵上傳部署即可運行後端代碼。

使用雲開發

雲能力初始化

在小程序端開始使用雲能力前，需先調用 wx.cloud.init 方法完成雲能力初始化

import Vue from 'vue'
import App from './App' Vue.config.productionTip = false App.mpType = 'app' wx.cloud.init({ env: '雲開發環境ID' }) const app = new Vue(App) app.$mount()

數據庫的使用

在開始使用數據庫 API 進行增刪改查操作之前，需要先獲取數據庫的引用。以下調用獲取默認環境的數據庫的引用：

const db = wx.cloud.database()

 要操作一個集合，需先獲取它的引用：

const todos = db.collection('todos')

操作數據庫的相關示例

例：首頁獲取背景音樂資源

getMusicUrl () {
      const that = this const db = wx.cloud.database() const music = db.collection('music') music.get().then(res => { let musicUrl = res.data[0].musicUrl audioCtx.src = musicUrl audioCtx.loop = true audioCtx.play() that.getList() }) }

 例：首頁獲取輪播圖數組

getList () {
      const that = this const db = wx.cloud.database() const banner = db.collection('banner') banner.get().then(res => { that.list = res.data[0].bannerList }) }

例：祝福頁，用戶送上祝福存儲用戶

<script>
import tools from 'common/js/h_tools' export default { name: 'Greet', data () { return { userList: [], openId: '', userInfo: '' } }, onShow () { const that = this that.getUserList() }, methods: { scroll (e) { console.log(e) }, sendGreet (e) { const that = this if (e.target.errMsg === 'getUserInfo:ok') { wx.getUserInfo({ success: function (res) { that.userInfo = res.userInfo that.getOpenId() } }) } }, addUser () { const that = this const db = wx.cloud.database() const user = db.collection('user') user.add({ data: { user: that.userInfo } }).then(res => { that.getUserList() }) }, getOpenId () { const that = this wx.cloud.callFunction({ name: 'user', data: {} }).then(res => { that.openId = res.result.openid that.getIsExist() }) }, getIsExist () { const that = this const db = wx.cloud.database() const user = db.collection('user') user.where({ _openid: that.openId }).get().then(res => { if (res.data.length === 0) { that.addUser() } else { tools.showToast('您已經送過祝福了~') } }) }, getUserList () { const that = this wx.cloud.callFunction({ name: 'userList', data: {} }).then(res => { that.userList = res.result.data.reverse() }) } } } </script>

獲取送祝福的好友列表

getUserList () {
      const that = this wx.cloud.callFunction({ name: 'userList', data: {} }).then(res => { that.userList = res.result.data.reverse() }) }

這裏用到了雲函數，之所以用雲函數是因為小程序端在獲取集合數據時服務器一次默認並且最多返回 20 條記錄，雲函數端這個数字則是 100。

雲函數的使用方法

上面我們講過在project.config.json文件中配置雲函數存放位置

下面是雲函數messageList的index.js文件：

不成熟寫法：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database() const MAX_LIMIT = 100 exports.main = async (event, context) => { // 先取出集合記錄總數 const countResult = await db.collection('message').count() const total = countResult.total // 計算需分幾次取 const batchTimes = Math.ceil(total / 100) // 承載所有讀操作的 promise 的數組 const tasks = [] for (let i = 0; i < batchTimes; i++) { const promise = db.collection('message').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get() tasks.push(promise) } // 等待所有 return (await Promise.all(tasks)).reduce((acc, cur) => ({ data: acc.data.concat(cur.data), errMsg: acc.errMsg })) }

成熟寫法（分頁查詢）：

const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database() exports.main = async (event, context) => { const wxContext = cloud.getWXContext() const dbName = 'message' const filter = event.filter ? event.filter : null const pageNum = event.pageNum ? event.pageNum : 1 const pageSize = event.pageSize ? event.pageSize : 10 const countResult = await db.collection(dbName).where(filter).count() const total = countResult.total const totalPage = Math.ceil(total / pageSize) let hasMore if (pageNum >= totalPage) { hasMore = false } else { hasMore = true } return db.collection(dbName).orderBy('time', 'desc').where(filter).skip((pageNum - 1) * pageSize).limit(pageSize).get().then(res => { res.hasMore = hasMore res.total = total res.openId = wxContext.OPENID return res }) }

​

使用雲函數前，在開發者工具上，找到messageList目錄，右鍵如圖：

​

 點擊上傳並部署：雲端安裝依賴（不上傳node_modules）

得到如圖的提示：

​

 安裝完點擊完成就能使用當前雲函數了，使用方法即：

getUserList () {
      const that = this wx.cloud.callFunction({ name: 'userList', data: {} }).then(res => { that.userList = res.result.data.reverse() }) }

數組之所以要倒序是因為希望新祝福的的用戶在最前面显示 

用戶送上祝福的時候存儲用戶

這裏我們用到了雲函數獲取用戶信息，

當小程序端調用雲函數時，雲函數的傳入參數中會被注入小程序端用戶的 openid，開發者無需校驗 openid 的正確性，因為微信已經完成了這部分鑒權，開發者可以直接使用該 openid

不成熟寫法：

下面是雲函數user的index.js文件：

// 雲函數入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 雲函數入口函數
exports.main = async (event, context) => { const wxContext = cloud.getWXContext() return { event, openid: wxContext.OPENID, appid: wxContext.APPID, unionid: wxContext.UNIONID } }

主要是為了獲取當前操作用戶的openid,獲取當前用戶的openid方法：

getOpenId () {
      const that = this wx.cloud.callFunction({ name: 'user', data: {} }).then(res => { that.openId = res.result.openid that.getIsExist() }) }

接着判斷當前用戶是否已經存在於數據庫中，即getIsExist()方法：

getIsExist () {
      const that = this const db = wx.cloud.database() const user = db.collection('user') user.where({ _openid: that.openId }).get().then(res => { if (res.data.length === 0) { that.addUser() } else { tools.showToast('您已經送過祝福了~') } }) }

如果得到的數組長度為零則添加改用戶到數據庫，否則則提醒當前用戶已經送過祝福

接下來介紹存儲用戶信息的方法，即addUser():

addUser () {
      const that = this const db = wx.cloud.database() const user = db.collection('user') user.add({ data: { user: that.userInfo } }).then(res => { that.getUserList() }) }

存入到數據庫的信息是這樣的：

​

成熟寫法（使用雲函數一次搞定）：

// 雲函數入口文件
const cloud = require('wx-server-sdk')
cloud.init()
const db = cloud.database() exports.main = async (event, context) => { const wxContext = cloud.getWXContext() const dbName = 'user' const filter = { _openid: wxContext.OPENID } const countResult = await db.collection(dbName).where(filter).count() const total = countResult.total if (total) { return { has: true } } else { return db.collection(dbName).add({ data: { user: event.user, _openid: wxContext.OPENID, time: db.serverDate() } }) } }

toMessage (e) {
      const that = this
      if (e.target.errMsg === 'getUserInfo:ok') { wx.getUserInfo({ success: function (res) { that.userInfo = res.userInfo wx.navigateTo({ url: `/pages/writeMessage/main?avatar=${that.userInfo.avatarUrl}&name=${that.userInfo.nickName}`  }) that.addUser(that.userInfo) } }) } }, addUser (obj) { wx.cloud.callFunction({ name: 'addUser', data: { user: obj } }) }

總結 

大概的功能就是這麼多，希望可以幫助到大家，覺得寫得不錯的記得給作者點個贊，你們的支持是我不斷更新的最大動力！

源碼地址

​

後續優化

• 留言審核
• 一些動畫效果
• 分頁處理
• 雲函數優化
• 回到頂部

最後

一開始不清楚隨筆和文章的區別，還是希望這篇隨筆能展示在博客園首頁（所以改成隨筆），讓更多的朋友看到

希望對那些有想法又不會後台開發的朋友一些啟示作用，祝你早日做出只屬於自己的小程序。

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理
【其他文章推薦】

※帶您來了解什麼是 USB CONNECTOR  ?

※自行創業 缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站，提高曝光率!!

※綠能、環保無空污,成為電動車最新代名詞，目前市場使用率逐漸普及化

※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益

背景理解

什麼是緩存，為什麼要用緩存

程序運行中，在內存保持一定時間不變的數據就是緩存。簡單到寫一個Map，裏面放着一些key,value數據，就已經是個緩存了

所以緩存並不是什麼高大上的技術，只是個概念，把要多次使用的東西存在一個變量里，時不時取出來使用，就達到了緩存的目的，緩存就是存放數據的容器

那為什麼要用緩存呢，是因為要多次使用。一個程序總有一些數據時可預見被多次使用（預見的準不準就是常說的命中率）

比如一個複雜的計算結果，一次數據庫訪問取得的數據等耗時耗資源的數據就能放入緩存，目的就是為了節省開銷，我們要用有限的資源（CPU，內存，帶寬等等）盡量做最多的事情。

為什麼要用SpringCache（緩存的演變過程）

緩存的思考

如果我們要設計一個緩存，最基本的功能是存和取：

1.能在緩存里存放數據

2.能在緩存里取出數據

可是這不夠呀，比如以下的思考

1.取數據時判斷，數據是否存在，如果不存在是不是要數據庫取

2.如果是過期的內容是不是要更新

3.如果我有多個緩存，一個是我自己設計的HashMap緩存，一個是名聲很大的redis，還有….，那需要個緩存管理器呀

為了讓緩存更好用，更“智能”，越來越多的需求就會被提出來，而緩存就是這樣一步步演變直到SpringCache橫空出世，功能十分強大（說白了就是我們少寫很多代碼）

SpringCache的好處

SpringCache包含兩個頂級接口，Cache（緩存）和CacheManager（緩存管理器），顧名思義，用CacheManager去管理一堆Cache。

最最關鍵的地方：抱緊了Spring的大腿，可以使用註解就能完成數據進入緩存！！

給大家舉個例子，就知道多簡單了

首先，Springboot中會自動加載一個CacheManager（它有默認的實現類），所以只要寫好一個自定義的Cache即可（如果想用系統定義好的或者第三方如RedisCache也行，記得向Spring註冊這個bean即可）

@Component
public class MyCache implements Cache {
  /*
       實現接口方法，一些關於數據set和get的方法
       CacheManager是根據Cache的名字進行管理的
       所以假設這個Cache名為MyCache
  */  
}

然後在得出數據的方法上寫上註釋即可

@Cacheable(value = "MyCache",key = "#id")
public String getNavegationURLs(String id) {
        //一個獲取數據的方法
}

這樣就會在調用這個方法時，會以id為key值，在名為MyCache的Cache容器中查找（註解中value就是緩存名字，不同名字指定使用不同的緩存）

如果沒查到，則執行方法 getNavegationURLs，將返回值存入緩存

如果找到了，就直接將從緩存取值，直接返回，不用執行方法 getNavegationURLs

還有其他方便的Cache註解自行百度，重要的是我們根本不用寫任何關於調用緩存的邏輯代碼，只用關注於緩存自身的邏輯

註解如何起作用的，源碼流程大致了解

為什麼要了解源碼

最直接的原因是因為SpringCache是不支持靈活的緩存時間設置的，所以想了解大概的來龍去脈去實現一個支持緩存過期時間設置和自動更新的類（之後會寫實現博文）。

高大上的原因是想通過這次探索，去了解下Spring對類的管理機制，去接觸下AOP的實現

SpringCache源碼簡單分析

大家從上面例子有沒發現問題，Cache和CacheManager是怎樣做關聯的，其實是Spring掃包實現的

凡是繼承了Cache接口的類，都會被自動注入進CacheManager中，最終存儲於CacheManager的實現類中

 

 接着會生成被@Cacheable（或者其他SpringCache註解修飾過）的代理類，並會將管理它的CacheManager賦值進去

 看這段代碼，就知道如果要設置多個CacheManager，就得在眾多實現類的其中一個加上@Primary，不然會Spring會報錯能選擇的Bean太多而不知道用哪個

 

代理類生成后（包括會根據不同的註解生成信息類CacheOperationMetadata，到時候就會根據這個類的內容進行緩存操作，說白了就是調用我們實現Cache裏面的各種方法）

Springboot底層初始化完成后，進入我們寫的代碼邏輯

如果這時進入了該類的方法，如：

 

 代碼跟進去，你會神奇的發現進入了代理類的intercept方法，怎麼進去的呢~（具體原理看下面3.0）

 這裏面就會根據註解類型，進行緩存的邏輯判斷，然後決定會不會調用我們寫的方法~

 代理類原理介紹（AOP切面之類的都是通過代理哦）

Spring代理分為兩種：

1.JDK原生動態代理，要求被代理的類需要實現接口（通過接口來實現的代理）

那麼代理類滿足以下條件：

首先實現一個InvocationHandler，方法調用會被轉發到該類的invoke()方法。 意思是：對代理對象的所有接口方法調用都會轉發到InvocationHandler.invoke()方法，在invoke()方法里我們可以加入任何邏輯，比如修改方法參數，加入日誌功能、安全檢查功能等；之後我們通過某種方式執行真正的方法體  
2.CGLIB動態代理，不要求被代理的類需要實現接口，但是final的方法無法被代理（
通過繼承來實現代理） 那麼代理類滿足以下條件： 實現一個MethodInterceptor，方法調用會被轉發到該類的intercept()方法

具體內容可以參考這篇精品博客：

如果你想自己實現代理類（就是不喜歡用工具包），其實也行啊，輸出符合class規範的二進制字節碼就行啦~~~（認真學習JVM規範吧）

 

至此，該分享的就分享完啦，有什麼問題歡迎留言一起探討~

 

 

 

 

 

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!