1-微信小程序

前面都是基礎(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è)微信小程序


創(chuàng)建界面.png

開發(fā)界面.png

文件目錄.png

全局配置.png

局部配置.png

界面導(dǎo)航欄配置.png

打印調(diào)試信息配置.png
  • 界面目錄名稱必須和界面文件名稱一樣,方便配置信息查找
  • .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.條件渲染

單標(biāo)簽條件渲染.png

多標(biāo)簽條件渲染.png

10.列表渲染

列表渲染屬性.png

這里糾正一下:遍歷到的列表元素是在item中,不是item.message,自定義元素名程是為了防止和當(dāng)前頁面自己定義的變量名沖突
如果是列表渲染必須添加wx:key="{{index}}"屬性保證多條表項(xiàng)不發(fā)生排列錯(cuò)誤


自定義當(dāng)前對(duì)象名稱和索引屬性.png

image.png

11.WePy plugin插件工具

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市橙垢,隨后出現(xiàn)的幾起案子沐悦,更是在濱河造成了極大的恐慌厌杜,老刑警劉巖灼捂,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件预伺,死亡現(xiàn)場(chǎng)離奇詭異荚坞,居然都是意外死亡戳鹅,警方通過查閱死者的電腦和手機(jī)佩迟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門团滥,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人报强,你說我怎么就攤上這事灸姊。” “怎么了秉溉?”我有些...
    開封第一講書人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵力惯,是天一觀的道長(zhǎng)碗誉。 經(jīng)常有香客問我,道長(zhǎng)父晶,這世上最難降的妖魔是什么哮缺? 我笑而不...
    開封第一講書人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮甲喝,結(jié)果婚禮上尝苇,老公的妹妹穿的比我還像新娘。我一直安慰自己俺猿,他們只是感情好茎匠,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著押袍,像睡著了一般诵冒。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上谊惭,一...
    開封第一講書人閱讀 52,736評(píng)論 1 312
  • 那天汽馋,我揣著相機(jī)與錄音,去河邊找鬼圈盔。 笑死豹芯,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的驱敲。 我是一名探鬼主播铁蹈,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼众眨!你這毒婦竟也來了握牧?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤娩梨,失蹤者是張志新(化名)和其女友劉穎沿腰,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體狈定,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡颂龙,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了纽什。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片措嵌。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖芦缰,靈堂內(nèi)的尸體忽然破棺而出铅匹,到底是詐尸還是另有隱情,我是刑警寧澤饺藤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布包斑,位于F島的核電站流礁,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏罗丰。R本人自食惡果不足惜神帅,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望萌抵。 院中可真熱鬧找御,春花似錦、人聲如沸绍填。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽讨永。三九已至滔驶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間卿闹,已是汗流浹背揭糕。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留锻霎,地道東北人著角。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像旋恼,于是被迫代替她去往敵國(guó)和親吏口。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容