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