在微信小程序越來(lái)越流行的今天,很多人都已經(jīng)習(xí)慣使用即開(kāi)即用的小程序,所以開(kāi)發(fā)小程序的開(kāi)發(fā)者也越來(lái)越多了,對(duì)于一般會(huì)寫(xiě)程序的開(kāi)發(fā)者來(lái)說(shuō),小程序的入門(mén)也算比較簡(jiǎn)單,但如果想要實(shí)現(xiàn)小程序的功能,少不了要具有一定的基本功,這就是微信小程序的基本語(yǔ)法,現(xiàn)在就簡(jiǎn)單的講講小程序的入門(mén)基本語(yǔ)法。
首先要先下載一個(gè)“微信開(kāi)發(fā)者工具”,然后才能創(chuàng)建小程序項(xiàng)目,一般情況下,我們可以使用新創(chuàng)建或?qū)胍延械男〕绦騺?lái)進(jìn)行操作,創(chuàng)建或?qū)牒?,如下圖所示:
看到上面的那個(gè)app.json文件,這是一個(gè)全局的配置文件,最主要的有兩個(gè)參數(shù),一個(gè)是”pages”,一個(gè)是”window”,pages是用來(lái)配置小程序的所有可以打開(kāi)的頁(yè)面,其他的頁(yè)面則不能打開(kāi),如下圖所示:
如果你添加的路徑的文件里沒(méi)有該文件,則會(huì)自動(dòng)生成由.wxml、.wxss 、xml.json、.js后綴組成的文件。”window”是用來(lái)配置狀態(tài)欄,底部導(dǎo)航欄等的屬性,這個(gè)參照官方的參數(shù)來(lái)設(shè)置就可以了。
然后是app.js是全局的JS配置,一般情況我們可以寫(xiě)一些獲取用戶的手機(jī)設(shè)備信息,或者如果小程序有更新的話,提示用戶更新,還有接口與密鑰的信息等可供頁(yè)面上所有JS文件調(diào)用的內(nèi)容。
由于小程序使用的是MVVM的模式,這與我們做網(wǎng)站時(shí)使用的MVC模式差別很大,我感覺(jué)最大的好處是,wxml頁(yè)面的內(nèi)容是可以隨著js頁(yè)面的參數(shù)內(nèi)容而改變,而且不需要刷新頁(yè)面就能實(shí)現(xiàn),下面按我個(gè)人理解講一下wxml頁(yè)面與JS頁(yè)面的交互功能。
Js頁(yè)面
Page({
data: {
hotLine : '4008009385',
show_index:1
}
})
Wxml頁(yè)面
<view class="phone" bindtap='ChangeTell'>
<view class="num">{{hotLine}}</view>
</view>
以上是在頁(yè)面里輸出電話,如果要改變電話號(hào)碼,直接改變hotLine的值就行了,JS里可以這么寫(xiě):
//加載頁(yè)面時(shí)觸發(fā)這個(gè)方法,且只觸發(fā)一次
onLoad: function () {
var that = this
Load_index(that)
},
這樣默認(rèn)的電話號(hào)碼就會(huì)被通過(guò)API接口傳遞的參數(shù)所替代,當(dāng)然你們可以通過(guò)點(diǎn)擊事件改變,例如上面的bindtap=’ChangeTell’,就是在js里寫(xiě)一個(gè)點(diǎn)擊事件,示例如下:
ChangeTell: function(){
var that = this;
that.setData({
hotLine: “400800xxxx”//新的電話號(hào)碼
})
},
這里要講一個(gè)微信小程序里最重要的方法setData,它是wxml與js之間傳遞參數(shù)的樞紐,除了data里默認(rèn)的參數(shù)外,所有要傳遞到wxml頁(yè)面的參數(shù)都是通過(guò)這個(gè)方法來(lái)實(shí)現(xiàn)的,上面例子就是這樣。
小程序的知識(shí)點(diǎn)有些太雜了,想要系統(tǒng)學(xué)習(xí)的話,還得經(jīng)常翻看小程序里的微信官方文檔,我只做了幾個(gè)小程序項(xiàng)目,對(duì)于小程序的語(yǔ)法還遠(yuǎn)沒(méi)達(dá)到無(wú)需看文檔直接編程的地步。
如沒(méi)特殊注明,文章均為方維網(wǎng)絡(luò)原創(chuàng),轉(zhuǎn)載請(qǐng)注明來(lái)自http://m.oulysa.com/news/5727.html