1.下載開發(fā)工具图张。
<a >工具下載地址</a>锋拖,下載好微信掃一下即可登錄進(jìn)行開發(fā)。
2.創(chuàng)建工程項(xiàng)目祸轮。
掃一掃之后兽埃,會(huì)出現(xiàn)一個(gè)頁(yè)面就是添加項(xiàng)目,點(diǎn)擊即可适袜。會(huì)出現(xiàn)一下界面
如果你是給公司開發(fā)的柄错,那你肯定會(huì)有appid的,我們練手玩玩的話苦酱,直接選擇無(wú)appid售貌,填好相應(yīng)的項(xiàng)目名稱和項(xiàng)目目錄即可。這時(shí)候就會(huì)出現(xiàn)屬于你的一個(gè)簡(jiǎn)易的demo躏啰。
3.項(xiàng)目目錄分析。
創(chuàng)建好demo之后耙册,會(huì)到一個(gè)簡(jiǎn)易的demo也沒(méi)给僵,點(diǎn)擊編輯菜單,在其右邊就是目錄結(jié)構(gòu)
可以看到初始化的時(shí)候微信給我門創(chuàng)建好了相應(yīng)的目錄結(jié)構(gòu)详拙,pages目錄 utils目錄帝际,以及相應(yīng)的文件,這里我只對(duì)照android開發(fā)中進(jìn)行一些簡(jiǎn)單的解釋饶辙,如果想要得到更深的理解可以看微信官方者文檔
<a >目錄結(jié)構(gòu)及說(shuō)明</a>
第一:首先我門先解釋一下pages 到底干嘛的蹲诀,pages呢就相當(dāng)于我門android開發(fā)中的activity目錄一樣,utils目錄呢就不多說(shuō)了弃揽,也就是工具類嘛脯爪!什么圖片加載工具類啊網(wǎng)絡(luò)請(qǐng)求工具類啊什么的,你也可以在創(chuàng)建個(gè)目錄叫做image 那大概就是我們開發(fā)中的res 目錄矿微,但是呢痕慢,在我們沒(méi)創(chuàng)建一個(gè)頁(yè)面的時(shí)候就需要在app.json里面注冊(cè)一下,類似于AndroidManifest里面注冊(cè)activity一樣的道理涌矢,app.js和app.json和app.wxss類似于我門的application 把所有全局要用到的東西都初始化一下掖举。就相當(dāng)于android開發(fā)中你要用第三方sdk的時(shí)候要在application 文件里面初始化一樣∧缺樱看以下說(shuō)明
是不是更清晰了塔次,js就是我門的邏輯層方篮,json就是我門要設(shè)置的全局層,wxss呢就是我門的res里面的value励负,color藕溅,等等,如果你之前接觸過(guò)html和js的話就當(dāng)我這是廢話熄守,因?yàn)檫@就相當(dāng)于wxss 就相當(dāng)于css樣式表蜈垮。
第二:打開pages目錄可以看到有一個(gè)index頁(yè)面和logs頁(yè)面,在打開的話可以看到每個(gè)頁(yè)面目錄下都有.js .wxml .wxss文件裕照,仔細(xì)觀察有的demo里面還包括.json(這里我說(shuō)明一下攒发,如果你在當(dāng)前的頁(yè)面創(chuàng)建了響應(yīng)的json文件的話,他就不會(huì)復(fù)用最外層的app.json而是你當(dāng)前創(chuàng)建的json里面所配置的內(nèi)容)晋南,
接下來(lái)我門分析一下.js .wxml .wxss具體干嘛的惠猿。
首先我門來(lái)看一下.js吧,他其實(shí)就相當(dāng)于我門創(chuàng)建的activity里面包含的邏輯负间。 其次呢這是最主要的偶妖,他這個(gè)頁(yè)面和我們的activty一樣也是根據(jù)生命周期來(lái)的
<a >生命周期官方解釋類似于android的生命周期</a>下面我截了圖部分生命周期圖
可以看到了吧,data就是我們初始化的一些變量政溃,onload就是activity里面的onCreate()方法趾访。下面的我就不一一解釋了。官方很詳細(xì)董虱。
下面我門來(lái)解釋一下.wxml這個(gè)文件的具體內(nèi)容扼鞋。就是我門的布局文件layout 多了一個(gè)w而已,android中就是.xml一個(gè)道理愤诱≡仆罚看看下面的內(nèi)容
里面的view層就是我門的linearlayout relativelayout fragmentlayout但是需要你在view 里面配置參數(shù)來(lái)實(shí)現(xiàn)到底是linearlayout,還是relativelayout淫半,還是這個(gè)fragmentlayout溃槐,然后看看下方的image 不就是我門的imageview嘛!都是這些控件科吭。
<a >官方給出的控件說(shuō)明</a>昏滴,你需要的里面都有。他這里的數(shù)據(jù)綁定形式類似于我門android 中的databinding這個(gè)三方庫(kù)(mvvm)
接下來(lái)我們來(lái)說(shuō)一下.wxml吧 沒(méi)接觸過(guò)html的人會(huì)有些難理解(個(gè)人猜測(cè))這個(gè)就是tmd 給每個(gè)控件賦不同樣式的文件对人,我門打開看一下
看到上面的內(nèi)容了嘛影涉,.userinfo-avatar看到了嘛 寬高外邊距 等等等一下內(nèi)容,如果你想試用這種樣式的話直接在.wxml空間里面 class="userinfo-avatar"這樣就行了规伐。這個(gè)文件的功能就是這樣
還有最后一個(gè)json文件就是我們的設(shè)置頂部導(dǎo)航欄一些東西蟹倾,下面是里面配置的一些參數(shù),如果你頁(yè)面沒(méi)有這個(gè)文件他會(huì)復(fù)用app.json這個(gè)文件的配置
說(shuō)了這么多,沒(méi)接觸過(guò)的應(yīng)該會(huì)了解不少鲜棠。那么我們是不是應(yīng)該自己動(dòng)手寫一寫呢肌厨。給大家看一下我最近寫的一個(gè)東西,change 接口是用charles抓的豁陆,類似于開眼視頻吧柑爸。也是個(gè)簡(jiǎn)單的demo 有興趣的可以下載看看
<a >山寨版開眼視頻</a>,里面該有的功能都有盒音,沒(méi)有很好的封裝表鳍。簡(jiǎn)單的實(shí)現(xiàn)了一些功能
一般開發(fā)這些東西足夠了。刷新加載啊什么的
https://github.com/venshine/wechat-lightapp
大家可以看一下祥诽,這里面可以有助于你學(xué)習(xí)的更快譬圣,功能實(shí)現(xiàn)的更完美。我也是個(gè)業(yè)余愛(ài)好者雄坪。