0 前言

1?美食便簽地圖簡介

2 美食便簽地圖小程序端開發

2.1技術選型

2.2前端UI設計

?2.3主頁界面

2.4個人信息界面

2.5?添加美食界面

2.6美食便簽界面

2.8 美食好友界面

2.9 美食圈子界面

2.10?子頁面-店鋪詳情界面

2.11 后臺數據緩存

2.12 訂閱消息通知

2.13 獲取位置信息

2.14 獲取昵稱和頭像

2.15 保存圖片到相冊

3 關鍵功能函數的封裝

3.1 對數據庫的增刪改查

3.2 訂閱消息的處理

3.3 內容安全檢測

4 后臺服務器端開發

4.1 云函數

4.1.1 checkSafeContent

4.1.2 getUserOpenId

4.1.3 sendMessage

4.2 數據庫

4.2.1美食圈子數據集合（groupList）

4.2.2?InstantShare數據庫

4.3 云存儲

5? 隱私保護與內容安全

5.1內容安全檢測

5.2?隱私保護

5.3 輸入內容邊界條件限制

6 開源項目引用

7 介紹視頻

0 前言

2019年至2020年期間，筆者開始學習微信小程序開發，此款小程序美食便簽地圖(FoodNoteMap)就是該時期的學習作品。小程序開發只是筆者的興趣愛好，在2021年確定好技術路線后，便將其擱置。事實上，筆者早在2021年底便將該項目開源到了GitHub，但是并沒有對該項目做過多的描述。現在對該小程序的設計開發的細節以及思路進行整理，重新發布到CSDN上。

Gitcode鏈接：https://gitcode.net/luolaihua2018/FoodMap

?小程序?美食便簽地圖 開發歷時約四個月，雖然是學習作品，但是其完成度還是挺高的，只可惜微信平臺對具有社交屬性的小程序有嚴格的限制，所以一直無法將其上線。其設計初衷是源于筆者生活中遇到的一個痛點：朋友很久之前給我分享過一個美食店鋪，但當時沒有時間去，等我有時間了想去的時候，已經忘記店鋪在哪叫什么名字了。還需要翻很久的聊天記錄，甚至需要再去問朋友一遍，所以當時想著要是有個專門記錄美食的記事本就好了，把朋友之前給我推薦的美食拿小本本記上，想吃的時候拿出來翻翻。

于是 美食便簽地圖 誕生了。用一句話概括就是：一個熟人之間的美食記錄、分享和交流的平臺。?

1?美食便簽地圖簡介

此小程序的核心理念是：做一個熟人之間的美食記錄、分享和交流的平臺。它適用于各種人群，無論是學生黨還是上班族，只要是對美食感興趣，都可以使用這款小程序去記錄分享美食。

此小程序可以應用于本地生活，用于熟人之間進行美食分享交流和約飯場所的選擇。比如與朋友們聚餐時發現了一家不錯的美食店鋪，約好下次再去，此時可以使用我們的美食便簽地圖，創建一個美食圈子，記錄下這個美食店鋪的詳情，下次聚餐時就可以查看以前記錄過的美食店鋪，以便從中選擇；如果用戶與某位好友之間經常分享交流生活中遇到的美食店鋪，這時兩人可以添加為美食好友，在記錄美食的同時，也可以查看對方的美食便簽，極大地方便了好友之間的美食分享和交流。
亦可以應用于校園生活里，比如一個寢室或一個班級等這樣的有共同品味和興趣愛好的小團體，用戶在某個食堂吃到了不錯的菜品，就可以在美食圈子中發布美食動態，圈子里其他成員看到后下次也可以去品嘗。從而實現了學生之間對食堂美食信息的交流。
用戶如果沒有分享交流美食的需求，也可使用這款小程序的‘美食便簽’和‘美食地圖’功能，記錄身邊遇到的美食店鋪，方便下次再去。也可用于旅游中景點和美食的打卡，記錄下自己到過的地方以及吃過的美食，最后在美食地圖上以個性圖標的方式顯示。

2 美食便簽地圖小程序端開發

2.1 技術選型

云平臺：微信小程序云開發
編程語言：JavaScript+CSS+HTML
第三方服務：騰訊位置服務；珊瑚圖片內容安全；珊瑚文本內容安全；
開發工具：微信開發者工具，原生開發

2.2 前端UI設計

小程序擁有記錄，分享，推薦，收藏美食等基本功能，也加入了導航功能以便于精確獲得店鋪所在地以及周邊美食。它有6個主界面以及6個子界面，共12個功能界面。下面我們將對小程序的6個主界面以及功能進行詳細說明：

圖1 小程序交互設計圖

?2.3主頁界面

圖2?主界面

功能菜單：如圖2左圖所示此小程序設置了5個主功能（個人信息，美食圈子，美食好友，添加美食，美食便簽），后面將對各主功能進行詳細介紹。
美食地圖：點擊‘飯碗’，即進入美食地圖模式，將美食便簽中的店鋪種類圖標展示在地圖上，通過在地圖上直接點擊圖標即可快速進入店鋪詳情頁。
‘去哪吃’彈窗：長按‘飯碗’即可彈出如圖2右圖所示，用于用戶隨機選擇就餐的場所，美食數據來源于用戶加入的和創建的美食圈子以及用戶自己的美食便簽。

2.4個人信息界面

在個人信息界面如下圖3所示，用戶可以進行各種個性化設置：

分享碼：分享碼長按即可復制，用戶之間輸入分享碼即可添加為好友。為了防止隱私泄露，用戶可以隨時更換分享碼，分享碼更換后，他人將不能查看用戶的最新動態。
?今天去哪吃：為了進一步幫助選擇吃飯場所，設置了‘今天去哪吃’功能，聚餐場所的選取將從自己的美食便簽或者從加入的和創建的美食圈子里所有美食店鋪中獲取。
即時分享次數：即時分享是一次性分享，即時分享次數是用戶在創建即時分享時，該分享碼和分享海報中小程序碼的使用次數，當用完次數時該分享碼和分享海報將會失效，他人將不能再查看用戶使用即時分享功能分享出去的美食數據。
設置用戶昵稱和頭像：點擊用戶名和頭像一欄，可快速設置微信昵稱和微信頭像為小程序昵稱和頭像。點擊正上方頭像和用戶名可更改。

2.5?添加美食界面

在添加美食界面如圖4所示，用戶添加自己要推薦分享的美食店鋪及特色菜品，并結合地圖API記錄下店鋪的地理位置和其他相關信息（店名，標簽，人均消費等等），同時可以個性化設置地圖標注圖標，添加美食后保存到自己的美食便簽中以便好友查看。

智能聯想輸入：在輸入店鋪名稱時設置了騰訊位置服務的關鍵詞輸入提示，方便用戶查找店鋪。并且可以實現本地區和全國范圍內的店鋪輸入提示切換。
子頁面-地圖選點：用戶亦可直接在地圖上選擇店鋪及其位置。
內容輸入及安全檢測：由于用戶的輸入內容需要展示給他人，為保障網絡環境健康，用戶上傳的圖片和文字都需要經過安全檢測。

2.6美食便簽界面

美食便簽主界面及子功能界面如下圖所示，用戶可以搜索篩選自己的美食店鋪，此小程序采用鏈接騰訊地圖，所需地圖功能也更為豐富強大。

?按條件排序：如圖設置了三個排序條件（離我最近，最受好評，價格最優）
?店鋪搜索：輸入相關信息即可搜索用戶想找的美食店鋪。
?批量刪除：長按菜單按鈕即可批量刪除美食店鋪。
?分享功能：分享功能分為即時分享和永久分享，它們的分享途徑相同：用戶可以生成分享海報或者點擊海報下方下劃線文字復制分享碼，將海報或分享碼發送給好友，好友通過掃碼或者輸入分享碼即可查看用戶分享的美食店鋪。
?即時分享：用戶可以在個人信息中設置即時分享碼和海報的使用次數，當次數用完時，該即時分享碼和海報中的小程序碼將失效，他人將不能再通過此碼查看用戶分享出去的美食店鋪。此外，好友通過即時分享碼獲取的內容是用戶自己選擇需要分享的內容，并不是用戶全部的美食便簽。
?永久分享：通過永久分享添加的好友可以查看用戶自己的全部美食便簽，同時好友可通過更新獲取到用戶最新的美食便簽動態。
?美食地圖：通過添加自己遇到或收藏的店鋪匯成美食便簽，利用美食便簽繪成‘美食地圖’，美食地圖是將店鋪的種類個性化圖標放在地圖上，點擊圖標上方氣泡窗口即可進入店鋪詳情界面，可以進行再編輯和導航等操作。

2.8 美食好友界面

界面如下圖6所示，通過輸入好友的分享碼或者好友輸入自己個人信息上的分享碼即可添加為美食好友，成為美食好友后即可互相查看各自的美食便簽詳情，若好友后續更新了美食便簽，用戶也可以查看更新后的美食便簽，同時好友之間也可以互相收藏各自的美食店鋪添加至自己的美食便簽。在點擊好友的美食店鋪后進入到店鋪詳情頁，可以跳轉至美食地圖進行導航操作。（為了方便測試，目前支持用戶添加自己為美食好友）

2.9 美食圈子界面

界面如下圖7所示。‘美食圈子’側重于社交圈功能，幫助進行一個好友圈中的美食分享和交流，用戶可以創建美食圈，亦可以通過輸入秘鑰加入好友的美食圈（注：美食圈的秘鑰是四位，美食好友永久分享碼是六位，即時分享碼為8位）。在美食圈中可以‘發布動態’，即同圖3‘添加美食’界面，用于添加自己新的推薦店鋪詳情，‘導入動態’即從自己的美食便簽中選擇店鋪加入到美食圈中。所以美食圈中的店鋪來自圈中所有人發布和導入的動態，在一個美食圈子中的人都可以查看圈中的所有推薦店鋪，包括詳細信息和導航詳情。下面對各頁面和功能做簡單介紹：

①創建的美食圈子

分享與刪除：左滑條目可查看操作按鈕，用戶可以分享和刪除自己創建的美食圈，可通過海報分享或者秘鑰分享，好友掃碼或者輸入秘鑰即可加入
創建：可對圈子的頭像、昵稱、個性簽名以及秘鑰進行個性設置
子頁面-點擊圈子頭像進入-編輯資料

更新秘鑰-秘鑰更新后，舊秘鑰將失效
刪除成員
更改頭像、昵稱和簽名

②加入的美食圈子

退出
加入：輸入秘鑰即可加入新的美食圈子（為了方便測試，目前支持用戶加入自己創建的美食圈子）
子頁面-點擊圈子頭像進入-查看圈子信息與進行信息備注

③子頁面-圈子動態

美食地圖
導入動態：即從自己的美食便簽中選擇店鋪作為美食動態導入到美食圈中
發布動態：即同圖2‘添加美食’界面，添加自己新的推薦店鋪詳情
刪除動態-長按需要刪除的美食動態

* 美食動態刪除權限：群主可以刪除所有，成員只能刪除自己發布的美食動態

* 美食動態編輯權限：所有人只能編輯自己發布的美食動態

2.10?子頁面-店鋪詳情界面

當點擊美食店鋪時即進入此界面，如下圖8所示，此界面包括了導航、收藏、約飯、分享功能。

導航：跳轉至小程序外的地圖軟件進行導航。
收藏：收藏好友的美食店鋪至自己的美食便簽。
約飯：將當前店鋪分享至微信群或微信好友進行約飯，他人點擊鏈接即可查看店鋪詳情。約飯的標題為個人信息中的約飯口號，默認為‘約飯吧’。
分享：生成小程序碼分享海報，通過掃碼可跳轉至本界面。

2.11 后臺數據緩存

為了優化用戶對數據的讀取和處理性能，我們使用了微信小程序的數據緩存技術，將一些關鍵數據存儲在本地，方便用戶下次進入小程序的時候讀取。下圖9為小程序獲取云端最新數據的流程圖。小程序每次初始化都會向云端拉取最新的數據，并緩存在本地。現在分別對它們進行介紹：

2.12 訂閱消息通知

新成員加入通知

用戶創建美食圈子或者更改美食圈子秘鑰時會詢問用戶是否接收新成員加入通知，如果用戶允許通知，則新成員加入用戶創建的美食圈子則會收到如圖10所示的通知。用戶點擊消息即可查看自己的美食圈子。

好友查看美食列表通知

當用戶把自己的分享碼或者分享海報分享給好友時，以及更改了美食分享碼時會詢問用戶是否接收好友查看美食列表通知.

2.13 獲取位置信息

我們的小程序特色功能之一為美食地圖，所以為了使用戶快捷地查詢到自己身邊的美食，我們向用戶請求使用定位功能來獲取用戶當前位置以便查看用戶周圍的美食店鋪以及添加身邊的美食店鋪，如下圖12左圖顯示。

2.14 獲取昵稱和頭像

如圖12中圖所示，小程序為新用戶設置了默認頭像和昵稱，如果用戶想快捷地使用微信昵稱和頭像則可以一鍵設置。獲取用戶頭像和昵稱只是用作向美食好友展示，并無其他作用。

2.15 保存圖片到相冊

小程序美食店鋪的分享有三種方式：分享碼、發送小程序頁面鏈接以及海報分享。用戶生成了海報之后可以保存到本地相冊，便于向微信好友或者發送的朋友圈子分享自己的美食海報。如圖12右圖所示。

3 關鍵功能函數的封裝

本程序的關鍵功能函數有三個：一是對數據庫的增刪改查，二是訂閱消息的處理，三是對用戶上傳的圖片和文字做內容安全檢測。下面分別對其中的關鍵功能函數做簡單介紹。

3.1 對數據庫的增刪改查

對數據庫的增刪改查是本程序的核心功能。所以我們對不同的數據集合的處理封裝成不同的函數。其中主要有三個：

更新用戶信息（updateUserInfo）

向該函數傳入需要更新的數據以及數據類型即可把更新云端數據庫中的相應內容。數據類型有：用戶昵稱、用戶頭像鏈接、分享碼、朋友列表、收藏店鋪id列表以及美食店鋪列表。

獲取美食圈子數據（getGroupsList）

由于美食朋友圈的數據是動態的，需要實時獲取云端數據。美食朋友圈的數據是單獨放在一個集合，通過傳入用戶的openId向云端拉取數據，拉取的數據分為用戶創建的美食圈子列表和用戶加入的美食圈子列表。

更新美食圈子內容（updateGroupsList）

當用戶在美食圈子中發布動態或者修改自己創建的圈子資料時需要使用到此函數。向此函數傳入需要更新的數據和數據類型即可實現更新。更新的數據類型有：美食動態、圈子頭像、圈子名稱、圈子個性簽名以及圈子成員列表。

3.2 訂閱消息的處理

訂閱消息的處理分為請求發送訂閱消息（requestSendMsg）和發送訂閱消息（sendMsg）。通過向requestSendMsg函數傳入不同的模板ID即可請求發送不同的訂閱消息；向sendMsg函數傳入需要發送的消息數據，在函數里調用云函數并將消息數據傳入云函數實現訂閱消息的發送。

3.3 內容安全檢測

圖片和文字內容的安全檢測也是小程序的一個重要功能。安全檢測功能使用了小程序服務市場里的第三方服務：珊瑚文本內容安全檢測和珊瑚圖片內容安全檢測。通過向doImgSecCheck和doMsgSecCheck兩個函數分別傳入圖片和文字，返回的內容為布爾類型數據，true表示內容安全，false表示內容不安全。

4 后臺服務器端開發

本程序采用的云服務為微信小程序云開發，它極大地方便了開發者對云服務的使用。微信小程序云開發分為三個方面：云函數，云數據庫以及云存儲。下面分別介紹對它們的使用。

4.1 云函數

小程序使用了三個云函數實現對小程序相關數據的處理：

4.1.1 checkSafeContent

傳入參數為數據和請求類型（requestType），通過請求類型對數據做不同的處理，然后返回結果。功能如下：

圖片和文字內容安全檢測；

②?使用openapi.wxacode.getUnlimited生成帶頁面路徑和場景值的小程序碼；用戶掃碼即可跳轉到相應的界面和獲取相關的數據。用于小程序分享海報中的小程序碼。（由于小程序尚未上線，小程序生成的海報中的二維碼僅供展示作用，暫時無法掃碼使用）

③ 獲取美食圈子所有成員詳情列表，通過傳入美食圈子成員id列表，向數據庫中獲取成員數據，從而返回成員詳情列表。用于美食圈子資料中查看群員資料。

4.1.2 getUserOpenId

功能：用戶鑒權，通過傳入的用戶數據判斷當前用戶是新用戶還是老用戶。如果是新用戶則初始化用戶數據，在用戶數據集合中新增用戶數據記錄。并返回結果。如果是老用戶則從數據庫中拉取最新的用戶數據并返回。

4.1.3 sendMessage

功能：根據傳入的消息數據和請求類型調用訂閱消息函數：使用服務端API

cloud.openapi.subscribeMessage.send向需要接收消息的用戶發送訂閱消息。跳轉小程序類型為trial體驗版；進入小程序查看”的語言類型為zh_CN(簡體中文)。

4.2 數據庫

小程序創建了三個數據集合用來存儲用戶產生的數據：

4.2.1美食圈子數據集合（groupList）

美食圈子數據集合，用來存儲所有用戶創建的美食圈子，如下表1所示。

表1 美食圈子集合數據結構表

名稱	作用
_id	美食圈子的唯一標識
_openid	創建者的openid
nickName	群昵稱
groupAvatarUrl	群頭像鏈接
createTime	創建時間
secretKey	群秘鑰，用于加入美食圈子
sign	群簽名
stores	群動態列表
membersList	成員id列表

4.2.2?InstantShare數據庫

表2 InstantShare集合數據結構表

數據名稱	作用
_id	即時分享數據的唯一標識
_openid	創建者的id
createTime	創建時間
stores	分享的美食店鋪
shareCount	分享次數
info	分享者的頭像和昵稱
instantShareCode	即時分享碼

4.2.3 userlnfo數據庫

表3 userlnfo集合數據結構表

數據名稱	作用
_id	用戶數據的唯一標識
openid	用戶在小程序的唯一標識
stores	店鋪數據列表
starStoreIdList	收藏店鋪id列表
info	用戶信息，頭像和昵稱數據
shareCode	用戶分享碼
friendsList	美食好友列表

4.3 云存儲

在小程序使用過程中，用戶產生的各種圖片數據都需要保存下來，比如用戶頭像和群頭像以及美食店鋪的詳情圖片等等。我們創建了四個文件夾來存儲相關的圖片數據：

小程序功能圖標文件（appImages）

美食圈子群頭像圖片文件夾（groupavatar）

用戶頭像圖片文件夾（userAvatar）

美食店鋪美食圖片文件夾（userFoodImages）

5? 隱私保護與內容安全

5.1內容安全檢測

由于小程序涉及UGC內容的發布與交流，為避免小程序被濫用，我們使用了微信小程序服務市場的珊瑚文本內容安全和珊瑚圖片內容安全兩個內容審核接口來完善審核機制，保障發布內容的安全。小程序中用戶所有發布的文本內容（如用戶昵稱，商鋪點評，以及約飯口號等）和圖片內容（如用戶頭像，上傳的美食圖片等）都進行了安全檢測。如果不符合安全審核則不能被展示。

5.2?隱私保護

由于我們的小程序的另一個功能特點是分享美食，所以我們在用戶的隱私保護上也采取了相應的措施，來保障分享的安全，防止用戶的數據被泄露或者被利用：

美食圈子的加入需要有秘鑰，美食圈子的創建者可以將秘鑰動態改變，改變后，舊的秘鑰將不起作用，其他人不能加入美食圈子。
美食店鋪的分享分為即時分享和永久分享，二者都是輸入分享碼或者掃分享海報中小程序碼的形式分享美食店鋪。
即時分享：只能獲取用戶當前的美食店鋪數據，分享者可以設置分享次數，每有一個好友查看了該用戶的即時分享，分享次數將會少一次，當分享次數用完時，該即時分享將失效，其他用戶將不能獲取到分享的美食店鋪。
永久分享：其他用戶輸入當前用戶的永久分享碼即可添加對方為美食好友，好友可以通過更新數據獲取到當前用戶的實時美食動態。為了防止分享碼被泄露或者濫用，用戶可以定期更新分享碼，分享碼改變后，舊的分享碼將不起作用。從而實現自己的隱私得到保障。

數據庫的操作權限鑒權：我們的小程序有三個數據集合，它們的操作權限

均為所有用戶可讀，僅創建者可寫。從而最大限度地保障了用戶的數據安全。

5.3 輸入內容邊界條件限制

為了防止小程序存儲空間溢出，以及優化用戶的使用體驗，我們對用戶的各種輸入內容都做了限制，如下表所示

表4 用戶輸入限制

輸入內容	限制
可創建的美食圈子	6
可加入的圈子	6
圈子成員人數	100
可上傳的美食圖片	9
可添加的美食店鋪	200
可添加的美食好友	30
特色菜品	9
商鋪點評字數	200

6 開源項目引用

我們的小程序為了使界面更加優美，功能更加全面，采用了GitHub上的四個開源項目，我們在這些開源項目的基礎上進行修改，為我們自己的小程序優化了用戶界面以及增加了不少功能。

（1）Color UI

ColorUI是一個GitHub上的小程序組件庫，它的特點是鮮亮的高飽和色彩以及專注視覺。我們的小程序的大部分組件的樣式均來自ColorUI。

GitHub網址：https://github.com/weilanwl/ColorUI

（2）Vant Weapp

Vant Weapp 是移動端 Vue 組件庫 Vant 的小程序版本，兩者基于相同的視覺規范，提供一致的 API 接口，助力開發者快速搭建小程序應用。我們的小程序在添加美食頁面中使用了其三個組件：設置人均消費的slider組件、設置推薦指數的Rate評分組件以及提供圖片上傳功能的Uploader文件上傳組件。

GitHub網址：https://github.com/youzan/vant-weapp

（3）海報?wxa-plugin-canvas

wxa-plugin-canvas是一個生成海報的組件，通過非常簡單的配置就可以生成精美的海報。我們的海報圖片有兩種樣式，如圖12所示，其中右圖為使用了wxa-plugin-canvas組件生成的海報圖片。