wepy公共樣式_9-微信小程式wepy使用

在正式開發程式前,我們需要找到好的開發工具,就像一個廚師要有好的廚具,一個樂器演奏者要有合适的樂器,好的開發工具絕對能讓開發事辦工倍,雖然有些枯燥繁瑣,但是好好學,配置好了,以後就是搬運一下的事情

一.前言

上一篇文章用wepy搭建好了項目的腳手架,這一篇文章,會教大家如何配置項目檔案以及如何編寫頁面代碼

二.删除多餘内容

1.app.wpy

删除style中的内容

删除script中除import 'wepy'的其它import内容

删除script裡export中的内容

2.index.wpy

删除style中的内容

删除template中的内容

删除script中除import wepy的其它import内容

删除script中export中的内容

3.删除components檔案夾中的内容

4.删除mixins檔案夾中的内容

此時開啟實時編譯,在微信官方開發工具中會報錯

三.編寫.wpy檔案

1.App.wpy中主要由style和script兩個标簽,第一個标簽用于編寫app的全局樣式,同微信小程式中的app.wxss;第二個标簽用于編寫app的配置檔案,如在config屬性中編寫app.json中的内容,在其它地方編寫app.js中的生命周期函數,适當的修改文法,比如去掉function,去掉生命周期方法中的間隔逗号

app.png

2.pages.wpy

可以在官方文檔的小程式入口中查閱相關配置,在config屬性中直接添加windows屬性中的内容,設定導航欄的樣式.但是下面的onload(){}不用删除

在template中編寫頁面的結構代碼

在pages檔案夾下建立兩個檔案夾index和logs分别在這兩個檔案夾下建立index.wpy和logs.wpy檔案

pages.png

三.基本文法

1.定義資料

在script标簽中通過data={};定義資料

2.監聽事件

在button标簽中通過@tap屬性綁定點選事件,在script的method對象中定義事件綁定的方法

3.計算屬性

在script的computed屬性中定義計算屬性,和vue中的計算屬性一樣,格式類似與方法,msgFormat={return this.data.msg.split("").reverse().join("");},計算屬性相比與方法,在資料不發生改變時不會運作,對于資料簡單的處理更加高效

4.watch監聽資料變化

在script标簽中的watch屬性中通過"msg":function(newValue,oldValue){},監聽資料的變化,做相應的處理

5.在wepy中修改data中的資料不需要使用this.setData({})函數,直接使用this.資料名稱就行了,其中data都可以省略

6.建立元件

可以在目前頁面檔案夾下建立一個component檔案夾,在此檔案夾中建立元件檔案,wepy.page也就是頁面檔案可以監聽生命周期方法,包括程式的和頁面的,也可以設定配置資訊,wepy.component不能監聽生命周期方法,也不可以設定配置資訊

7.導入元件

通過在頁面檔案中import 元件在目前頁面的名稱 from '元件的頁面路徑,可以省略字尾

8.注冊元件

通過在script的components={One:One,}注冊元件到目前頁面

9.元件間的參數傳遞

在wepy中資料傳遞分為兩種,一種是靜态傳遞,隻支援String類型,一種是動态傳遞,下面先講靜态傳遞,為了在子元件中使用父元件傳遞過來的資料,可以在父元件使用子元件時添加屬性自定義父元件資料名稱,如parentInfo="lyl",在子元件的script标簽的props屬性中注冊父元件傳遞過來的靜态資料props={parentInfo:String},這樣就可以在子元件的template标簽中使用{{parentInfo}}拿到父元件傳遞過來的靜态字元串

.動态資料傳遞就是将父元件中data裡的資料傳遞給子元件,需要在父元件使用子元件的時候添加屬性:parentInfo="title",在子元件的script标簽中屬性props裡添加props={parentTitle:{type:String,default:'null'}},在子元件的template标簽中使用{{parentTitle}}拿到父元件中的資料

10.元件中傳遞資料動态變化

預設情況下傳遞給子元件的資料不随父元件資料的改變而改變,如果想讓子元件的資料随父元件資料的變化而變化,需要在傳遞參數時添加sync,:parentTitle.sync="title",這樣父元件中的title資料發生變化,子元件中的資料也會發生變化

11.在子元件中修改父元件傳遞過來的資料

給子元件中的button标簽綁定@tap方法,在子元件的method屬性中添加chang方法,通過this.資料名稱通路并修改父元件傳遞過來的資料

預設情況下隻有子元件中的資料會發生改變,如果要父元件中的資料也變化,需要在子元件的props屬性中添加twoWay:true的屬性

12.events聲明元件間事件處理的函數

在wepy中,父元件可以用子元件的方法,子元件也可以用父元件的方法.

如果在子元件中調用父元件的方法,需要在子元件的方法中,通過this.

broadcast("broadcast-event",2,3,4),會去所有後代元件中的events對象中查找名稱叫做broadcast-event的事件

如果想在一個元件中直接調用指定元件中的方法,可以通過this.$invoke("元件路徑",方法名稱,傳遞參數)

下面時官網中關于元件中事件通信的執行個體:

image.png

image.png

image.png

image.png