微信小程序上手項目-星座配對
|
這是(shi)一門(men)微信小程(cheng)序入門(men)課程(cheng)，通過學(xue)習本(ben)節(jie)課程(cheng)可(ke)以使你快(kuai)速(su)上手小程(cheng)序開發，在學(xue)習這門(men)課之前(qian)，需要你先具備基本(ben)的(de)前(qian)端開發能力(li)，包括html/css/JavaScrip，起碼你得(de)會切圖，了解js語法。 為什么學習小程序學習(xi)(xi)小(xiao)程(cheng)(cheng)(cheng)序(xu)(xu)之前要(yao)先了解，小(xiao)程(cheng)(cheng)(cheng)序(xu)(xu)是(shi)(shi)(shi)什么(me)(me)，有(you)(you)什么(me)(me)獨特(te)的(de)地方值得我們一定(ding)要(yao)去學習(xi)(xi)它，小(xiao)程(cheng)(cheng)(cheng)序(xu)(xu)是(shi)(shi)(shi)基(ji)于微信(xin)實現特(te)定(ding)功能的(de)一種載體(ti)，同樣(yang)基(ji)于微信(xin)實現功能的(de)我們知(zhi)道還(huan)有(you)(you)公眾號和微網(wang)站，那(nei)小(xiao)程(cheng)(cheng)(cheng)序(xu)(xu)的(de)特(te)點是(shi)(shi)(shi)什么(me)(me)，我們用HTML5做一個(ge)手機站不行嗎，再接入微信(xin)的(de)SDK，功能也(ye)很(hen)強大(da)，小(xiao)程(cheng)(cheng)(cheng)序(xu)(xu)最大(da)的(de)特(te)點，就(jiu)是(shi)(shi)(shi)可以(yi)擁有(you)(you)媲(pi)美原生App的(de)流暢(chang)體(ti)驗(yan)(yan)，這一點是(shi)(shi)(shi)非常(chang)誘人的(de)，也(ye)是(shi)(shi)(shi)相(xiang)比HTML5最大(da)的(de)優勢，尤其學到(dao)后面你會(hui)發現小(xiao)程(cheng)(cheng)(cheng)序(xu)(xu)的(de)開發還(huan)特(te)別簡單，開發又(you)簡單體(ti)驗(yan)(yan)又(you)好，天底下哪有(you)(you)這么(me)(me)便宜的(de)事(shi)，但小(xiao)程(cheng)(cheng)(cheng)序(xu)(xu)就(jiu)是(shi)(shi)(shi)這樣(yang)一個(ge)東西。 小程(cheng)序(xu)為什么能做到接近原(yuan)生(sheng)的(de)(de)(de)體驗呢，這是(shi)(shi)(shi)因為小程(cheng)序(xu)在底(di)層(ceng)就是(shi)(shi)(shi)調(diao)用(yong)的(de)(de)(de)原(yuan)生(sheng)組件(jian)，我(wo)們開發小程(cheng)序(xu)編寫(xie)的(de)(de)(de)前端代(dai)碼(ma)，可(ke)以(yi)理(li)解(jie)為是(shi)(shi)(shi)調(diao)用(yong)微信內部原(yuan)生(sheng)組件(jian)的(de)(de)(de)快捷方式，因此，開發小程(cheng)序(xu)使用(yong)的(de)(de)(de)必然是(shi)(shi)(shi)一(yi)(yi)種全(quan)新的(de)(de)(de)語言(yan)，不可(ke)能是(shi)(shi)(shi)HTML5，本節課程(cheng)就是(shi)(shi)(shi)帶(dai)領大家一(yi)(yi)起來學習這門(men)語言(yan)，并且完成一(yi)(yi)個小示例，讓大家可(ke)以(yi)快速(su)的(de)(de)(de)對小程(cheng)序(xu)開發有一(yi)(yi)個直(zhi)觀的(de)(de)(de)認識。 小程序開發語言介紹小程序的(de)(de)開發語言跟HTML5是非常相(xiang)似的(de)(de)，視(shi)圖層的(de)(de)兩種(zhong)語言WXML和(he)(he)WXSS就分別對應了HTML和(he)(he)CSS，邏輯層就仍(reng)然還是Javascript，為了便于理(li)解，下面我(wo)就用小程序和(he)(he)HMLT5對比(bi)的(de)(de)方式，來講(jiang)解小程序的(de)(de)這(zhe)三(san)種(zhong)開發語言。 首先我們說(shuo)區(qu)別(bie)最小(xiao)的(de)，就是(shi)小(xiao)程序(xu)里的(de)這個JS，它(ta)跟web開發中(zhong)的(de)JS只有兩點區(qu)別(bie)，第一(yi)，沒有任何DOM操(cao)作相關功能，這一(yi)點跟Nodejs是(shi)一(yi)樣的(de)，大家知(zhi)道Js語言本身就是(shi)不(bu)包括DOM操(cao)作的(de)，DOM操(cao)作是(shi)瀏覽器環(huan)境為(wei)JS做的(de)擴展；第二點區(qu)別(bie)，小(xiao)程序(xu)里的(de)Js增(zeng)加(jia)了一(yi)些(xie)微(wei)信特有的(de)API，這個很(hen)好(hao)理(li)解，像(xiang)微(wei)信掃碼啊(a)，上傳下載(zai)啊(a)這些(xie)功能，肯(ken)定是(shi)要(yao)單獨提(ti)供(gong)API的(de)。總結一(yi)下，去掉了DOM操(cao)作，增(zeng)加(jia)了一(yi)些(xie)API，另(ling)外(wai)值(zhi)得一(yi)提(ti)的(de)是(shi)小(xiao)程序(xu)中(zhong)的(de)js是(shi)支(zhi)持模塊化的(de)，也支(zhi)持ES6。 WXSS與CSS的(de)區別，也是(shi)兩點，第一(yi)(yi)(yi)，增加了(le)一(yi)(yi)(yi)個rpx單位(wei)，這個單位(wei)具有自動(dong)適應屏幕(mu)寬(kuan)度的(de)特點，規則是(shi)1rpx = 屏幕(mu)寬(kuan)度/750，這是(shi)個很(hen)好(hao)用的(de)單位(wei)，可(ke)以(yi)說完美(mei)解決了(le)屏幕(mu)適配的(de)問題，如果你用過(guo)HTML5里(li)的(de)vw單位(wei)，會發(fa)現他倆是(shi)一(yi)(yi)(yi)回(hui)事(shi)，只(zhi)(zhi)不(bu)(bu)過(guo)1vw = 屏幕(mu)寬(kuan)度/100，比(bi)例不(bu)(bu)太一(yi)(yi)(yi)樣；第二個區別，WXSS支(zhi)持(chi)的(de)選(xuan)(xuan)擇(ze)(ze)器(qi)(qi)類(lei)型有限，目前只(zhi)(zhi)支(zhi)持(chi).class, #id, element, ele,ele, ::before, ::after，注意，后(hou)(hou)代(dai)選(xuan)(xuan)擇(ze)(ze)器(qi)(qi)是(shi)不(bu)(bu)支(zhi)持(chi)的(de)，這個我再開發(fa)工具里(li)測試發(fa)現可(ke)以(yi)支(zhi)持(chi)，但(dan)文檔(dang)是(shi)明確說只(zhi)(zhi)支(zhi)持(chi)上(shang)面那(nei)些，那(nei)我們(men)就聽文檔(dang)的(de)，后(hou)(hou)代(dai)選(xuan)(xuan)擇(ze)(ze)器(qi)(qi)就不(bu)(bu)要用了(le)。總結一(yi)(yi)(yi)下，WXSS相比(bi)CSS增加了(le)rpx單位(wei)，不(bu)(bu)支(zhi)持(chi)后(hou)(hou)代(dai)選(xuan)(xuan)擇(ze)(ze)器(qi)(qi)； 最后WXML這塊(kuai)的(de)內(nei)容(rong)比(bi)較多，尤其有(you)一部(bu)分HTML里完全沒有(you)的(de)東西(xi)，比(bi)如(ru)(ru)說(shuo)數據綁定、條件渲(xuan)染、列表渲(xuan)染、模板、引用，這些東西(xi)我在這里就不展開講了，如(ru)(ru)果你之前用過任何的(de)前端MVVM框架或者(zhe)前端模板引擎，那(nei)對這塊(kuai)內(nei)容(rong)應(ying)該(gai)是(shi)輕車熟路的(de)，如(ru)(ru)果說(shuo)這些東西(xi)都不知道，那(nei)也沒關系，自己(ji)回去把文檔這塊(kuai)內(nei)容(rong)仔(zi)細的(de)閱讀(du)一遍，相(xiang)信都能看明(ming)白是(shi)怎么回事。 這(zhe)里我們就說兩(liang)個東西，標(biao)(biao)簽和事件，首(shou)先，標(biao)(biao)簽徹底換(huan)了一(yi)套，所有的(de)(de)HTML標(biao)(biao)簽都(dou)不能(neng)用(yong)，取而代之的(de)(de)是小(xiao)程(cheng)(cheng)序提供的(de)(de)一(yi)套標(biao)(biao)簽，官方(fang)把(ba)他們叫組(zu)件，不管叫什么，這(zhe)個組(zu)件的(de)(de)寫(xie)法和HTML標(biao)(biao)簽是一(yi)樣的(de)(de)，也(ye)(ye)是由標(biao)(biao)簽名(ming)，屬性，內容(rong)組(zu)成，也(ye)(ye)可(ke)以嵌套，也(ye)(ye)可(ke)以通過class，id，style來(lai)添加樣式，但是小(xiao)程(cheng)(cheng)序組(zu)件相對來(lai)說擁(yong)有更(geng)強大的(de)(de)功(gong)能(neng)，自帶樣式也(ye)(ye)更(geng)豐富，舉個例子，
本文地址：//www.jinyoudianli.com/wxmini/doc/course/23871.html 復制鏈接
如需定制請聯(lian)系易優客服咨(zi)詢：
易小優
轉人工
×
|
