這篇文章主要講解微信小程序的組件。

　　首先，講解新建項(xiàng)目?，F(xiàn)在有句話：招聘三天以上微信小程序開發(fā)，這個(gè)估計(jì)只能去挖微信的工程師了。技術(shù)新，既然講解，那我們就從開始建項(xiàng)目講解。

　　打開微信web開發(fā)者工具，如上圖。點(diǎn)擊添加項(xiàng)目，會(huì)出現(xiàn)新建項(xiàng)目頁面，如下圖：

　　其中AppID隨意填寫。ps：正式開發(fā)了估計(jì)有要求的。填寫項(xiàng)目名稱并選擇保存的路徑，添加項(xiàng)目就ok了。

　　就這樣，一個(gè)hello world 就OK了。

　　　　古人云，一圖勝千言，大家直接看圖就ok

　　好了，我們現(xiàn)在開始講解微信小程序的組件。

　　先倒入官方流出的demo文件?？梢缘轿⑿判〕绦蜷_發(fā)群：390289365 的共享文件里下載。導(dǎo)入后入下圖：

　　這里可以看到一個(gè)能看到的一些組件。我們打開源碼，很熟悉多界面，入口文件為app.js這和好多框架都類似。

　　是不是發(fā)現(xiàn)一個(gè)新的東西？還是兩個(gè)新的東西？哈哈。。。以wxml和wxss結(jié)尾的文件，但是，具體這個(gè)怎么解讀呢？wxml我不知道該說w－xml還是wx－xm。這個(gè)文件打開以后是布局，類似wpf的xaml布局。wxss呢，我猜應(yīng)該是微信css吧，即使我們的css文件。這樣一來，是不是前端同學(xué)感覺好熟悉，類似平常開發(fā)的html（wxml），css（css）js（類似node.js寫法，或則就是吧）。

　　因?yàn)榻M件還算豐富啊，這篇肯定介紹不完，這先介紹幾種。

　　一。我們先看demo的效果圖，小程序演示，五個(gè)字，這五個(gè)字的地方，就說類似移動(dòng)開發(fā)的，導(dǎo)航bar了，這個(gè)說可以類似IOS開發(fā)一樣，可以總體設(shè)置。在哪呢？就如下圖：

　　這個(gè)navigationBar我想肯定也能動(dòng)態(tài)控，但是我沒從api中看到，應(yīng)該后續(xù)官方文檔肯定也會(huì)有說明吧。

　　二。View元素，這個(gè)view和react native 類似，和html開發(fā)中的div一樣，是一個(gè)塊級(jí)的?？梢栽O(shè)置樣式，如圖中的右側(cè)紅圈的樣式。這樣幾乎和html的布局一樣了，連css語法都一樣。view和view可以嵌套，和div一樣，可以設(shè)置margin，padding，display，block，全局＊都樣式等方式。前端的小伙伴說不是覺得做這個(gè)界面開發(fā)沒壓力？

　　三。navigator 下面這兩個(gè)圖說折疊和展示，其實(shí)就是控制包含navigator組的view展示與隱藏實(shí)現(xiàn)的，后面代碼會(huì)說明。

　　點(diǎn)擊內(nèi)容分區(qū)，三個(gè)navigator的父級(jí)view現(xiàn)實(shí)，再點(diǎn)擊，隱藏。想一想，這如果在html中，這應(yīng)該是js控制吧，但是在微信web小程序開發(fā)呢，看代碼：

　　“js”代碼是有了，但是“click”方法的綁定呢？，但是翻邊demo代碼也沒發(fā)現(xiàn)click的影子。其實(shí)在這里微信web小程序開發(fā)上用了內(nèi)嵌的綁定方式，淡然綁定的關(guān)鍵字也不是click了，而是bindtap，如下圖：

　　對(duì)用的“widgetsToggle”就是上上圖的“click“事件。通過后臺(tái)的 typeviewShow來展示前臺(tái)。

　　四。text 這個(gè)酒類似我們html開發(fā)中的label或則span，是一個(gè)小塊級(jí)元素。這里不多說明來。

　　五。navigator，這個(gè)做我們頁面中的跳轉(zhuǎn)，其中url屬性指向的跳轉(zhuǎn)多目標(biāo)頁面。

　　六。image 這個(gè)就是img咯，src和html開發(fā)的一樣咯。

　　今天的說明就到這吧，明天接著寫，明天盡量介紹一部分，然后模仿個(gè)原生app的界面。

最新評(píng)論