前面都是基礎(chǔ)知識(shí),可能比較枯燥,但是千萬不要著急,小鮮我曾經(jīng)就是因?yàn)榭绮贿^基礎(chǔ)這關(guān),急于求成,走了許多彎路,有任何問題懇請(qǐng)大家問我,留言或者私信都可以,我會(huì)很耐心的回答的,前面的基礎(chǔ)打牢了,后面做開發(fā)就會(huì)如魚得水
1.前言
可以通過百度微信小程序查看官網(wǎng)教程,微信小程序具有微信用戶群帶來的流量紅利,本質(zhì)上是運(yùn)行在微信上的網(wǎng)頁.
2.第一個(gè)微信小程序
先在官網(wǎng)注冊(cè)小程序開發(fā)者賬號(hào),然后下載小程序?qū)?yīng)系統(tǒng)的開發(fā)工具,按照指引創(chuàng)建你的第一個(gè)微信小程序
- 界面目錄名稱必須和界面文件名稱一樣,方便配置信息查找
- .js文件不能為空,至少有pages({ });
- .json文件不能為空,至少有{ };
3.常用標(biāo)簽
- view相當(dāng)于div
- text相當(dāng)于span,但是不會(huì)忽略回車和換行
- 可以通過class屬性給標(biāo)簽設(shè)置類名
4.設(shè)置樣式
- 格式 : 類選擇器{ }
- rpx : 原理同vw和vh一樣,可以根據(jù)屏幕寬度自適應(yīng),只需要按照設(shè)計(jì)師提供的750px圖片設(shè)值
5. 編寫業(yè)務(wù)邏輯代碼
- 創(chuàng)建當(dāng)前頁面對(duì)象 : pages({ })
- 綁定數(shù)據(jù) : data:{msg : "指趣學(xué)院"}
- 綁定業(yè)務(wù)邏輯 : myclick(){console.log("被點(diǎn)擊了");}
- 小程序如何給方法傳參 : myclick(e){console.log(e.currentTarget.dataset.name);}.通過e事件對(duì)象中的數(shù)據(jù)對(duì)象dataset獲取傳遞的參數(shù),通過標(biāo)簽的data-name="lnj"屬性給事件傳遞參數(shù),通過標(biāo)簽的bindtap="myclick"屬性給事件綁定業(yè)務(wù)邏輯,其中data-xxx="abc"是html5中的自定義屬性
- 雙向數(shù)據(jù)傳遞 : 通過input標(biāo)簽的bindinput屬性監(jiān)聽輸入事件,在監(jiān)聽回調(diào)函數(shù)中通過事件對(duì)象.detail.value獲取最新數(shù)據(jù),直接通過this.data.msg=e.detail.value不會(huì)觸發(fā)頁面更新,也就是<text>{{msg
}}</text>不會(huì)發(fā)生變化,需要通過this.setData({msg:e.detail.value});修改數(shù)據(jù) - 事件冒泡:當(dāng)一個(gè)方塊覆蓋另一個(gè)方塊,并且同時(shí)添加點(diǎn)擊事件,點(diǎn)擊上面的方塊會(huì)觸發(fā)下面的方塊發(fā)生響應(yīng),這種現(xiàn)象稱之為事件冒泡.為了阻止事件冒泡.要將bindtap事件改為catchtap事件
- 事件在頁面打開執(zhí)行,如果命令代碼沒有嵌套在函數(shù)中
6. 組件
-
icon
icon效果圖.png
icon組件屬性.png -
button
button效果圖.png
button組件屬性.png -
navigator
相當(dāng)于a標(biāo)簽
跳轉(zhuǎn)地址屬性.png
7.事件
8.暴露模塊給外界
在微信小程序中,引用了commonJS的概念,也就是模塊化,一個(gè)文件相當(dāng)于一個(gè)擁有獨(dú)立作用域的模塊,通過module.exports(對(duì)象)暴露模塊中的內(nèi)容,通過require("文件名")獲取外部文件暴露的內(nèi)容
例如在當(dāng)前界面文件夾下新建一個(gè)test.js文件,在里面通過function say(){}定義一個(gè)函數(shù),通過module.exports={say:say;};將這個(gè)函數(shù)暴露出去,在index.js通過const obj=require("test.js")獲取test.js中暴露的函數(shù),通過obj.say();引用
9.條件渲染
10.列表渲染
這里糾正一下:遍歷到的列表元素是在item中,不是item.message,自定義元素名程是為了防止和當(dāng)前頁面自己定義的變量名沖突
如果是列表渲染必須添加wx:key="{{index}}"屬性保證多條表項(xiàng)不發(fā)生排列錯(cuò)誤
