末日之杀神重生,女主叫云初初

微信小程序10000字實(shí)操指南（上篇）

16 . Jan . 2017

分享到：

Q：為什么說小程序如炮友？

A：小程序剛發(fā)布不久就流行一個(gè)段子：APP 如原配，一年不用幾次；服務(wù)號如情人，一個(gè)月固定幾次；訂閱號如酒店小卡片，天天可以賣廣告；小程序像炮友，用完就走。

資本如嫖客，各個(gè)平臺和垂直類掠奪者已經(jīng)瓜分掉了線上流量，那么未來爭奪的流量戰(zhàn)場必然在實(shí)體場景，很多巨頭其實(shí)已經(jīng)證明了線下流量龐大的潛力。在快遞包裹上印上自己的二維碼關(guān)注公眾號形成二次寄出快遞的粘性，Pokemon Go 讓用戶在實(shí)體地圖上捕獲小精靈。

未來的入口不限于二維碼，而是一切的富媒體。二維碼之于2D識別，復(fù)雜圖案之于 AR，語音指令之于 Siri，會(huì)發(fā)射信號的一個(gè)芯片；使用這些入口的不限于人類，對這些入口的識別，除了人掃二維碼，還有無人駕駛汽車識別路標(biāo)，尋找實(shí)體商店坐標(biāo)；智能助手根據(jù)主人偏好自動(dòng)在電商平臺尋找合適的商品并且下單。

一句話來說，未來的流量來自線下，流量的入口來自多媒體，整個(gè)戰(zhàn)場會(huì)從移動(dòng)互聯(lián)網(wǎng)到“實(shí)體互聯(lián)網(wǎng)”轉(zhuǎn)變，作為后續(xù)的“物聯(lián)網(wǎng)”全民化的過渡。

那么小程序之于微信，就是利用二維碼這種富媒體（圖像），把線下商家的流量聚攏到微信。另外，從微信的服務(wù)類目看，這將是騰訊向成為互聯(lián)網(wǎng)水和電的目標(biāo)的又一大步，下文會(huì)進(jìn)一步分析。

1. 企業(yè)注冊流程

2. 小程序到底是什么

3. 小程序的入口

4. 小程序應(yīng)用場景

5. 該不該做小程序（<重后端，輕前端> 的思想、小程序和H5 的區(qū)別、紅利期、小程序類目）

6. 一些要點(diǎn)

7. 小程序的能力（自帶組件、事件、硬件能力、微信能力）

一、企業(yè)注冊流程

二、小程序是到底是什么

小程序?qū)懙臅r(shí)候用的是 javascript 這種網(wǎng)頁開發(fā)語言，首次運(yùn)行會(huì)把這個(gè)“網(wǎng)頁”緩存到本地，所以不是不用下載，而是下載的包比較小而已。然后通過 Android 或 iOS 各自的 JSBridge 方法轉(zhuǎn)換成對應(yīng)的 Java 或 Objective-C 方法運(yùn)行。

比如我在小程序?qū)懥艘粋€(gè)方法：

程序就會(huì)識別出wx.showToast及其參數(shù)（文字、圖標(biāo)、持續(xù)事件），然后執(zhí)行本地的一個(gè)方法：

彈出一個(gè)原聲的 Toast 組件，上說只是為了方便說明，實(shí)際運(yùn)行環(huán)境會(huì)復(fù)雜的多。

上圖左邊是大家在微信公開課 Pro 會(huì)場上看到的企微云平臺的快銷上報(bào)小程序，看上去真的很像一個(gè)獨(dú)立 App，雖然我看不到他的源代碼，但是我試著還原其中一個(gè)頁面來舉例子。

一個(gè)頁面都是一個(gè)獨(dú)立的文件夾（微信開發(fā)者工具會(huì)自動(dòng)為你創(chuàng)建），每新增一個(gè)頁面需要在 app.json 文件的 pages 列表新增一項(xiàng)。

一般來說，src 目錄建議用來放置固定的一些企業(yè)介紹視頻或者宣傳圖片等等（整體的包大小不能超過1M）。

如果你不放在這個(gè)目錄，也可以放在你自己的服務(wù)器，遠(yuǎn)程訪問。比如一些經(jīng)常變化的活動(dòng)宣傳 banner。

app.json 是可以配置整個(gè)程序的底部導(dǎo)航 tab、導(dǎo)航欄的背景顏色（貌似不能弄成圖片，如果希望做成京東 app 超級品牌日那種全屏氛圍渲染，建議banner 圖片上半部分使用漸變色過渡到你配置的狀態(tài)欄背景顏色）、導(dǎo)航欄標(biāo)題、導(dǎo)航欄顏色、是否支持下拉刷新等。

app.js 是全局的一些方法，比如獲取用戶信息，全局?jǐn)?shù)據(jù)的配置地方。

js 會(huì)部分轉(zhuǎn)成原生的 java 和 oc 代碼執(zhí)行，那么頁面呢？用的是操作系統(tǒng)原生的組件嗎？帶著這個(gè)疑問用 UI 測試工具打開了微信：

你們看到有一個(gè) YYWKWebview 的東西了嗎？WKWebview是原生的一個(gè)瀏覽器控件，相當(dāng)于只是用小程序打開了一個(gè)下載好的本地網(wǎng)頁。而且用了類似 weex/vue 那樣子的技術(shù)，所以頁面切換非常流程。（可以自行百度一下阿里weex）

上面看到每個(gè)頁面都是一個(gè)文件夾，那么里面的四個(gè)文件都是干什么的呢？

.json 是配置文件。就好比是你的簡歷，上面寫了名字、畢業(yè)時(shí)間等，而小程序的 json會(huì)記錄一些信息：導(dǎo)航欄背景顏色、導(dǎo)航欄標(biāo)題顏色、導(dǎo)航欄標(biāo)題文字內(nèi)容、窗口的背景色、下拉背景字體、loading 圖的樣式、是否開啟下拉刷新、頁面整體能不能上下滾動(dòng)。

.wxml 是頁面的基本骨架。就像骨架規(guī)定了人的大概模樣一般，wxml 是一種類 xml 的結(jié)構(gòu)化文本，描述了小程序頁面有哪些元素。比如一個(gè)文章需要有標(biāo)題、作者、時(shí)間、正文，但是不關(guān)心這些元素怎么排列。

.js 也就是 javascript 這種前端腳本語言的文件。要人的四肢東西來，怎么動(dòng)，就需要大腦和肌肉控制，小程序從“骨架”成為“血肉之軀”的正是 js 的作用。js 做一些動(dòng)態(tài)的東西，比如請求數(shù)據(jù)，控制元素上下移動(dòng)，判斷用戶輸入密碼是否安全等等。

.wxss 就是決定整個(gè)頁面元素的顏色等表現(xiàn)形式。好比同一個(gè)人可以穿不同的衣服，化不同的妝，看上去也就不一樣了。在 wxml 文件中同樣寫了一個(gè)按鈕，但可以給他配置不同的背景顏色：

三、小程序的入口

線下實(shí)體（商鋪、停車場、政府服務(wù)窗口等）

比如這個(gè)微信公開課給出的場景例子，我來 YY一下。

在停車場的入口，有一個(gè)攝像頭對著你的車牌號碼，當(dāng)你掃碼打開小程序時(shí)，點(diǎn)擊開始停車，如果有空余車位，系統(tǒng)會(huì)自動(dòng)打開閘門并記錄開始停車的時(shí)間。這時(shí)候小程序會(huì)展示室內(nèi)地圖，引導(dǎo)你先左轉(zhuǎn)再右轉(zhuǎn)到達(dá)目標(biāo)車位，停好車走人。等你來取車的時(shí)候，開車到閘門口，再次掃描二維碼或直接從歷史記錄打開小程序，選擇結(jié)束停車，調(diào)起微信支付，停車場攝像頭識別車牌號碼，打開閘門放行。

整個(gè)過程無需取停車卡和專職工作人員服務(wù)，環(huán)保也節(jié)省人力成本。

線上PC導(dǎo)航站：

移動(dòng)導(dǎo)航站：

微信群分享：

性冷淡風(fēng)格（從程序介紹頁分享出來）：

欲罷不能的風(fēng)格（從程序內(nèi)頁分享出來）：

關(guān)鍵詞精準(zhǔn)搜索：

發(fā)現(xiàn)入口：

聊天列表頂部：

四、小程序應(yīng)用場景

應(yīng)用場景主要分為微信群協(xié)作和實(shí)體服務(wù)。

微信群協(xié)作

微信群協(xié)作主要是一些企業(yè)內(nèi)部服務(wù)的或者工作上的溝通。

問卷投票：公司要開展年會(huì)了，做那個(gè)活動(dòng)好呢？通過小程序發(fā)布的投票并且分享到群里，可以實(shí)時(shí)看到前三名。

會(huì)議助手：臨時(shí)召開緊急會(huì)議，需要相關(guān)人盡快確定參會(huì)情況，往群里拋一個(gè)開會(huì)通知小程序，特定的人才能打開了解會(huì)議內(nèi)容并確認(rèn)，誰參加誰請假，參與人數(shù)多少一目了然。活動(dòng)時(shí)間點(diǎn)到了，還可通過小程序的消息服務(wù)能力給參會(huì)人發(fā)送參會(huì)提醒；到了參會(huì)現(xiàn)場打開小程序就能簽到，真正意義上的需要用時(shí)就用，用完就走。

雖然很多辦公場景用企微的微信企業(yè)號組件也可以做到，但是并不是每個(gè)企業(yè)都有一個(gè)企業(yè)號，對于普通小公司小團(tuán)隊(duì)來說，這些能力還是做到小程序上快捷方便。

實(shí)體服務(wù)

睡覺前，掃描一下床頭的二維碼貼，打開“Jinkey 外賣”，下單叫了一個(gè)早餐外賣，然后掃描一下“JJ 智能家居”小程序二維碼，檢測到現(xiàn)在是晚上，自動(dòng)關(guān)燈。跟 siri （iOS 智能語音助手）說一句，“晚安，明天7點(diǎn)叫我起床哦”，然后美美地睡上一覺。

第二天，siri 把我叫了起床，等了一會(huì)，早餐也送到了，吃完，打開微信聊天窗口的小程序服務(wù)通知，點(diǎn)開早餐外賣支付成功的模板消息，進(jìn)入“Jinkey 外賣”的小程序頁給了個(gè)差評（要收錢的還不給差評？！哈哈哈）。吃完早餐就出門。

昨天車放在公司了，那今天就騎車吧，在樓下找到肉色的自行車，打開摸拜單車的小程序，掃一掃完成了開鎖，騎上去，愉快地回到公司。

來到公司打開，簽到小程序，掃一下公司前臺動(dòng)態(tài)變化的二維碼，同時(shí)小程序識別出我的地理位置，打卡成功！回到座位上開始奮斗的一天。

中午吃飯，同事都說餓了吧外賣有優(yōu)惠。那趕緊打開餓了吧小程序，黃燜雞30元免運(yùn)費(fèi)，于是我發(fā)起了一個(gè)組團(tuán)買，然后把這個(gè)頁面分享到公司群，小伙伴們點(diǎn)進(jìn)去頁面選擇自己要的套餐，各自支付完成后，分別都收到了一條“付款成功，正在配送”的模板消息。

然后小程序上還可以實(shí)時(shí)看到外賣小哥去到哪里了，超級貼心的。

中午睡覺，插上耳機(jī)，打開小睡眠小程序聽著舒適的背景音樂。

下班的時(shí)候可以開車咯，到地下車庫取車，開車到閘門口，再次掃描二維碼或直接從歷史記錄打開小程序，選擇結(jié)束停車，調(diào)起微信支付，停車場攝像頭識別車牌號碼，打開閘門放行。到地面接了幾個(gè)同事一起到億達(dá)廣場找吃的，附近沒有停車場就隨便找了一個(gè)空地停車。下車之后看到一個(gè)碩大的廣告牌：

探鳥搞特價(jià)耶，趕緊掃碼打開探鳥的小程序二維碼，點(diǎn)擊排隊(duì)按鈕，提示前面還有5個(gè)人，不錯(cuò)很快到了，等到還有 2 個(gè)人的時(shí)候，小程序提示我可以點(diǎn)餐下單了，那我們 5 個(gè)人就點(diǎn)兩只雞吧，應(yīng)該夠飽了。

因?yàn)楹攘它c(diǎn)酒，喝酒不開車，吃飽之后，打開杜杜出行叫代駕。