之前和大家介紹了什么是微信小程序開(kāi)發(fā)js代碼,今天就和大家介紹一下微信小程序開(kāi)發(fā)js代碼教程。
步驟一:打開(kāi)微信小程序開(kāi)發(fā)js編輯頁(yè)面
打開(kāi)index.js編輯頁(yè)面,我們先把這頁(yè)面的所有內(nèi)容都清空,然后輸入Page,開(kāi)發(fā)者工具會(huì)彈出提示,這時(shí)按tab鍵即可生成默認(rèn)代碼。
①.Page({}) 包括頁(yè)面的所有操作代碼。
②.Page中,data里面包含了wxml頁(yè)面所需要的所有初始數(shù)據(jù)。
③.Page中其它 on 開(kāi)頭的都是小程序自帶的函數(shù),用來(lái)響應(yīng)用戶(hù)的響應(yīng)動(dòng)作,這些大家可以簡(jiǎn)單看一下都能執(zhí)行什么操作,然后就都可以刪掉了(暫時(shí))。
步驟二:綁定數(shù)據(jù)
①.首先在data中添加一段內(nèi)容:
②.然后更改咱們上節(jié)課index.wxml中的代碼:
③.這回咱們保存(ctrl+s),可以看到如下內(nèi)容
{{content}},兩個(gè)大括號(hào)包圍的內(nèi)容是數(shù)據(jù)綁定的方式,好處是在js文件內(nèi)可以處理動(dòng)作,根據(jù)動(dòng)作對(duì)文字進(jìn)行改變,那么如何做這些動(dòng)作呢?
接下來(lái)咱們?cè)趇ndex.wxml 和 index.js文件里分別作如下改動(dòng):
bindtap:是對(duì)wxml中元素進(jìn)行動(dòng)作綁定,也就是當(dāng)你點(diǎn)擊此元素時(shí),會(huì)調(diào)用js文件中的相應(yīng)函數(shù)進(jìn)行執(zhí)行,在本例中,就是點(diǎn)擊view元素(紅色塊)時(shí)會(huì)調(diào)用click函數(shù),index.js中的click函數(shù)被執(zhí)行。
click: function(): 這段代碼是函數(shù)的格式,無(wú)需糾結(jié),只需要記住這個(gè)格式即可。
this.setData({ ?}):這部分是本文關(guān)鍵,是小程序后端數(shù)據(jù)更改的關(guān)鍵部分,用來(lái)對(duì)data中初始值進(jìn)行改變,改變的模式是 content: “xxx”
(至于this是什么意思,咱們后續(xù)課程會(huì)詳細(xì)講解),同以往學(xué)習(xí)的語(yǔ)言不同,這個(gè)是以冒號(hào)為分隔,左側(cè)是變量(只能是data中的變量),右側(cè)是要改變的值,其實(shí)就是C語(yǔ)言中的賦值操作,C語(yǔ)言中咱們這么寫(xiě),content=”xxx”,在這里把 等號(hào)(=) 換成冒號(hào)(:) 。
編寫(xiě)完保存,這時(shí)候咱們點(diǎn)擊紅色塊,得到新內(nèi)容:
以上就是微信小程序開(kāi)發(fā)js教程,大家躍躍欲試有木有,趕緊打開(kāi)開(kāi)發(fā)者微信小程序開(kāi)發(fā)工具試試吧。