2017 年 1 月 9 日，是一個(gè)值得載入互聯(lián)網(wǎng)史冊的日子。這一天，張小龍和他的團(tuán)隊(duì)，正式發(fā)布了微信小程序。業(yè)界頓時(shí)一片嘩然。作為前端開發(fā)攻城獅我們也有必要了解一下小程序?qū)τ脩?、產(chǎn)品、設(shè)計(jì)、運(yùn)營帶來什么影響、文章最后從開發(fā)的角度對小程序的原理與實(shí)踐進(jìn)行分析。

一、從用戶角度看小程序：

景點(diǎn)門票小程序的二維碼

1.無須安裝即可使用
2.掃一掃或搜一下就可打開應(yīng)用
3.用完即走
4.不用擔(dān)心安裝太多應(yīng)用 (媽媽再也不用擔(dān)心我的手機(jī)內(nèi)存不夠用了)
5.無處不在，隨時(shí)隨地可用。

它滿足用戶的核心訴求：使用應(yīng)用不再必須去應(yīng)用商店下載、注冊、登錄，省去了一系列操作的麻煩。讓使用應(yīng)用變得簡單方便。

二、從產(chǎn)品角度看小程序：

自從進(jìn)入移動(dòng)互聯(lián)網(wǎng)時(shí)代，市場上出現(xiàn)了海量的app，微信小程序出現(xiàn)后會(huì)對移動(dòng)互聯(lián)網(wǎng)產(chǎn)品產(chǎn)生什么樣的影響呢？我們下面逐一分析探討：

1.微信小程序不可能替代app

微信小程序在定位上類似服務(wù)號(hào)中開發(fā)的功能，可能有所加強(qiáng)，但是，要想要實(shí)現(xiàn)APP的完整功能是不可能的。例如: 人臉識(shí)別(目前官方并沒有提供對應(yīng)的api)等功能做不了。

還有不能做與騰訊沖突的業(yè)務(wù)，例如社交，否則將會(huì)直接被封殺。

推廣微信小程序也是難事，微信并不會(huì)提供“展位”功能，意思就是用戶想使用這個(gè)小程序，前提是知道這個(gè)小程序的存在，然后在微信搜索框進(jìn)行搜索。雖然依托微信這個(gè)超級(jí)IP,但想讓用戶知道并去使用這個(gè)小程序，仍需要自己去推廣。

從某些方面而言，推廣APP比推廣小程序要好，避免為微信做了嫁衣。

所以微信小程序替代app是不可能的。

2.適合輕量級(jí)低頻產(chǎn)品

從微信小程序本身的理念來看，其始終秉承著用戶用完即走，不打擾用戶的原則。其原則決定著搭建在微信上的小程序本身就必須是輕量級(jí)的，并且是滿足用戶低頻需求的。我們都知道用戶的低頻需求一直存在，但是受限制于用戶活躍度來說，開發(fā)低頻需求的APP總是不那么劃算。同時(shí)用戶使用一次低頻需求就要下載一次APP，顯然太麻煩了。因此微信小程序?qū)τ诘皖l需求的產(chǎn)品來說是一個(gè)機(jī)會(huì)，但是需要注意的是微信小程序可以集合市面上的低頻需求，這樣用戶體驗(yàn)會(huì)更好。

既然微信小程序適合低頻需求產(chǎn)品，那么是不是高頻諸如購物、資訊類產(chǎn)品就不能做小程序了?回答顯然是不對的。建議對于一些高頻需求的產(chǎn)品可以分離出來一些關(guān)鍵需求嫁接在微信小程序上。

比如對于購物來說京東就做的非常不錯(cuò)，京東微信小程序并沒有繁雜的商品列表頁，只保留了“搜索商品”“我的訂單”兩個(gè)tab菜單，剩下的就是優(yōu)惠券展示頁，沒有什么復(fù)雜的內(nèi)容在上面。

3.總結(jié)

1. 由于微信小程序開發(fā)成本低，如果是做創(chuàng)業(yè)產(chǎn)品可以先做微信小程序版，待壯大了再做app版，省錢省時(shí)間。未來輕量低頻的應(yīng)用會(huì)大量出現(xiàn)在小程序上，輕量低頻app會(huì)相對減少。
2. 如果您目前已經(jīng)有一款用戶已經(jīng)在高頻使用的app，不妨像京東那樣把關(guān)鍵的業(yè)務(wù)流抽離出來嫁接到微信小程序上，微信畢竟擁有龐大的用戶量，說不定某天微信用戶會(huì)在小程序搜索框里輸入您app的關(guān)鍵字。

三、從設(shè)計(jì)角度看小程序：

小程序要求界面重點(diǎn)突出、流程明確，并給出一系列具體的視覺規(guī)范，精確到行距，邊距等。原來app設(shè)計(jì)稿跟微信小程序視覺規(guī)范有差異的小伙伴，別指望原封不動(dòng)挪過去用了。

四、從運(yùn)營角度看小程序：

因?yàn)槲⑿疟旧淼目酥?，讓微信小程序只能使用微信本身的賬號(hào)體系、不能分享轉(zhuǎn)發(fā)到朋友圈、不能模糊搜索、入口極其有限等等。

產(chǎn)品運(yùn)營的小伙伴是不是面對此就沒招啦，其實(shí)不然。比如微信小程序的主要入口是二維碼。二維碼最好的使用途徑就是線下的實(shí)體店，這樣對于滿足一些O2O行業(yè)的核心用戶需求還是很不錯(cuò)的。同時(shí)微信小程序還可以置頂?shù)轿⑿帕奶斓牧斜碇校@就要求運(yùn)營者更加的創(chuàng)新性的引導(dǎo)用戶操作這一步，同樣道理的還有把小程序添加到手機(jī)桌面等等。因?yàn)槠浞窒砬老抻谖⑿帕奶旌蜕缛?，那么小程序的口碑營銷和社區(qū)營銷可能又會(huì)引來新的一春。

五、小程序原理與開發(fā)實(shí)踐：

1. 開發(fā)工具

微信提供了小程序開發(fā)工具集成了開發(fā)調(diào)試、代碼編輯及程序發(fā)布等功能。調(diào)試功能與谷歌瀏覽器調(diào)試是一樣的，官方也說明了該開發(fā)工具是基于谷歌瀏覽器內(nèi)核開發(fā)的。

小程序開發(fā)工具

小程序項(xiàng)目配置

項(xiàng)目配置中包含代碼補(bǔ)全、壓縮等功能，簡直是保姆式開發(fā)...

2. 框架——MINA 基本原理

MINA(MINA IS NOT APP)就是微信小程序開發(fā)使用的框架。

// App Service
// 初始數(shù)據(jù)創(chuàng)建
var helloData = {
name: 'WeChat'
}
// 注冊頁面.
Page({
data: helloData,
changeName: function(e) {
this.setData({
name: 'MINA'
})
}
})
<code></pre></code>

開發(fā)者通過MINA將邏輯層數(shù)據(jù)中的name與視圖層的name進(jìn)行了綁定，所以在頁面一打開的時(shí)候會(huì)顯示Hello WeChat!
當(dāng)點(diǎn)擊按鈕的時(shí)候，視圖層會(huì)發(fā)送changeName的事件給邏輯層，邏輯層找到對應(yīng)的事件處理函數(shù)邏輯層執(zhí)行了setData的操作，將name從weChat變?yōu)?strong>MINA，因?yàn)樵摂?shù)據(jù)和視圖層已經(jīng)綁定了，從而視圖層會(huì)自動(dòng)響應(yīng)改變?yōu)?strong>Hello MINA! 。
簡單來說，視圖層中綁定了name，在邏輯層中只需要對綁定的name操作就行了，而無需再獲取"DOM對象",因?yàn)檫@部分關(guān)聯(lián)工作MINA 已經(jīng)做好了。

3. 頁面管理

MINA管理了整個(gè)小程序的頁面路由，可以做到頁面間的無縫切換，并給以頁面完整的生命周期。開發(fā)者需要做的只是將頁面的數(shù)據(jù)，方法，生命周期函數(shù)注冊進(jìn)MINA中，其他的一切復(fù)雜的操作都交由MINA處理。

開發(fā)者使用app.json文件對微信小程序進(jìn)行全局配置，決定頁面文件的路徑、窗口表現(xiàn)、設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間、多tab等

各個(gè)頁面的.json文件來對本頁面的窗口表現(xiàn)進(jìn)行置。 也就是只需要配置app.json中的window配置項(xiàng)的內(nèi)容，頁面中配置項(xiàng)會(huì)覆蓋app.json的window中相同的配置項(xiàng)。
<pre><code>
"pages":[

  "pages/index/index/index",

  "pages/index/openCardNav/openCardNav"

]
</code></pre>
pages接受一個(gè)字符串?dāng)?shù)組，來指定小程序由哪些頁面組成。每一項(xiàng)代表對應(yīng)頁面的【路徑+文件名】信息，數(shù)組的第一項(xiàng)代表小程序的初始頁面。小程序中新增/減少頁面，都需要對pages數(shù)組進(jìn)行修改。文件名不需要寫文件后綴，因?yàn)镸INA會(huì)自動(dòng)去尋找路徑.json,.js,.wxml,.wxss的四個(gè)文件進(jìn)行整合。

頁面生命周期：

頁面生命周期

4. 基礎(chǔ)組件

MINA提供了一套基礎(chǔ)的(具有微信風(fēng)格和微信邏輯的)組件，開發(fā)者通過組合各種基礎(chǔ)組件，創(chuàng)建自己的微信小程序。

<view>組件相當(dāng)于h5里面的<div>

小程序組件

5. WXSS

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個(gè)物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。所以可以根據(jù)750的設(shè)計(jì)稿來開發(fā)。

定義在 app.wxss 中的樣式為全局樣式

wxss文件中可以@import 其它自定義wxss文件

內(nèi)聯(lián)樣式
<code><view style="color:{{color}};" /></code>

6. API

MINA提供豐富的微信原生API，調(diào)用微信功能十分方便（自個(gè)兒家產(chǎn)的當(dāng)然用著方便），如獲取用戶信息，本地存儲(chǔ)，支付功能等。

小程序api

7. 開發(fā)中遇到的問題

1. wxss不支持在背景圖片background: url();
2. mac環(huán)境下開發(fā)工具不太穩(wěn)定

您的意見是我改善的東西，歡迎評論提建議，如果對您有幫助，請點(diǎn)個(gè)贊，謝謝~~
菲麥前端專題，匯聚前端好文，邀您關(guān)注！