這兩(liang) 天閑來無事，也安裝了 “微信折疊”的開發工具來玩一下。以下是一些小道消息及使用體(ti) 驗，過兩(liang) 天我會(hui) 寫(xie) 一篇文章以開發者的角度來詳細評價(jia) 微信小程序:

• 微信小程序不能開發遊戲類、直播類功能，小程序每個人關注的上限是20個（還不確定，不過我相信這是真的，這次公布的API裏並沒有視頻組件。微信太大，蘋果要有所顧忌，但是微信也要做出相應的讓步)

• 微信目前有沒有同蘋果商談好，還是個(ge) 未知數，畢竟會(hui) 對AppStore有一定的衝(chong) 擊。

• 拋棄了大量的javascript組件後，這個(ge) 生態體(ti) 係變得相當的封閉，微信解釋肯定是：為(wei) 了更好的性能提升。那麽(me) 我們(men) 拭目以待。

• 小程序的入口是微信裏的三級菜單，就是在“Tab欄發現裏的遊戲下麵加入一個(ge) “小程序”。反正，這一欄裏的購物和遊戲我是從(cong) 來沒點進去過的。

• 以騰訊的尿性，小程序同服務號一樣，其關(guan) 係鏈及重要功能的開放程度會(hui) 因“人”而異。對，優(you) 質的接口隻會(hui) 開放給騰訊的兒(er) 子們(men) （滴滴呀、京東(dong) 呀）

• 微信從(cong) 來就是一眼不合就封殺，優(you) 步就是很好的案例。官方解釋是優(you) 步涉嫌誘導，滴滴同樣被禁過。利益麵前還講道理？反正我是不信的。騰訊的投資覆蓋各個(ge) 行業(ye) ，一旦騰訊掌握了應用分發入口，給兒(er) 子們(men) 一些小小的甜頭，應該不是什麽(me) 大事兒(er) 吧。有人說AppStore也有很多限製，但至少蘋果並沒有像騰訊這樣大量的投資消費級App，直接產(chan) 生利益衝(chong) 突的點並不多。話說回來，這點創業(ye) 者是不用考慮的，暫時，你的產(chan) 品和創意，在微信眼裏還是個(ge) 螻蟻。。。你不用擔心受到不公正的對待。如果真有一天你被微信封殺了，隻要不是因為(wei) 違規內(nei) 容，那麽(me) 你應該高興(xing) ，然後迅速炒作一波…….

• 很多做Web的朋友嚐試在小程序裏寫(xie) div、ul等標簽，別試了，沒效果，包括JQUERY在內(nei) 的DOM操作庫，小程序內(nei) 是不能運行的。小程序本質是JS+ReactNative，對RN底層做了重構，已經和dom說拜拜了。

下麵是詳細的安裝步驟。win10下測試通過

以下是安裝步驟：

1. 按操作係統下載相應開發工具版本

    windows 64位

    windows 32位

    mac

    小程序示例組件demo下載

2. 雙擊安裝

3. 打開微信web開發者工具

4. 添加一個(ge) 項目，如圖

   

5. 填寫(xie) 項目信息 注意AppId這裏選擇“無AppId”,AppID隻有內(nei) 測用戶才有，無AppId在目前有功能限製，比如不能發布項目到手機微信中預覽。

   

6. 點擊“添加項目”按鈕後，將創建一個(ge) 小程序項目, 工具已經為(wei) 你創建了一個(ge) demo —– Hello World

   

開發者工具功能區域介紹

工具左側(ce) 分別有編輯、調試、項目調試區按鈕，分別解釋3個(ge) 區域的作用.。

編輯： 是你寫(xie) 代碼的地方，左側(ce) 的文件目錄是微信為(wei) 你創建的一個(ge) 項目基礎骨架，你可以在這個(ge) 骨架上編寫(xie) 自己的業(ye) 務代碼。當我們(men) 編寫(xie) 完代碼後，點擊編輯視圖左下角的“編譯”即可進行調試和運行（當點擊“編譯後”，工具視圖會(hui) 自動跳轉到第二個(ge) “調試”視圖）

調試: 是你調試代碼的地方。整個(ge) 界麵同Chrome的調試工具一模一樣（應該是內(nei) 嵌了WebKit內(nei) 核），相信有Web開發經驗的同學很快就能上手。F8 運行到下一個(ge) 斷點、F10 單步運行、Ctrl+/ 注釋代碼。

解釋一下“調試”視圖下，頂部的六個(ge) Tab欄（Console、Sources、Network、Storage、AppData、Wxml）：

Console： 工具的輸出區域，在程序中調用 console.log(‘測試一下console’), 可在這裏輸出自定義(yi) 調試信息。同時，這裏也是工具遇到異常和發出警告的信息輸出區域。見圖：

Sources: 源代碼顯示區域，這裏你可以打斷點並調試代碼。Sources Pannel 用於(yu) 顯示當前項目的腳本文件，同瀏覽器開發不同，微信小程序框架會(hui) 對腳本文件進行編譯的工作，所以在 Sources Pannel 中開發者看到的文件是經過處理之後的腳本文件，同編輯區域的代碼有稍許的差異，比如開發者的代碼都會(hui) 被包裹在 define 函數中，並且對於(yu) Page 代碼，在尾部會(hui) 有 require 的主動調用。

Network: 用於(yu) 觀察和顯示 網絡的request 和 socket 的請求情況

Storage: 如果你在程序中使用了 wx.setStorage 或者 wx.setStorageSync 後，在這裏將會(hui) 顯示你的數據存儲(chu) 情況。是的，小程序支持本地緩存數據。

AppData: 用於(yu) 顯示當前項目當前時刻 appdata 具體(ti) 數據。可以在這裏管理應用程序中的各類變量（不同於(yu) Storage中的緩存變量，隻有調用wx.setStorage 或者 wx.setStorageSync 的數據才會(hui) 出現在Storage中）。在這，你可以隨時修改變量，工具將把變量改變在左側(ce) 預覽視圖中實時顯示。我們(men) 可以看到，AppData 以頁麵（pages/index/index）作為(wei) 分組單位，每個(ge) 頁麵隻會(hui) 顯示自己的AppData，非常的清晰。

Wxml：將Wxml標簽同預覽界麵實時關(guan) 聯，在這裏可以看到真實的頁麵結構以及結構對應的 wxss 屬性，同時可以通過修改對應 wxss 屬性，在模擬器中實時看到修改的情況。通過調試模塊左上角的選擇器，還可以快速找到頁麵中組件對應的 wxml 代碼。

最後說下“項目”這個(ge) 功能區塊兒(er) ， 項目實際上是用來上傳(chuan) 和預覽項目的。微信要求所有發布的小程序都必須審核，所以需要在這裏將小程序上傳(chuan) （應該是類似於(yu) AppStore，但肯定不是AppStore的發布模式，蘋果應該不會(hui) 允許。小程序目前同用戶的接觸方式還是未知數，而這恰恰是最重要的一塊兒(er) ）。如果你沒有被內(nei) 測邀請，這裏你是不可以上傳(chuan) 和預覽項目的，也不可以真機運行小程序，所以真正的體(ti) 驗相對於(yu) 原生App還是未知數。目前階段，你隻能熟悉一下小程序的API，以便在公測後迅速拿出自己的產(chan) 品，搶奪第一波紅利。

總體(ti) 來說，小程序的大概開發模式和模型 已經暴露，其本質是JS+RN，很多人說JavaScript程序員的春天來了，其實小程序的體(ti) 係和Web開發還是有很多區別的。微信言下之意是要拋棄你們(men) 熟悉的DOM采用他的組件體(ti) 係，更熟悉這種組件式開發的不是傳(chuan) 統的Web前端，而是ioses開發人員（更早點你可以追溯到Flex和SilverLight），我本人是不喜歡這種非JS原生的組件式開發的，自由度會(hui) 受限。後續，我會(hui) 持續更新小程序的開發例子和教程，盡快幫助大家上手開發業(ye) 務和產(chan) 品。你現在需要做的，就是靜心想想，我應該開發一個(ge) 什麽(me) 樣的產(chan) 品？