這兩天閑來無事,也安裝了 “微信折疊”的開發(fā)工具來玩一下。以下是一些小道消息及使用體驗(yàn),過兩天我會(huì)寫一篇文章以開發(fā)者的角度來詳細(xì)評(píng)價(jià)微信小程序:
微信目前有沒有同蘋果商談好,還是個(gè)未知數(shù),畢竟會(huì)對(duì)AppStore有一定的沖擊。
拋棄了大量的javascript組件后,這個(gè)生態(tài)體系變得相當(dāng)?shù)姆忾],微信解釋肯定是:為了更好的性能提升。那么我們拭目以待。
小程序的入口是微信里的三級(jí)菜單,就是在“Tab欄發(fā)現(xiàn)里的游戲下面加入一個(gè)“小程序”。反正,這一欄里的購(gòu)物和游戲我是從來沒點(diǎn)進(jìn)去過的。
以騰訊的尿性,小程序同服務(wù)號(hào)一樣,其關(guān)系鏈及重要功能的開放程度會(huì)因“人”而異。對(duì),優(yōu)質(zhì)的接口只會(huì)開放給騰訊的兒子們(滴滴呀、京東呀)
微信從來就是一眼不合就封殺,優(yōu)步就是很好的案例。官方解釋是優(yōu)步涉嫌誘導(dǎo),滴滴同樣被禁過。利益面前還講道理?反正我是不信的。騰訊的投資覆蓋各個(gè)行業(yè),一旦騰訊掌握了應(yīng)用分發(fā)入口,給兒子們一些小小的甜頭,應(yīng)該不是什么大事兒吧。有人說AppStore也有很多限制,但至少蘋果并沒有像騰訊這樣大量的投資消費(fèi)級(jí)App,直接產(chǎn)生利益沖突的點(diǎn)并不多。話說回來,這點(diǎn)創(chuàng)業(yè)者是不用考慮的,暫時(shí),你的產(chǎn)品和創(chuàng)意,在微信眼里還是個(gè)螻蟻。。。你不用擔(dān)心受到不公正的對(duì)待。如果真有一天你被微信封殺了,只要不是因?yàn)檫`規(guī)內(nèi)容,那么你應(yīng)該高興,然后迅速炒作一波…….
很多做Web的朋友嘗試在小程序里寫div、ul等標(biāo)簽,別試了,沒效果,包括JQUERY在內(nèi)的DOM操作庫,小程序內(nèi)是不能運(yùn)行的。小程序本質(zhì)是JS+ReactNative,對(duì)RN底層做了重構(gòu),已經(jīng)和dom說拜拜了。
下面是詳細(xì)的安裝步驟。win10下測(cè)試通過
以下是安裝步驟:
按操作系統(tǒng)下載相應(yīng)開發(fā)工具版本
windows 64位
windows 32位
mac
小程序示例組件demo下載
雙擊安裝
打開微信web開發(fā)者工具
添加一個(gè)項(xiàng)目,如圖
填寫項(xiàng)目信息 注意AppId這里選擇“無AppId”,AppID只有內(nèi)測(cè)用戶才有,無AppId在目前有功能限制,比如不能發(fā)布項(xiàng)目到手機(jī)微信中預(yù)覽。
點(diǎn)擊“添加項(xiàng)目”按鈕后,將創(chuàng)建一個(gè)小程序項(xiàng)目, 工具已經(jīng)為你創(chuàng)建了一個(gè)demo —– Hello World
工具左側(cè)分別有編輯、調(diào)試、項(xiàng)目調(diào)試區(qū)按鈕,分別解釋3個(gè)區(qū)域的作用.。
編輯: 是你寫代碼的地方,左側(cè)的文件目錄是微信為你創(chuàng)建的一個(gè)項(xiàng)目基礎(chǔ)骨架,你可以在這個(gè)骨架上編寫自己的業(yè)務(wù)代碼。當(dāng)我們編寫完代碼后,點(diǎn)擊編輯視圖左下角的“編譯”即可進(jìn)行調(diào)試和運(yùn)行(當(dāng)點(diǎn)擊“編譯后”,工具視圖會(huì)自動(dòng)跳轉(zhuǎn)到第二個(gè)“調(diào)試”視圖)
調(diào)試: 是你調(diào)試代碼的地方。整個(gè)界面同Chrome的調(diào)試工具一模一樣(應(yīng)該是內(nèi)嵌了WebKit內(nèi)核),相信有Web開發(fā)經(jīng)驗(yàn)的同學(xué)很快就能上手。F8 運(yùn)行到下一個(gè)斷點(diǎn)、F10 單步運(yùn)行、Ctrl+/ 注釋代碼。
解釋一下“調(diào)試”視圖下,頂部的六個(gè)Tab欄(Console、Sources、Network、Storage、AppData、Wxml):
Console: 工具的輸出區(qū)域,在程序中調(diào)用 console.log(‘測(cè)試一下console’), 可在這里輸出自定義調(diào)試信息。同時(shí),這里也是工具遇到異常和發(fā)出警告的信息輸出區(qū)域。見圖:
Sources: 源代碼顯示區(qū)域,這里你可以打斷點(diǎn)并調(diào)試代碼。Sources Pannel 用于顯示當(dāng)前項(xiàng)目的腳本文件,同瀏覽器開發(fā)不同,微信小程序框架會(huì)對(duì)腳本文件進(jìn)行編譯的工作,所以在 Sources Pannel 中開發(fā)者看到的文件是經(jīng)過處理之后的腳本文件,同編輯區(qū)域的代碼有稍許的差異,比如開發(fā)者的代碼都會(huì)被包裹在 define 函數(shù)中,并且對(duì)于 Page 代碼,在尾部會(huì)有 require 的主動(dòng)調(diào)用。
Network: 用于觀察和顯示 網(wǎng)絡(luò)的request 和 socket 的請(qǐng)求情況
Storage: 如果你在程序中使用了 wx.setStorage 或者 wx.setStorageSync 后,在這里將會(huì)顯示你的數(shù)據(jù)存儲(chǔ)情況。是的,小程序支持本地緩存數(shù)據(jù)。
AppData: 用于顯示當(dāng)前項(xiàng)目當(dāng)前時(shí)刻 appdata 具體數(shù)據(jù)??梢栽谶@里管理應(yīng)用程序中的各類變量(不同于Storage中的緩存變量,只有調(diào)用wx.setStorage 或者 wx.setStorageSync 的數(shù)據(jù)才會(huì)出現(xiàn)在Storage中)。在這,你可以隨時(shí)修改變量,工具將把變量改變?cè)谧髠?cè)預(yù)覽視圖中實(shí)時(shí)顯示。我們可以看到,AppData 以頁面(pages/index/index)作為分組單位,每個(gè)頁面只會(huì)顯示自己的AppData,非常的清晰。
Wxml:將Wxml標(biāo)簽同預(yù)覽界面實(shí)時(shí)關(guān)聯(lián),在這里可以看到真實(shí)的頁面結(jié)構(gòu)以及結(jié)構(gòu)對(duì)應(yīng)的 wxss 屬性,同時(shí)可以通過修改對(duì)應(yīng) wxss 屬性,在模擬器中實(shí)時(shí)看到修改的情況。通過調(diào)試模塊左上角的選擇器,還可以快速找到頁面中組件對(duì)應(yīng)的 wxml 代碼。
最后說下“項(xiàng)目”這個(gè)功能區(qū)塊兒, 項(xiàng)目實(shí)際上是用來上傳和預(yù)覽項(xiàng)目的。微信要求所有發(fā)布的小程序都必須審核,所以需要在這里將小程序上傳(應(yīng)該是類似于AppStore,但肯定不是AppStore的發(fā)布模式,蘋果應(yīng)該不會(huì)允許。小程序目前同用戶的接觸方式還是未知數(shù),而這恰恰是最重要的一塊兒)。如果你沒有被內(nèi)測(cè)邀請(qǐng),這里你是不可以上傳和預(yù)覽項(xiàng)目的,也不可以真機(jī)運(yùn)行小程序,所以真正的體驗(yàn)相對(duì)于原生App還是未知數(shù)。目前階段,你只能熟悉一下小程序的API,以便在公測(cè)后迅速拿出自己的產(chǎn)品,搶奪第一波紅利。
總體來說,小程序的大概開發(fā)模式和模型 已經(jīng)暴露,其本質(zhì)是JS+RN,很多人說JavaScript程序員的春天來了,其實(shí)小程序的體系和Web開發(fā)還是有很多區(qū)別的。微信言下之意是要拋棄你們熟悉的DOM采用他的組件體系,更熟悉這種組件式開發(fā)的不是傳統(tǒng)的Web前端,而是iOS開發(fā)人員(更早點(diǎn)你可以追溯到Flex和SilverLight),我本人是不喜歡這種非JS原生的組件式開發(fā)的,自由度會(huì)受限。后續(xù),我會(huì)持續(xù)更新小程序的開發(fā)例子和教程,盡快幫助大家上手開發(fā)業(yè)務(wù)和產(chǎn)品。你現(xiàn)在需要做的,就是靜心想想,我應(yīng)該開發(fā)一個(gè)什么樣的產(chǎn)品?