社區(qū)團(tuán)購制作-社區(qū)團(tuán)購小程序-生鮮社區(qū)團(tuán)購制作

斯科爾斯 全棧生姜頭 2016-10-01微信小程序（應(yīng)用號(hào)）9月21號(hào)發(fā)布內(nèi)測(cè)以來，對(duì)于我這種沒有內(nèi)測(cè)資格的來說，若隱若現(xiàn)，若即若離，我也只能霧里看花，管中窺豹。

本文小結(jié)一下我目前理解的小程序，也展望一下未來到底可以用在哪些地方。

特性

先來一張網(wǎng)上都傳爛了的張小龍朋友圈截圖：（出自張小龍之手的真實(shí)性達(dá)99.9999%）

根據(jù)張小龍這段文字，我們可以知道小程序的幾個(gè)特性：用完即走。這個(gè)是張小龍下的定義，意思是它活好不黏人吧，呵呵。需用戶主動(dòng)搜索或掃一掃觸達(dá)，小程序不主動(dòng)騷擾用戶。體驗(yàn)介于H5和原生APP之間，能比網(wǎng)頁做更多的事情，但也不是無所不能，許多APP能做的事情小程序做不了。（這個(gè)特性張小龍沒說，不過發(fā)布的技術(shù)文檔直截了當(dāng)?shù)谋砻髁耍?/p>

應(yīng)用領(lǐng)域&場(chǎng)景

大眾領(lǐng)域（2C）：O2O服務(wù)。典型場(chǎng)景包括打車、外賣、電影、洗衣服、美甲等等，用戶因?yàn)橛辛嗣鞔_的需求所以才需要打開應(yīng)用去做一件特定具體的事，很符合“用完即走”的特性。里把口碑外賣做到支付寶里，那美團(tuán)大眾也可以把外賣做成小程序放到微信里。做到服務(wù)號(hào)里面不就行了？體驗(yàn)差嘛，看個(gè)電影選個(gè)位，服務(wù)號(hào)那種頁面跳來跳去有時(shí)還斷網(wǎng)的體驗(yàn)容易讓人崩潰。云智能硬件相關(guān)。例如各種智能家居設(shè)備，還有例如最近很火的摩拜單車，其實(shí)都挺適合用小程序?qū)崿F(xiàn)。不需要為了我買的一個(gè)只能插排特定去裝一個(gè)APP，這是多么強(qiáng)大的理由！電商（微店）。有贊、微店這些靠微信生態(tài)發(fā)展起來的產(chǎn)品應(yīng)該會(huì)做小程序版本吧？對(duì)于電商類產(chǎn)品，小程序+服務(wù)號(hào)可以是標(biāo)配模式，很好的解決服務(wù)+營銷的問題。工業(yè)4.0，消費(fèi)升級(jí)，DIY。例如尚品宅配，易裁縫這類廠商可以考慮用小程序?qū)崿F(xiàn)在線設(shè)計(jì)，這比做app有著更低的推廣門檻和實(shí)現(xiàn)成本。

企業(yè)領(lǐng)域（2B）：我個(gè)人認(rèn)為小程序在2B領(lǐng)域更加適用，因?yàn)?B領(lǐng)域的產(chǎn)品不黏人（下班了誰還會(huì)去盯著公司OA啊？），2B領(lǐng)域的產(chǎn)品有時(shí)候不得不做得復(fù)雜（H5無法滿足需求或無法實(shí)現(xiàn)好的體驗(yàn)）。企業(yè)服務(wù)窗。最典型的例如、、電信運(yùn)營商等的服務(wù)窗口可以做在小程序上，例如可以設(shè)計(jì)一個(gè)小型IM來作為實(shí)時(shí)客服，優(yōu)化客服體驗(yàn)。商業(yè)分析結(jié)果展現(xiàn)（BI報(bào)表展現(xiàn)）。老板們隨時(shí)隨地查看著企業(yè)經(jīng)營數(shù)據(jù)。場(chǎng)景化業(yè)務(wù)工具。小程序很“小”，我認(rèn)為OA，ERP，CRM這類“大”概念不適宜塞到一個(gè)小程序里，而是應(yīng)該考慮將一個(gè)場(chǎng)景所需要的工具放到一個(gè)小程序，比如幫倉庫管理人員實(shí)現(xiàn)出入庫、檢測(cè)，幫外賣配送員實(shí)現(xiàn)訂單，幫工程人員實(shí)現(xiàn)巡檢（山區(qū)巡檢，海上巡檢可能沒有網(wǎng)絡(luò)，需要臨時(shí)本地存儲(chǔ)）。小程序和企業(yè)號(hào)打通，相輔相成實(shí)現(xiàn)企業(yè)移動(dòng)辦公。企業(yè)號(hào)一個(gè)agent一般就是一個(gè)場(chǎng)景，一個(gè)完整的企業(yè)管理系統(tǒng)往往需要許多場(chǎng)景構(gòu)成，許多場(chǎng)景適合通過H5直接實(shí)現(xiàn)，例如表達(dá)收集，但是往往還是有些場(chǎng)景需要更好的用戶體驗(yàn)的，那么可以借助小程序?qū)崿F(xiàn)。

總之，小程序即將推出，勢(shì)必會(huì)一波潮流。無論你的產(chǎn)品形態(tài)是APP還是服務(wù)號(hào)、企業(yè)號(hào)，順應(yīng)這波潮流嘗試一下將產(chǎn)品的部分或全部移植到小程序來總是不吃虧。

最后來個(gè)小廣告，有打算把產(chǎn)品移植到小程序的朋友歡迎來我的公眾號(hào)留言，我將認(rèn)真幫您評(píng)估您的產(chǎn)品是否適合移植，生活社區(qū)團(tuán)購制作，若適合，必打折。^_^

2018-11-23兩年前還籍籍無名的小程序，如今已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)的新風(fēng)口。

最早小程序在微信平臺(tái)上成名，手握 10 億月活用戶的微信，很快成為小程序創(chuàng)業(yè)者的掘金之地。巨頭的嗅覺敏銳，支付寶、百度隨即跟進(jìn)，今日頭條也開始內(nèi)測(cè)小程序，幾大平臺(tái)紛紛出手，讓小程序賽道更加擁擠，小程序生態(tài)多元化的背后，是巨頭新一輪圈地。

而小程序之所以這么火，是因?yàn)槠渥陨淼囊髂Ｊ胶陀Ｊ?，畢竟既?huì)技術(shù)、又知道如何將技術(shù)變現(xiàn)的開發(fā)人員到哪都是香餑餑。本文以四大巨頭都在關(guān)注的小程序電商為例，手把手教你開發(fā)小程序版網(wǎng)上商城。

1. 開發(fā)小程序商城

本文將實(shí)現(xiàn)一款小程序版的網(wǎng)上商城，前端使用 JvaScript 開發(fā)小程序，后端使用 Node.js + Express + MySQL。首先用 SQL 腳本建立 MySQL 數(shù)據(jù)庫，數(shù)據(jù)庫名為 orishop。MySQL 用戶名是 root，密碼是 12345678，也可以使用其他用戶名和密碼。

下面先看一下本項(xiàng)目的主界面，本項(xiàng)目分為客戶端和服務(wù)端實(shí)現(xiàn)，客戶端涉及到輪詢圖、按鈕、圖片列表、產(chǎn)品展示、購物車等。

項(xiàng)目效果展示：

2. 輪序圖設(shè)計(jì)

輪序圖是在 App 首頁上部顯示的，用于展示商品信息，可以以一定時(shí)間自動(dòng)切換商品信息。輪序圖需要使用 swiper 組件，每一個(gè)輪序圖 Item 需要使用 swiper-item 組件，通常每一個(gè) Item 是一個(gè)圖片，可以直接在<swiper-item>中放置一個(gè)<image>標(biāo)簽。輪序圖的布局代碼如下。

3. 控制輪序圖

輪序圖的布局代碼中使用了很多變量來控制輪序圖的顯示，例如，indicatorDots 用來控制是否顯示面板指示點(diǎn)，autoplay 用于控制是否自動(dòng)切換圖像。interval 用于控制切換時(shí)間的間隔，duration 用于控制滑動(dòng)動(dòng)畫時(shí)長。這些變量都需要在 index.js 文件的 data 變量中設(shè)置，代碼如下：

在上面的代碼中 imgUrls 變量沒有設(shè)置值，如果想測(cè)試輪序圖，可以在小程序工程的根目錄創(chuàng)建一個(gè) images 目錄，生鮮社區(qū)團(tuán)購制作，并且在該目錄中放置若干個(gè)圖像文件。為了讓輪序圖水平充滿整個(gè)界面，需要在 index.wxss 文件中添加如下的樣式代碼。

4. 使用 Node.js + Express 連接 MySQL 數(shù)據(jù)庫

由于本項(xiàng)目需要使用服務(wù)端，所以在編寫客戶端的同時(shí)，還要編寫服務(wù)端的程序，這一部分會(huì)使用 Node.js + Express 連接 MySQL 數(shù)據(jù)庫，在連接 MySQL 數(shù)據(jù)庫之前，先要?jiǎng)?chuàng)建相關(guān)的表和視圖。

本項(xiàng)目使用 WebStorm 開發(fā)，創(chuàng)建一個(gè)名為 service 的工程，接下來在 service 工程中創(chuàng)建 my_connect.js 文件，并輸入下面的代碼。

接下來測(cè)試連接數(shù)據(jù)庫的代碼是否正確，在 service 工程的 index.js 文件中添加如下代碼。

由于 Node.js 提供的模塊不支持操作 MySQL 數(shù)據(jù)庫，所以運(yùn)行本例的代碼需要使用下面的命令行安裝 MySQL 模塊。然后在瀏覽器地址欄中輸入 http://localhost:3000，就會(huì)在 WebStorm 的控制臺(tái)看到輸出結(jié)果。

5. 從 MySQL 數(shù)據(jù)庫中獲取要顯示的輪詢圖信息

在這一部分仍然編寫服務(wù)端代碼，在小程序端需要顯示輪詢圖，輪序圖中的數(shù)據(jù)需要從 v_goods 視圖獲取，該視圖可以得到

，銷售的商品信息。接下來在 mysql_connect.js 文件中添加如下代碼。

接下來創(chuàng)建路由腳本文件 hnf.js，并添加下面的代碼：

接下來在 app.js 中使用下面的代碼注冊(cè) hnf 路由。

6. 動(dòng)態(tài)顯示輪詢圖

現(xiàn)在修改小程序端的代碼，在這一部分會(huì)在小程序端通過 wx.request 函數(shù)訪問上一部分創(chuàng)建的路由，并根據(jù)返回?cái)?shù)據(jù)動(dòng)態(tài)顯示輪序圖。在 index.js 文件的 onload() 函數(shù)中添加下面的代碼。

7. 實(shí)現(xiàn)導(dǎo)航按鈕布局

在輪序圖下方是一排導(dǎo)航按鈕，效果如下圖所示：

導(dǎo)航按鈕的布局代碼需要添加到小程序工程的 index.wxml 文件中。接下來在 app.wxss 文件中添加如下的樣式，其他布局也會(huì)用這個(gè)樣式，所以將該樣式添加到全局的 app.wxss 文件中。

在 index.wxss 文件中添加樣式代碼，每一個(gè)按鈕占整個(gè)寬度的 11%。導(dǎo)航按鈕也是動(dòng)態(tài)顯示的，數(shù)據(jù)依賴于 ngationData 變量，可以在 index.js 文件的 data 中添加如下代碼來測(cè)試導(dǎo)航按鈕的布局是否正確，記住，這只是用于測(cè)試的代碼，在后面的布局會(huì)用動(dòng)態(tài)的數(shù)據(jù)替換這些實(shí)驗(yàn)數(shù)據(jù)。

8. 動(dòng)態(tài)顯示導(dǎo)航按鈕

本節(jié)會(huì)在服務(wù)端從數(shù)據(jù)庫中獲取導(dǎo)航按鈕的數(shù)據(jù)，客戶端會(huì)根據(jù)這些數(shù)據(jù)動(dòng)態(tài)顯示導(dǎo)航按鈕。

首先切換回 WebStorm，在mysql_connect.js文件中添加如下的方法，該方法用于獲取商品類型，也就是導(dǎo)航按鈕數(shù)據(jù)。有多少個(gè)商品類型，就顯示多少個(gè)導(dǎo)航按鈕。

在服務(wù)端創(chuàng)建一個(gè) type.js 路由文件，在 app.js 文件中添加代碼注冊(cè)路由。切換到小程序端，在 index.js 文件的 onLoad 方法中添加下面的代碼。

9. 顯示、商品

在小程序首頁下方通過列表顯示了、商品，與輪詢圖顯示的商品類似，此處只是為了演示列表的使用。

10. 顯示商品詳細(xì)信息

本節(jié)顯示了顯示商品詳細(xì)信息的布局，首先在小程序端創(chuàng)建 shopinfo.wxml 布局文件，并輸入下面的代碼。

接下來在 shopinfo.wxss 文件中輸入代碼，最終顯示的效果如下圖所示。

“我不太高興的地方是，我看到廣告，他卻需要我去訂閱他，收到它的消息。這是又很大的不同點(diǎn)?！睆埿↓堈f，“我認(rèn)為一個(gè)廣告牌，它不太應(yīng)該貼一個(gè)用來訂閱的號(hào)。應(yīng)該是可以立即展現(xiàn)他的服務(wù)的鏈接。展現(xiàn)服務(wù)的鏈接就應(yīng)該是類似小程序的形態(tài)。我不是需要收到你的push，而是了解廣告背后的信息?！?/p>

張小龍說：“這樣的一個(gè)使命應(yīng)該是我們小程序?qū)崿F(xiàn)的。我可以掃一下立即就獲得它的信息。就像我們以前登陸網(wǎng)址，只是通過掃二維碼的方式登錄網(wǎng)站。”

張小龍認(rèn)為，我們過去是通過網(wǎng)站搜索服務(wù)，搜索框非常重要；現(xiàn)在，更多的是線下，二維碼都微信的基礎(chǔ)入口。掃一掃也是非?；A(chǔ)的功能，觸達(dá)周邊的最基本的方式。

“通過這樣一種回歸，以及企業(yè)通過什么樣的方式的回顧？來看到小程序，它是很對(duì)應(yīng)于網(wǎng)站。但我們不希望他在手機(jī)上是一個(gè)網(wǎng)站的體驗(yàn)，而且是更好的體驗(yàn)，所以我們定義出小程序出來。”

本質(zhì)上，我們更希望用戶在手機(jī)上的體驗(yàn)比網(wǎng)站好很多很多，比下一個(gè)APP好很多很多。這就是小程序的本身定位所在。

大家最關(guān)心的幾個(gè)問題

接下來，張小龍自問自答了大家可能最關(guān)心的關(guān)于微信小程序的問題。根據(jù)虎嗅現(xiàn)場(chǎng)敲出來的，大概10個(gè)問題，張小龍逐一進(jìn)行了作答。當(dāng)然，基本上都是否定的答案。

個(gè)問題：小程序的入口在哪里？

小程序在微信里是沒有入口的，很多人看到微信開始內(nèi)測(cè)小程序，大家說這是一個(gè)新的機(jī)會(huì)，我們應(yīng)該一波上去，去獲得一些流量上的紅利，但是那就非常遺憾，公眾號(hào)在微信里面其實(shí)也沒有入口，一個(gè)用戶如果沒有訂閱過任何一個(gè)公眾號(hào)，他在微信里面找不到這樣一個(gè)入口，小程序也是一樣的，如果一個(gè)人沒有去運(yùn)行過任何一個(gè)小程序，他在微信里也是找不到小程序的入口。

這跟之前提到的一些產(chǎn)品理念相關(guān)，在微信里我們一直在倡導(dǎo)去中心化的結(jié)構(gòu)，所以你到現(xiàn)在都不可能看到在微信里會(huì)有一個(gè)訂閱號(hào)的入口，里面有一個(gè)分類，有排序或者有推薦這樣的東西存在，這一點(diǎn)從公眾號(hào)的一步就堅(jiān)持是這樣的，這個(gè)對(duì)公眾號(hào)平臺(tái)帶來了很大的好處。

因?yàn)楫?dāng)微信沒有這樣一個(gè)入口的時(shí)候，所有提供公眾號(hào)服務(wù)的企業(yè)他們會(huì)想辦法把自己的二維碼鋪到所能夠鋪的地方去，那就真正實(shí)現(xiàn)了公眾號(hào)的入口其實(shí)不是在微信里面，而是在二維碼里。如果是我們有一個(gè)基礎(chǔ)的入口的話，那大家可能搶奪的都是微信里的入口，如果我們有推薦的話也不是一個(gè)好事情。我們的推薦就會(huì)變得有更多人訂閱。

所以對(duì)于小程序來說，可以想象一下未來的小程序用戶更多是從哪里去啟動(dòng)它？我們更多的是希望小程序的啟動(dòng)來自于掃二維碼。

前不久跟一個(gè)合作伙伴的公司在聊這個(gè)話題，他們希望能夠知道小程序的發(fā)布時(shí)間，好做一些準(zhǔn)備。

他們提出一個(gè)場(chǎng)景我覺得特別的切合，他們說現(xiàn)在其實(shí)沒有電子化，所有人去坐汽車的話必須要去汽車站現(xiàn)場(chǎng)去買一張票，這是一個(gè)很痛苦的過程，你要去排隊(duì)買票，然后再去坐車，他們希望用小程序來解決這個(gè)問題，只需要在每一個(gè)汽車站立一個(gè)二維碼，所有到汽車站的人掃一下二維碼就啟動(dòng)購票的小程序，然后直接通過小程序來買好票，這樣售票窗口就不用存在了，我認(rèn)為這是一個(gè)非常貼合小程序的想法。

這樣的想法會(huì)有很多很多，昨天跟我們小程序這一塊的同事在聊，他們說有人做了一個(gè)小程序特別方便，是在公交站里面等公交站的時(shí)候，想要知道下一班車什么時(shí)候來，這個(gè)時(shí)候只要掃一下公交站的二維碼，小區(qū)社區(qū)團(tuán)購制作，啟動(dòng)公交站的小程序就可以看到下一班車什么時(shí)候來，這也是特別典型的一個(gè)小程序的場(chǎng)景。

所以至少在前期我們會(huì)更多的鼓勵(lì)小程序以二維碼的形式出現(xiàn)在每一個(gè)地方，就像公眾號(hào)的早期一樣。

二個(gè)問題是，會(huì)不會(huì)有一個(gè)類似于小程序商店的地方，可以去下小程序？

其實(shí)是不會(huì)有的，大家可以推理出來，我們沒有下過程，所以不存在一個(gè)應(yīng)用商店去下。

但是大家會(huì)說我想在里面去瀏覽，去找一些小程序，查找是另外一回事，搜索是另外一回事，但是我們并不會(huì)存在一個(gè)小程序的商店，所以我們也并不會(huì)像外界所猜測(cè)的那樣，做一個(gè)APP的分發(fā)想法。

從一開始我們就沒有這個(gè)想法，就像公眾號(hào)從來不會(huì)有一個(gè)公眾號(hào)中心，里面可以分門別類列出所有的東西出來，不會(huì)有這樣的東西，我們認(rèn)為應(yīng)該沒有一個(gè)中心入口，是去中心化的形態(tài)，所以我們也不會(huì)做小程序的分類、排行、推薦。

關(guān)于推薦大家可能會(huì)有一些自己的想法，大家可能會(huì)認(rèn)為為什么不把用戶感興趣的一些東西推薦給他？其實(shí)我們也可以把這個(gè)想法用到公眾號(hào)里，我們不會(huì)做這樣的事情，將來也不會(huì)做這樣的事情。

在微信里我們?cè)?jīng)考慮過對(duì)機(jī)器推薦和一個(gè)人的社交推薦的差異，朋友圈其實(shí)是類似于社交推薦，你每天會(huì)在朋友圈看到很多的文章，你的朋友其實(shí)起到了一個(gè)推薦器的作用，使得你不用依賴系統(tǒng)的推薦。

如果我們系統(tǒng)來做可能沒有你的朋友們做得好，因?yàn)橄到y(tǒng)不會(huì)給你推薦一些你沒有接觸過的東西，系統(tǒng)只會(huì)強(qiáng)化你接觸過的信息，并且不斷地去學(xué)習(xí)你的歷史，往你的歷史方面繼續(xù)推薦，但是你的朋友可能在朋友圈里面說，社區(qū)團(tuán)購制作，某一部電影很好看，那你會(huì)因?yàn)槟愕呐笥讶タ戳诉@部電影而去看這部電影，機(jī)器是無法理解這一點(diǎn)的，機(jī)器只會(huì)采集你過去看過的電影，然后把你看過電影的類型整理出來，認(rèn)為你就喜歡這一類型的電影，但是你朋友推薦的電影可能是你完全沒有接觸過的電影形態(tài)，所以微信里更多是依賴于社交推薦。