小程序·雲開發實戰：SCRM社交化客戶管理小程序

時間 2020-01-19

原文原文鏈接

點擊觀看大咖分享

隨着微信小程序不斷髮展壯大，傳統的 CRM 廠商也在不斷向微信上遷移，畢竟微信的背後是巨大的用戶和流量，還有極其方便的移動支付渠道。用微信小程序來作CRM，和之前的作法存在一些比較明顯的差別，主要包括這幾個方面：用戶的使用習慣不一樣、技術上的實現方式不一樣、運營方面的作法不一樣，因此，業內給這一類的 CRM 應用起了個新名字，叫作 Social CRM，簡稱 SCRM。前端

本期騰訊雲大學大咖分享邀請大漠窮秋老師，將會爲你們介紹基於微信小程序的SCRM，帶你們深刻理解SCRM的發展和應用場景，並進行社交化客戶管理小程序的實戰教學，上手實際寫一個SCRM小程序，完整覆蓋小程序+雲開發的完整流程。git

本次分享內容：程序員

一、概要介紹小程序雲開發
二、SCRM的商業理解
三、界面設計-定義產品功能
四、雲端-定義數據結構和雲函數
五、開始寫代碼實現界面和功能

1. 概要介紹小程序雲開發

小程序雲開發是經典的serverless的實現，小程序端提供了完善的組件庫和開發工具，開發者能夠聚焦本身的業務實現。雲端提供了基於MongoDB的數據庫、對象存儲和雲函數，以及運維工具等功能。這樣一來，整個開發、部署、運維就能夠所有一站式完成，藉助於微信和騰訊雲強大的功能幫咱們節省了大量的時間，節省了大量的錢，這就是它的本質。雲端有運營分析的界面，當一款小程序上線以後就能夠在運營分析界面上看到用戶量和資源使用的狀況，包括監控的圖表均可以看到。github

小程序雲開發能力簡介數據庫

雲函數，無需自建數據庫，在雲端運行的代碼，微信私有協議自然鑑權，能夠快速完成用戶信息系統和對話邏輯。
雲數據庫，無需自建數據庫，一個便可在小程序前端操做，也能在雲函數中讀寫的JSON數據庫，更重要的是再也不須要維護本身的WebSocket通訊來監聽用戶最新消息。
雲存儲，無需自建存儲和CDN，在小程序前端直接上傳/下載聊天文件，在雲開發控制檯可視化管理，也可經過HTTP api搭建管理系統。
雲調用，原生微信服務集成，基於雲函數免鑑權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力。
HTTP API，經過HTTP，實現小程序外訪問開發資源，使用HTTP API開發者可在已有服務器上訪問雲資源，實現與雲開發的互通。

如何使用雲開發json

首先在開發工具中新建項目時選擇後端服務爲小程序雲開發，便可快速生成雲開發的項目模板，在界面的左上角點擊雲開發按鈕，就可直接調轉到環境建立的界面，添加環境名稱，等待部署完成後就能夠在開發工具中調用雲開發。canvas

小程序雲開發的無服務開發模式，助力快速上線小程序。對比傳統開發和雲開發模式，傳統開發模式下須要考慮彈性伸縮、異地容災、網絡防禦等，還需完成本身的業務邏輯，而在雲開發模式下，這些須要考慮的東西統統由騰訊雲基礎服務處理了，開發者只須要考慮本身的業務邏輯，大大下降了工做量。小程序

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上：