【移動應(yīng)用開發(fā)技術(shù)】微信小程序中基礎(chǔ)入門的示例分析

這篇文章主要為大家展示了“微信小程序中基礎(chǔ)入門的示例分析”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓在下帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信小程序中基礎(chǔ)入門的示例分析”這篇文章吧。微信小程序（下面簡稱小程序）近些月來刷爆了我們這些程序猿們的圈子，可以說無數(shù)的程序猿磨刀霍霍，準(zhǔn)備在這快蛋糕上殺出一片天地。那么作為前端開發(fā)人員，小程序開發(fā)和我們平常的開發(fā)有什么不同的地方呢？讓我們一起來走進門里看看。我們從下面幾個方向來了解一下小程序的開發(fā)：1.開發(fā)工具2.布局差異3.JS差異4.其它序先看一張小程序初始化的目錄：小程序包含一個描述整體程序的app和多個描述各自頁面的page。一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：app.js、app.json、app.wxss；一個小程序頁面由四個文件組成，分別是：js、wxml、wxss、json。詳情傳送門請戳-->/debug/wxadoc/dev/framework/structure.html?t=20161107一、開發(fā)工具微信提供了一款'微信開發(fā)者工具‘，可以直接在小程序的官網(wǎng)下載（/debug/wxadoc/dev/devtools/download.html?t=20161107）。微信開發(fā)者工具集成了開發(fā)調(diào)試、代碼編輯及程序發(fā)布。關(guān)于工具本身沒什么好介紹的，用了一段時間，從代碼編輯的習(xí)慣來說，比較類似sublimetext3，各種特性也都和st3相差不大,估計也是內(nèi)置了emmet，上手還是比較輕松的。需要注意一點的問題是在使用微信開發(fā)者工具時，要習(xí)慣使用”編譯“功能，有的人會遇到自己在編輯器里明明修改了某些地方，但是頁面里卻沒有發(fā)生變化，這個時候其實只需要重新編譯一次，就妥妥的解決了。同時，遇到一些奇怪問題的時候，也不妨清理一下緩存，也許會有意外收獲。二、布局差異1.標(biāo)簽小程序的標(biāo)簽和我們習(xí)慣的p,p,span等標(biāo)簽有較大的差異，小程序里完全取消了這些我們所熟悉標(biāo)簽，取而代之的標(biāo)簽又被叫做組件，分別是視圖容器、基礎(chǔ)內(nèi)容、表單組件、操作反饋（將會廢棄，改為API）、導(dǎo)航、媒體組件、地圖和畫布這八類。（傳送門：/debug/wxadoc/dev/component/?t=20161107）組件的用法和標(biāo)簽一樣，比如view組件<view></view>、text組件<text></view>。從寫法上看起來和標(biāo)簽寫法沒什么區(qū)別，但是這些組件和標(biāo)簽最大的區(qū)別就是，組件本身設(shè)置了樣式，比如icon組件：

<view

class="group">

<block

wx:for="{{iconSize}}">

<icon

type="success"

size="{{item}}"></icon>

</block>

</view>我們只需要使用icon組件，不需要去自己設(shè)置樣式就可以得到對應(yīng)的icon樣式。在日常小程序開發(fā)中，比較常用的組件有view和text，其中用的最多的就是view，view本身并沒有默認(rèn)太多的樣式，只有一個display:block樣式，所以在我看來view就類似于p，我們也就把它當(dāng)作p來使用就行了，然后你就會發(fā)現(xiàn)布局的時候到處都是view~，就像下圖：滿眼全是view這種寫法不需要像html一樣考慮語義、seo神馬的，非常的簡單粗暴~。額外提一下text組件，text擁有view所沒有的一個特性就是text組件內(nèi)的文本可以被復(fù)制、可以被復(fù)制、可以被復(fù)制（重要的事情說三遍~）。如果你希望某段文本可以被復(fù)制，那么你只能使用text組件。同時需要注意的一點，text組件內(nèi)部不能嵌套view組件！嵌套無效！2.樣式如果說html的標(biāo)簽發(fā)生了較大變化的話，那么css則幾乎是沒有什么變化，這意味著我們可以非?？焖俚脑谛〕绦蚶镏貥?gòu)我們的移動端網(wǎng)頁（直接把樣式拷貝過來即可）。但是有幾點問題我們需要注意下：1.小程序引入了新的單位rpx:可以根據(jù)屏幕寬度進行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。2.不支持less、sass等寫法3.不支持不支持級聯(lián)選擇器，例如:.test:nth-child(2)、.test:last-child等4.支持::before和::after注：想了解更多請戳-->/debug/wxadoc/dev/framework/view/wxss.html?t=20161107二、JS差異雖然小程序的交互采用的是js的語法，但是最大的變化就在于小程序無法使用選擇器獲取到頁面的某個'dom'（應(yīng)該不叫dom），這也是我們前端人員需要思路轉(zhuǎn)變的地方，以往我們習(xí)慣于獲取某個dom，然后這個dom上綁定各種事件，同時對頁面進行一些改變操作，但是小程序并沒有提供這種我們習(xí)慣的方法。不能獲取dom，也不能直接操作dom，那我們該怎么寫呢？1.bind和catchbind和catch的作用從字面意思就可以大致猜出是用來綁定某些東西的，沒錯，這是小程序提供綁定事件的兩個方法，而他們的區(qū)別在于bind不阻止冒泡，而catch阻止冒泡。小程序不提供獲取dom的操作，而是讓我們直接將事件綁定寫入到組件內(nèi)，如下代碼：<view

id="tapTest"

data-hi="WeChat"

bindtap="tapName">

Click

me!

</view>看到這大家可能發(fā)現(xiàn)了bind后面跟著一個tap，這個tap是什么東東？2.taptap其實就是一個事件，你可以理解為click，不過在手機端叫做tap，其它的事件還有：touchstart、touchmove、touchcancel、touchend、longtap。bindtap=”tapName”組合起來就是綁定個tap事件,tapName則是對應(yīng)的方法名，在這里需要注意一點，調(diào)用方法時不能夠使用tapName(“txt”)這種形式來傳參，小程序不支持。那么如果我們想要給方法傳遞一些參數(shù)該怎么做呢？接著往下看。3.event我們先看一段代碼：Page({

tapName:

function(event)

{

console.log(event)

}

})打印出來的結(jié)果:{

"type":"tap",

"timeStamp":895,

"target":

{

"id":

"tapTest",

"dataset":

{

"hi":"WeChat"

}

},

"currentTarget":

{

"id":

"tapTest",

"dataset":

{

"hi":"WeChat"

}

},

"detail":

{

"x":53,

"y":14

},

"touches":[{

"identifier":0,

"pageX":53,

"pageY":14,

"clientX":53,

"clientY":14

}],

"changedTouches":[{

"identifier":0,

"pageX":53,

"pageY":14,

"clientX":53,

"clientY":14

}]

}看到這么一堆東西大家可能有點暈，沒事，我們來捋一捋。這個event想來大家應(yīng)該明白是什么，event包含了目標(biāo)對象的相關(guān)信息。那意味著，我們只要去修改目標(biāo)對象的相關(guān)信息，就可以給tapName方法傳輸參數(shù)了。那么如何修改目標(biāo)對象的相關(guān)信息呢？在這之前我們必須要先了解下currentTarget和target兩個屬性，前者是綁定事件的組件，后者是觸發(fā)事件的組件源。理解清楚這兩個屬性很重要！如果是上面例子這種情況，只有一個view組件，那么這兩個屬性的值沒什么區(qū)別，但是如果換成下面的這個例子，就不一樣了：<view

id="tap1"

data-hi="綁定組件"

bindtap="tapName">

<view

id="tap2"

data-hi="觸發(fā)組件源"></view>

</view>我們再輸出看看（為了方便對比，只保留下currentTarget和target兩個屬性）:{

"target":

{

"id":

"tap2",

"dataset":

{

"hi":"觸發(fā)組件源"

}

},

"currentTarget":

{

"id":

"tap1",

"dataset":

{

"hi":"綁定組件"

}

}

}通過這個例子就可以很清楚的發(fā)現(xiàn)，currentTarget對應(yīng)的就是外層綁定了tapName方法的view組件，而target對應(yīng)的則是內(nèi)部的view組件。通過兩個例子，相信大家也注意到了兩個屬性，data-hi和dataset，這兩個屬性有什么關(guān)系呢？大家應(yīng)該猜到了，dataset的值其實就是我們設(shè)置的data-xxx的值，而xxx則是dataset里面的key。大家對于data-xxx的寫法應(yīng)該不陌生，就是html中常見的自定義屬性的寫法，而在小程序中，則被用來傳參。4.改變樣式前面就提到了小程序并不提供獲取和操作dom的能力，這就又帶來了一個問題，我們?nèi)绾稳討B(tài)的改變樣式呢？我們先看下例子：<view

class="container"

style="overflow:

{{screenType?'hidden':'scroll-y'}}"

bindtap="bindType">

Page({

data:

{

screenType:

''

},

bindType:

function(){

this.setData({

screenType:

'1'

})

}

})</view>大家是不是有點明白了呢，我們沒有辦法直接獲取dom然后去改變他的樣式，所以我們只能通過data里的屬性來控制樣式的變化，如上面的代碼，overflow的值取決于screenType的值是否存在，如果存在，則overflow:hidden，反之overflow: