2017 年 1 月 9 日，是一個值得載入互聯(lián)網(wǎng)史冊的日子。這一天恤磷，張小龍和他的團(tuán)隊，正式發(fā)布了微信小程序野宜。業(yè)界頓時一片嘩然扫步。作為前端開發(fā)攻城獅我們也有必要了解一下小程序?qū)τ脩簟a(chǎn)品匈子、設(shè)計河胎、運(yùn)營帶來什么影響、文章最后從開發(fā)的角度對小程序的原理與實踐進(jìn)行分析虎敦。
一游岳、從用戶角度看小程序：
1.無須安裝即可使用
2.掃一掃或搜一下就可打開應(yīng)用
3.用完即走
4.不用擔(dān)心安裝太多應(yīng)用 (媽媽再也不用擔(dān)心我的手機(jī)內(nèi)存不夠用了)
5.無處不在，隨時隨地可用其徙。
它滿足用戶的核心訴求：使用應(yīng)用不再必須去應(yīng)用商店下載胚迫、注冊、登錄唾那，省去了一系列操作的麻煩访锻。讓使用應(yīng)用變得簡單方便。
二、從產(chǎn)品角度看小程序：
自從進(jìn)入移動互聯(lián)網(wǎng)時代朗若，市場上出現(xiàn)了海量的app恼五，微信小程序出現(xiàn)后會對移動互聯(lián)網(wǎng)產(chǎn)品產(chǎn)生什么樣的影響呢？我們下面逐一分析探討：
1.微信小程序不可能替代app
微信小程序在定位上類似服務(wù)號中開發(fā)的功能哭懈，可能有所加強(qiáng)灾馒，但是，要想要實現(xiàn)APP的完整功能是不可能的遣总。例如: 人臉識別(目前官方并沒有提供對應(yīng)的api)等功能做不了睬罗。
還有不能做與騰訊沖突的業(yè)務(wù)，例如社交旭斥，否則將會直接被封殺容达。
推廣微信小程序也是難事，微信并不會提供“展位”功能垂券，意思就是用戶想使用這個小程序花盐，前提是知道這個小程序的存在，然后在微信搜索框進(jìn)行搜索菇爪。雖然依托微信這個超級IP,但想讓用戶知道并去使用這個小程序算芯，仍需要自己去推廣。
從某些方面而言凳宙，推廣APP比推廣小程序要好熙揍，避免為微信做了嫁衣。
所以微信小程序替代app是不可能的氏涩。
2.適合輕量級低頻產(chǎn)品
從微信小程序本身的理念來看届囚，其始終秉承著用戶用完即走，不打擾用戶的原則是尖。其原則決定著搭建在微信上的小程序本身就必須是輕量級的意系，并且是滿足用戶低頻需求的。我們都知道用戶的低頻需求一直存在饺汹，但是受限制于用戶活躍度來說昔字，開發(fā)低頻需求的APP總是不那么劃算。同時用戶使用一次低頻需求就要下載一次APP首繁，顯然太麻煩了。因此微信小程序?qū)τ诘皖l需求的產(chǎn)品來說是一個機(jī)會陨囊，但是需要注意的是微信小程序可以集合市面上的低頻需求弦疮，這樣用戶體驗會更好。
既然微信小程序適合低頻需求產(chǎn)品蜘醋，那么是不是高頻諸如購物胁塞、資訊類產(chǎn)品就不能做小程序了?回答顯然是不對的。建議對于一些高頻需求的產(chǎn)品可以分離出來一些關(guān)鍵需求嫁接在微信小程序上。
比如對于購物來說京東就做的非常不錯啸罢，京東微信小程序并沒有繁雜的商品列表頁编检，只保留了“搜索商品”“我的訂單”兩個tab菜單，剩下的就是優(yōu)惠券展示頁扰才，沒有什么復(fù)雜的內(nèi)容在上面允懂。
3.總結(jié)
- 由于微信小程序開發(fā)成本低，如果是做創(chuàng)業(yè)產(chǎn)品可以先做微信小程序版衩匣，待壯大了再做app版蕾总，省錢省時間。未來輕量低頻的應(yīng)用會大量出現(xiàn)在小程序上琅捏，輕量低頻app會相對減少生百。
- 如果您目前已經(jīng)有一款用戶已經(jīng)在高頻使用的app，不妨像京東那樣把關(guān)鍵的業(yè)務(wù)流抽離出來嫁接到微信小程序上柄延，微信畢竟擁有龐大的用戶量蚀浆，說不定某天微信用戶會在小程序搜索框里輸入您app的關(guān)鍵字。
三搜吧、從設(shè)計角度看小程序：
小程序要求界面重點(diǎn)突出市俊、流程明確，并給出一系列具體的視覺規(guī)范赎败，精確到行距秕衙，邊距等。原來app設(shè)計稿跟微信小程序視覺規(guī)范有差異的小伙伴僵刮，別指望原封不動挪過去用了据忘。
四、從運(yùn)營角度看小程序：
因為微信本身的克制搞糕，讓微信小程序只能使用微信本身的賬號體系勇吊、不能分享轉(zhuǎn)發(fā)到朋友圈、不能模糊搜索窍仰、入口極其有限等等汉规。
產(chǎn)品運(yùn)營的小伙伴是不是面對此就沒招啦，其實不然驹吮。比如微信小程序的主要入口是二維碼针史。二維碼最好的使用途徑就是線下的實體店，這樣對于滿足一些O2O行業(yè)的核心用戶需求還是很不錯的碟狞。同時微信小程序還可以置頂?shù)轿⑿帕奶斓牧斜碇凶恼恚@就要求運(yùn)營者更加的創(chuàng)新性的引導(dǎo)用戶操作這一步，同樣道理的還有把小程序添加到手機(jī)桌面等等族沃。因為其分享渠道限于微信聊天和社群频祝，那么小程序的口碑營銷和社區(qū)營銷可能又會引來新的一春泌参。
五、小程序原理與開發(fā)實踐：
1. 開發(fā)工具
微信提供了小程序開發(fā)工具集成了開發(fā)調(diào)試常空、代碼編輯及程序發(fā)布等功能沽一。調(diào)試功能與谷歌瀏覽器調(diào)試是一樣的，官方也說明了該開發(fā)工具是基于谷歌瀏覽器內(nèi)核開發(fā)的漓糙。
項目配置中包含代碼補(bǔ)全铣缠、壓縮等功能，簡直是保姆式開發(fā)...
2. 框架——MINA 基本原理
MINA(MINA IS NOT APP)就是微信小程序開發(fā)使用的框架兼蜈。
MINA的核心是一個響應(yīng)的數(shù)據(jù)綁定系統(tǒng)攘残。
整個系統(tǒng)分為兩塊：視圖層(View) 和 邏輯層(App Service)。
MINA可以讓數(shù)據(jù)與視圖保持同步非常簡單为狸。
當(dāng)做數(shù)據(jù)修改的時候歼郭，只需要在邏輯層修改數(shù)據(jù)，視圖層就會做相應(yīng)的更新辐棒。
<pre>
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// 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)行了綁定病曾，所以在頁面一打開的時候會顯示Hello WeChat!
當(dāng)點(diǎn)擊按鈕的時候，視圖層會發(fā)送changeName的事件給邏輯層漾根，邏輯層找到對應(yīng)的事件處理函數(shù)邏輯層執(zhí)行了setData的操作泰涂，將name從weChat變?yōu)?strong>MINA，因為該數(shù)據(jù)和視圖層已經(jīng)綁定了辐怕，從而視圖層會自動響應(yīng)改變?yōu)?strong>Hello MINA! 逼蒙。
簡單來說，視圖層中綁定了name寄疏，在邏輯層中只需要對綁定的name操作就行了是牢，而無需再獲取"DOM對象",因為這部分關(guān)聯(lián)工作MINA 已經(jīng)做好了。
3. 頁面管理
MINA管理了整個小程序的頁面路由陕截，可以做到頁面間的無縫切換驳棱，并給以頁面完整的生命周期。開發(fā)者需要做的只是將頁面的數(shù)據(jù)农曲，方法，生命周期函數(shù)注冊進(jìn)MINA中乳规，其他的一切復(fù)雜的操作都交由MINA處理形葬。
開發(fā)者使用app.json文件對微信小程序進(jìn)行全局配置暮的，決定頁面文件的路徑、窗口表現(xiàn)青扔、設(shè)置網(wǎng)絡(luò)超時時間源织、多tab等
各個頁面的.json文件來對本頁面的窗口表現(xiàn)進(jìn)行置。 也就是只需要配置app.json中的window配置項的內(nèi)容微猖，頁面中配置項會覆蓋app.json的window中相同的配置項谈息。
<pre><code>
"pages":[
"pages/index/index/index",
"pages/index/openCardNav/openCardNav"
]
</code></pre>
pages接受一個字符串?dāng)?shù)組，來指定小程序由哪些頁面組成凛剥。每一項代表對應(yīng)頁面的【路徑+文件名】信息侠仇，數(shù)組的第一項代表小程序的初始頁面。小程序中新增/減少頁面犁珠，都需要對pages數(shù)組進(jìn)行修改逻炊。文件名不需要寫文件后綴，因為MINA會自動去尋找路徑.json,.js,.wxml,.wxss的四個文件進(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個物理像素，則750rpx = 375px = 750物理像素敢茁，1rpx = 0.5px = 1物理像素佑淀。所以可以根據(jù)750的設(shè)計稿來開發(fā)。
定義在 app.wxss 中的樣式為全局樣式
wxss文件中可以@import 其它自定義wxss文件
內(nèi)聯(lián)樣式
<code><view style="color:{{color}};" /></code>
6. API
MINA提供豐富的微信原生API彰檬，調(diào)用微信功能十分方便（自個兒家產(chǎn)的當(dāng)然用著方便）伸刃，如獲取用戶信息，本地存儲僧叉，支付功能等奕枝。
7. 開發(fā)中遇到的問題
- wxss不支持在背景圖片background: url();
- mac環(huán)境下開發(fā)工具不太穩(wěn)定
您的意見是我改善的東西，歡迎評論提建議瓶堕，如果對您有幫助隘道，請點(diǎn)個贊，謝謝~~
菲麥前端專題郎笆，匯聚前端好文谭梗，邀您關(guān)注！
