在正式開發(fā)程序前,我們需要找到好的開發(fā)工具,就像一個廚師要有好的廚具,一個樂器演奏者要有合適的樂器,好的開發(fā)工具絕對能讓開發(fā)事辦工倍,雖然有些枯燥繁瑣,但是好好學(xué),配置好了,以后就是搬運一下的事情
一.前言
上一篇文章用wepy搭建好了項目的腳手架,這一篇文章,會教大家如何配置項目文件以及如何編寫頁面代碼
二.刪除多余內(nèi)容
1.app.wpy
刪除style中的內(nèi)容
刪除script中除import 'wepy'的其它import內(nèi)容
刪除script里export中的內(nèi)容
2.index.wpy
刪除style中的內(nèi)容
刪除template中的內(nèi)容
刪除script中除import wepy的其它import內(nèi)容
刪除script中export中的內(nèi)容
3.刪除components文件夾中的內(nèi)容
4.刪除mixins文件夾中的內(nèi)容
此時開啟實時編譯,在微信官方開發(fā)工具中會報錯
三.編寫.wpy文件
1.App.wpy中主要由style和script兩個標簽,第一個標簽用于編寫app的全局樣式,同微信小程序中的app.wxss;第二個標簽用于編寫app的配置文件,如在config屬性中編寫app.json中的內(nèi)容,在其它地方編寫app.js中的生命周期函數(shù),適當(dāng)?shù)男薷恼Z法,比如去掉function,去掉生命周期方法中的間隔逗號
2.pages.wpy
可以在官方文檔的小程序入口中查閱相關(guān)配置,在config屬性中直接添加windows屬性中的內(nèi)容,設(shè)置導(dǎo)航欄的樣式.但是下面的onload(){}不用刪除
在template中編寫頁面的結(jié)構(gòu)代碼
在pages文件夾下新建兩個文件夾index和logs分別在這兩個文件夾下新建index.wpy和logs.wpy文件
三.基本語法
1.定義數(shù)據(jù)
在script標簽中通過data={};定義數(shù)據(jù)
2.監(jiān)聽事件
在button標簽中通過@tap屬性綁定點擊事件,在script的method對象中定義事件綁定的方法
3.計算屬性
在script的computed屬性中定義計算屬性,和vue中的計算屬性一樣,格式類似與方法,msgFormat={return this.data.msg.split("").reverse().join("");},計算屬性相比與方法,在數(shù)據(jù)不發(fā)生改變時不會運行,對于數(shù)據(jù)簡單的處理更加高效
4.watch監(jiān)聽數(shù)據(jù)變化
在script標簽中的watch屬性中通過"msg":function(newValue,oldValue){},監(jiān)聽數(shù)據(jù)的變化,做相應(yīng)的處理
5.在wepy中修改data中的數(shù)據(jù)不需要使用this.setData({})函數(shù),直接使用this.數(shù)據(jù)名稱就行了,其中data都可以省略
6.創(chuàng)建組件
可以在當(dāng)前頁面文件夾下新建一個component文件夾,在此文件夾中新建組件文件,wepy.page也就是頁面文件可以監(jiān)聽生命周期方法,包括程序的和頁面的,也可以設(shè)置配置信息,wepy.component不能監(jiān)聽生命周期方法,也不可以設(shè)置配置信息
7.導(dǎo)入組件
通過在頁面文件中import 組件在當(dāng)前頁面的名稱 from '組件的頁面路徑,可以省略后綴
8.注冊組件
通過在script的components={One:One,}注冊組件到當(dāng)前頁面
9.組件間的參數(shù)傳遞
在wepy中數(shù)據(jù)傳遞分為兩種,一種是靜態(tài)傳遞,只支持String類型,一種是動態(tài)傳遞,下面先講靜態(tài)傳遞,為了在子組件中使用父組件傳遞過來的數(shù)據(jù),可以在父組件使用子組件時添加屬性自定義父組件數(shù)據(jù)名稱,如parentInfo="lyl",在子組件的script標簽的props屬性中注冊父組件傳遞過來的靜態(tài)數(shù)據(jù)props={parentInfo:String},這樣就可以在子組件的template標簽中使用{{parentInfo}}拿到父組件傳遞過來的靜態(tài)字符串
.動態(tài)數(shù)據(jù)傳遞就是將父組件中data里的數(shù)據(jù)傳遞給子組件,需要在父組件使用子組件的時候添加屬性:parentInfo="title",在子組件的script標簽中屬性props里添加props={parentTitle:{type:String,default:'null'}},在子組件的template標簽中使用{{parentTitle}}拿到父組件中的數(shù)據(jù)
10.組件中傳遞數(shù)據(jù)動態(tài)變化
默認情況下傳遞給子組件的數(shù)據(jù)不隨父組件數(shù)據(jù)的改變而改變,如果想讓子組件的數(shù)據(jù)隨父組件數(shù)據(jù)的變化而變化,需要在傳遞參數(shù)時添加sync,:parentTitle.sync="title",這樣父組件中的title數(shù)據(jù)發(fā)生變化,子組件中的數(shù)據(jù)也會發(fā)生變化
11.在子組件中修改父組件傳遞過來的數(shù)據(jù)
給子組件中的button標簽綁定@tap方法,在子組件的method屬性中添加chang方法,通過this.數(shù)據(jù)名稱訪問并修改父組件傳遞過來的數(shù)據(jù)
默認情況下只有子組件中的數(shù)據(jù)會發(fā)生改變,如果要父組件中的數(shù)據(jù)也變化,需要在子組件的props屬性中添加twoWay:true的屬性
12.events聲明組件間事件處理的函數(shù)
在wepy中,父組件可以用子組件的方法,子組件也可以用父組件的方法.
如果在子組件中調(diào)用父組件的方法,需要在子組件的方法中,通過this.broadcast("broadcast-event",2,3,4),會去所有后代組件中的events對象中查找名稱叫做broadcast-event的事件
如果想在一個組件中直接調(diào)用指定組件中的方法,可以通過this.$invoke("組件路徑",方法名稱,傳遞參數(shù))
下面時官網(wǎng)中關(guān)于組件中事件通信的實例:
