小程式·雲開發實戰：SCRM社交化客戶管理小程式
- 2020 年 1 月 14 日
- 筆記
點擊觀看大咖分享
隨著微信小程式不斷發展壯大，傳統的 CRM 廠商也在不斷向微信上遷移，畢竟微信的背後是巨大的用戶和流量，還有極其方便的移動支付渠道。用微信小程式來做CRM，和以前的做法存在一些比較明顯的差異，主要包括這幾個方面：用戶的使用習慣不同、技術上的實現方式不同、運營方面的做法不同，所以，業內給這一類的 CRM 應用起了個新名字，叫做 Social CRM，簡稱 SCRM。
本期騰訊雲大學大咖分享邀請大漠窮秋 老師，將會為大家介紹基於微信小程式的SCRM，帶大家深入理解SCRM的發展和應用場景，並進行社交化客戶管理小程式的實戰教學，上手實際寫一個SCRM小程式，完整覆蓋小程式+雲開發的完整流程。
本次分享內容：
1、概要介紹小程式雲開發 2、SCRM的商業理解 3、介面設計-定義產品功能 4、雲端-定義數據結構和雲函數 5、開始寫程式碼實現介面和功能
1. 概要介紹小程式雲開發
小程式雲開發是經典的serverless的實現，小程式端提供了完善的組件庫和開發工具，開發者可以聚焦自己的業務實現。雲端提供了基於MongoDB的資料庫、對象存儲和雲函數，以及運維工具等功能。這樣一來，整個開發、部署、運維就可以全部一站式完成，藉助於微信和騰訊雲強大的功能幫我們節省了大量的時間，節省了大量的錢，這就是它的本質。雲端有運營分析的介面，當一款小程式上線之後就可以在運營分析介面上看到用戶量和資源使用的情況，包括監控的圖表都可以看到。
小程式雲開發能力簡介
- 雲函數，無需自建資料庫，在雲端運行的程式碼，微信私有協議天然鑒權，可以快速完成用戶資訊系統和對話邏輯。
- 雲資料庫，無需自建資料庫，一個即可在小程式前端操作，也能在雲函數中讀寫的JSON資料庫，更重要的是不再需要維護自己的WebSocket通訊來監聽用戶最新消息。
- 雲存儲，無需自建存儲和CDN，在小程式前端直接上傳/下載聊天文件，在雲開發控制台可視化管理，也可通過HTTP api搭建管理系統。
- 雲調用，原生微信服務集成，基於雲函數免鑒權使用小程式開放介面的能力，包括服務端調用、獲取開放數據等能力。
- HTTP API，通過HTTP，實現小程式外訪問開發資源，使用HTTP API開發者可在已有伺服器上訪問雲資源，實現與雲開發的互通。
如何使用雲開發
首先在開發工具中新建項目時選擇後端服務為小程式雲開發，即可快速生成雲開發的項目模板，在介面的左上角點擊雲開發按鈕，就可直接調轉到環境創建的介面，添加環境名稱，等待部署完成後就可以在開發工具中調用雲開發。
小程式雲開發的無服務開發模式，助力快速上線小程式。對比傳統開發和雲開發模式，傳統開發模式下需要考慮彈性伸縮、異地容災、網路防護等，還需完成自己的業務邏輯，而在雲開發模式下，這些需要考慮的東西通通由騰訊雲基礎服務處理了，開發者只需要考慮自己的業務邏輯，大大降低了工作量。
2. SCRM的商業理解
這款小程式的名字是「客流」，本質上就是SCRM（Social CRM）。
先理解一下什麼是SCRM？大家已經比較了解CRM系統的概念和背景，截一張Wikipedia上面的完整定義給大家看一下：
CRM系統在傳統企業裡面用的非常多，比如：電商、金融、餐飲、教育、電信、醫療……。所有巨頭企業都有自己訂製版的CRM系統，因為他們客戶量非常大。比如說典型的電信業，像中國移動、中國聯通他們全國都有幾個億客戶，這些客戶的資料，客戶的關係都需要大型的CRM系統進行維護。
CRM是一個很大的概念，這種系統一般會有很多功能，比如說sales、marketing、customer、employee support等等，下面是大概的結構圖。
有人會問，既然我們在桌面端已經有了這麼龐大的CRM系統，為什麼現在要向微信小程式上做遷移呢？典型的幾個原因如下：
- 微信背後是巨大的用戶量，現在微信已經有11個億的用戶，月活數量非常恐怖，有幾個億的月活。
- 另外我們在微信上有非常完善的營銷渠道，很多人在利用朋友圈、公眾號、小程式來進行裂變式的營銷，這是巨大的優勢，是其它的平台不具備的。
- 微信背後有微信支付，在中國移動支付領域，支付寶和微信是兩個最大的巨頭。我們用微信做小程式，在支付這層面會更加的通暢。
所有的傳統的巨頭他們都會開發自己專用的CRM系統，他們會投入大量的金錢和人力。比如說電力、電信、金融、交通這些領域，不管是中國還是國外，都是這樣的。
但是，除了這些巨頭之外，我們日常生活裡面很多的小生意，做小生意的小老闆、小店也需要維護自己的客戶關係，比方說：
- 家門口的小五金店每天也有很多客戶來買東西，他服務的是周邊一公里到三公里範圍的人，一年下來來買東西的人也不少，他也需要來維護客戶關係。
- 還有一些小超市，每天也有很多顧客來買東西，這些也是他的客戶關係。
- 還有一些小吃店，他也要維護客戶關係。
很明顯，這些小生意，小老闆不可能自己開發小程式，也不可能招幾個程式設計師投十萬二十萬來開發一個CRM系統，這是不可能的。那麼，這些小店、小老闆是怎麼維護自己的客戶關係的呢？看下圖，所以在這種場景之下，SCRM的概念就變得更加重要，我們需要更加普惠的SaaS實現，讓海量的做小生意的老闆也能維護、管理自己的客戶關係。同時，我們還可以讓這些小老闆可以藉助微信龐大的社交關係來進行營銷，從而提升自己的營業額。
但是，SCRM小程式跟傳統的CRM系統還是有很大區別的：
- 我們不能把傳統CRM系統上的所有功能都照搬過來，那樣的話就不是小程式是大程式了。
- SCRM更加側重利用微信的社交功能來進行客戶關係的建立和維護，讓服務提供者能在小程式上面維護他和客戶之間的關係。比如，當那些小店的老闆想做一些促銷的時候，他能夠利用小程式讓老客戶第一時間看到。
- SCRM更加側重使用微信支付的功能。
目前市面上還有一些同類產品，我們來做一下簡單的對比。比如說微信的企業版、還有釘釘，他們也在推SCRM的功能。但是，我們在微信上用小程式來實現SCRM會更加輕、更加薄，傳播性更好，跟用戶也更貼近。我們不需要讓用戶安裝獨立的APP，打開微信就可以直接使用。
3. 介面設計-定義產品功能
用草圖繪製工具來畫一下小程式需要實現的功能，首頁要放一個名片告訴大家我是誰，我有什麼店，我的聯繫方式是什麼。詳情頁上面放一些圖文介紹，甚至放一些影片，用來告訴別人我有一些什麼樣的產品和服務，它們是什麼樣子。
還有基本的客戶關係的維護、溝通交流的渠道，比如說可以跟客戶發消息、打電話等等場景。同時還可以有一些圖表統計介面，告訴我現在有多少客戶，我和客戶之間的關係是一種什麼樣的結構。下面這些是設計草圖，我們沒有辦法拿到很詳細地人際關係鏈，人際關係鏈是微信的核心資產，我們最多拿到一些子圖（Subgraph）。大概一共有30個頁面需要實現，得到介面之後就可以來定義雲端的數據結構和雲函數了。
4. 雲端-定義數據結構和雲函數
在微信開發者工具裡面點雲開發按鈕就可以打開雲開發相關的介面，我們在資料庫頁面上可以定義數據結構。
小程式的資料庫背後實際上是MongoDB，「客流」這個小程式一共定義了7個集合，集合的概念類似於關係性資料庫里的一張表，我們所有的數據都放在不同的集合里。
但是，NoSQL裡面的集合跟傳統關係型資料庫有很多不一樣的地方。除了剛才有人問的事務問題之外，實際開發過程中還有一些比較麻煩的地方。比如，多個集合的關聯查詢寫起來比較噁心，沒有傳統的SQL語句那麼方便。
對象存儲這塊可以建立不同的目錄，用來放不同的上傳文件，根據不同的業務模組建一些文件夾，把同一個業務模組相關的文件都放在對應的目錄裡面。
雲函數用來定義雲端調用的方法，提供了定時器之類的工具函數。我們可以利用雲函數來實現很多業務功能，比如說定時把資料庫裡面某些用來做統計的集合生成數據。
一共定義了7個集合，分別解釋如下：
5. 開始寫程式碼實現介面和功能
首先註冊號雲開發appid，如果註冊好了就跟著我一起嘗試做一個介面出來，如果還沒有的話就聽我解釋程式碼裡面比較關鍵的點。
開發過程中有坑的話，我會把一些坑解釋一下，實際上我踩了很多坑。
- 我們一起來創建一個項目，然後導入一些組件庫、樣式庫，編寫一些全局的樣式。
- 把四個主入口頁創建起來，然後創建一些可復用的組件。
- 在寫介面的過程中怎麼找到好看好用的圖表，怎麼在小程式實現圖形的介面，像曲線圖、柱狀圖。
- 再看雲函數和雲資料庫訪問的過程，怎麼調用雲端的資料庫和雲函數。
- 然後給大家講一些避坑指南。
- 最後一部分是把所有寫好的程式碼鏈接給你，如果你對這個小程式感興趣，可以自己繼續往前開發，最終得到一個完整的小程式。 以下是開發過程中的一些注意點和小坑，給大家解釋一下：
- 第一步要在微信開放平台註冊一個帳號，郵箱只能註冊一個小程式，這是開發過程中遇到的第一個小坑。帳號註銷掉郵箱也不釋放，你肯定要準備好幾個郵箱，所以這裡請小心一點。
小程式起名字是有講究的，有自動校驗的，比如說你起一個很奇怪的名字或者上傳很奇怪的logo是肯定審核不通過，所以要預先準備好。
走完註冊過程之後會拿到一個很關鍵的較appid，它是唯一的，有了appid之後就可以創建小程式了。
- 打開微信開發者工具，開發者工具也需要登陸的，創建一個項目。創建項目的時候有兩個關鍵點，你可以選擇不適用它的雲服務，如果不用就選第二個小程式開發。然後這裡有一個appid，你在註冊小程式的時候系統給你的，這樣就創建一個介面出來。
創建完之後會自動生成一個默認的介面，還會生成一些程式碼，這些都是默認的，你在開發的時候肯定是要把它刪掉的，刪掉之後會得到一個比較乾淨的項目結構。
你不一定要在微信開發者工具里寫程式碼，因為這個開發者工具雖然集成了很多功能，部署、版本管理都可以在這裡面完成，但是寫程式碼的能力實在太差了。比如說沒有智慧提示，然後也沒有插件。所以，推薦大家還是用VS Code去寫程式碼，在VS Code裡面打開小程式項目的根目錄就可以了。
- 雖然是小程式，但我們在寫的過程中程式碼的量並不小，所以目錄和文件數量還是比較多。這個項目最關鍵的是兩個根目錄，一個是cloudfunctions，一個是minprogram。minprogram是小程式端的程式碼，cloudfunctions是雲端相關的程式碼。 minprogram會裡面放三個字目錄，assets裡面放一些靜態資源，pages目錄裡面放頁面，components裡面放組件，這是一個經典的目錄劃分方式。
- 接下來注意一下app.json裡面的關鍵配置，第一個是appid，這個ID一定要用你自己申請到的小程式ID，不能用別人。
- 在開發小程式的過程中因為要寫前端程式碼，寫介面，明顯要用到一些樣式。這些樣式可以自己寫，如果CSS足夠好或者足夠有耐心就自己寫沒有問題，寫一些風格出來。如果想快一點的話用市面上成熟的組件庫，比如說WeUI提供給我們的，微信官方團隊提供一組官方樣式的實現叫WeUI。目前是2.0.0，把它放在assets裡面，還有CSS也可以引來過來。
WeUI提供哪些功能？
你可以訪問一下他們的官方網站，裡面有一個體驗版的小程式可以掃描看一下。它把基礎的表單、導航條、基礎的grid都提供給你了，這些程式碼可以直接抄過去使用，不用自己寫這些結構。另外，它還定義了層級規範，告訴你應該怎麼組織介面的層次結構，這些都是很好的功能。
除了WeUI之外，在小程式文檔上面還可以找到內置的組件。小程式內置了很多內部的組件，比如說圖表、文本，這是已有的組件庫。
我們在全局的app.wxss裡面引入WeUI相關的樣式。這些樣式文件的後綴都是wxss，實際上是CSS的子集，並不能支援所有的CSS規範。大家注意wxml和wxss雖然他們都支援基本的HTML和CSS的語法，但並不是全集，所以在寫的時候還是有一些坑的，要特別翻閱一下官方的文檔。
- 我們有了樣式之後就可以構建主入口四個主入口頁，四個主入口野是在app.json裡面改的，有一個配置項叫tabBar，list就是主入口的四個。 如果你不想用這個方式，可以把整個應用指向index，然後在index裡面用其它布局模式來構建頁面，就像你開發其它WEB應用那樣。 我們主要功能是首頁、用戶之間的關係還有統計數據的圖表和圖形，最後是用戶自己全局的設置頁。
- 我們來看index裡面的寫法，這一些文件它們互相之間的關係，如果剛好做前端開發就明白這裡面的，一個常見文件，一個js文件，一個是json文件，再是json是微信配置。這裡要聲明一下用的導航條的顏色還有標題的文本、標題的樣式這都是微信特有的地方，必須寫，不寫不行。如果用到外部的功能必須要聲明在裡面才行。 我在index.wxss裡面就可以使用微信所提供的基本的視圖的標籤來寫我的結構，這個是微信裡面小程式所提供的頂級的器類，可以類比與DIA，它也可以寫glass，這些語法大家都比較熟悉就不多說了。 這些結構都可以逐層嵌套，我們再看怎麼定義組件。
- 我們的介面上有很多是可以復用的內容，比如說首頁有名片的區域，實際上在我編輯名片的地方也有這個介面，可以選擇名片的模板，很明顯我把它要定義為可復用的。 組件只能定義在components目錄裡面，我可以定義一個可復用的card-default組件。請注意，定義組件和定義頁面的方式是不一樣的，組件裡面聲明的類型是component而不是用page，在微信小程式這裡是嚴格區分開的，跟其它前端框架不一樣。 page本身是不能互相嵌套和復用，如果某個介面需要復用，必須定義成組件。 獲得組件之後可以用組件名稱作為標籤使用，同時也可以給組件傳遞參數。比如說組件裡面可以定義一些需要接收的參數，這個可以定義在component，如果你是（reart）的開發者，別人可以給傳參數給它，參數可以傳各種各樣的類型，就是傳一個大對象給它也是OK的。date都可以放在wxml文件裡面取值都沒有問題，這是組件的定義方式。有了之後就可以裝出一大堆適合你的組件，可以復用的組件。
- 再來看圖標，我們的介面上有一些看起來不錯的圖標，掃一掃、預覽、編輯，等等。這些圖標在我們做小程式的過程中也是很實際的需求，你可以找一組很好看、很和諧的圖標。 給大家一個神器叫iconfont，https://www.iconfont.cn ，這裡面所有的日常能想到的圖標都有，比如說交易、朋友圈全部都有。當然也可以選擇fontawesome，但fontawesome在微信小程式裡面用起來有點麻煩，主要是字體文件的嵌入問題。我嘗試了一下，沒有成功，如果你有興趣，可以自己嘗試一番。
- 再來看圖表，我要在小程式裡面展現一些分析性的介面，我要描述客戶之間互相的關係，要展現一些帶地理資訊的東西，我要展現一些曲線圖，怎麼辦？ 在WEB開發裡面，我們有Echarts這個神器，在小程式這塊，有一個ec-canvas，它是基於Echarts封裝的。ec-cavas專門針對微信小程式做了封裝，所以請使用它。
- 我們再看怎麼進行前後端的數據交互，比如說列表頁和雲函數是怎麼用的。 在關係頁面上只要用wx.cloud.database就可以拿到db對象，整個過程和以前操作關係的資料庫還是比較類似的。在操作關係資料庫的時候一般會拿一個connection對象，然後就可以用SQL進行資料庫操作，做完這些操作之後可以提交事務或者回滾。 在雲開發這裡，你需要拿到一個db對象，然後利用db對象所提供的API進行資料庫操作。你要搜索哪個集合，你告訴它集合的名稱。下面的語法很好了解，提供一個where條件，限定取多少行，也可以orderby，提供這些語法之後就可以get到數據，提交一些函數如果成功怎麼樣，失敗怎麼樣。這是操作資料庫的方式。 操作雲函數的方式也是類似的，它有對應的API，只要調用就行了。
- 在實際開發過程中，還有一些小坑需要注意。比如說在做介面的時候經常用九空格來構造排列的圖標，這些圖標掃一掃點一下就開始掃一個圖片或啟動相機。但是很可惜，微信小程式只在button對象上增加了open-type屬性，我們可以利用這個屬性來打開相機，但是其它組件是沒有open-type屬性的。那怎麼辦呢？一個比較常見的方式在圖標下面藏一個button，把它搞成透明的，這樣就可以繞過去。
- 另外客服這部分，我們做小程式經常會出現這樣的需求，當別人加我為好友之後，我希望能跟他聊天。我希望有一個微信聊天一樣的組件，可以發語音、發文字、發圖片，但是實際上沒有這樣的組件，微信小程式沒有提供。所以，如果你需要這樣的聊天組件，可以自己封裝，或者到市面上去找開源的。
- 圖文詳情頁這邊的坑也要注意，小程式提供了一個叫richtext的組件，但是它能支援的HTML標籤是有限的。
- 富文本編輯器也很難實現，雖然小程式裡面提供了一個RichEditor，但是功能還比較有限。所以，你可以發現，任何一個產品，當你做深入了之後，總能發現各種各樣不爽的地方。對於這些東西，如果能繞開的話就盡量繞開，除非你的老闆全力支援你，不限制你的時間，也不卡你的KPI，否則你可以需要花費大量的時間進行研究開發，出來的效果還不一定好。
接下來給大家看最終完成的程式碼，我提交了兩份，在github和gitee上面都提了一份，我把路徑發給你們，如果有興趣可以自己下載下來繼續研究。
注意，千萬不要用我的appid。
雲端的數據結構也給你們，這樣你們就可以在本地把項目創建起來了。
這個小程式的主體框架已經都實現了，總共有31個介面，總共花了4個完整的工作日，後面我找時間把它全部做好然後上線。
源程式碼已經提交到GitHub和Gitee上：
問卷
為了給廣大開發者提供最實用、最熱門前沿、最乾貨的影片教程，請讓我們聽到你的需要，感謝您的時間！點擊填寫 問卷
騰訊雲大學是騰訊雲旗下面向雲生態用戶的一站式學習成長平台。騰訊雲大學大咖分享每周邀請內部技術大咖，為你提供免費、專業、行業最新技術動態分享。
