日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時間:8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
微信小程序框架wepy的示例分析-創(chuàng)新互聯(lián)

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序框架wepy的示例分析,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站專注于企業(yè)網(wǎng)絡(luò)營銷推廣、網(wǎng)站重做改版、湖里網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)電子商務(wù)商城網(wǎng)站建設(shè)、集團公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù),價格優(yōu)惠性價比高,為湖里等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

wepy框架借鑒了vue的語法風(fēng)格和功能特性,但是在使用過程中還是發(fā)現(xiàn)與vue有很大的不同?,F(xiàn)在總結(jié)一下自己開發(fā)中遇到的問題,共大家參考一下。

wepy中的組件

組件里面的坑還不是一般的多!

首先來說說組件間的數(shù)據(jù)共享。在vue中你也能做到這一點,只要把 data 寫成一個對象就可以了,當(dāng)然你不想讓所有的子組件都共享同一份數(shù)據(jù),vue中的解決方案是給 data 寫成一個函數(shù)就好了,return出來所有的數(shù)據(jù),這樣組件間的數(shù)據(jù)就不會共享了。

但是wepy中不能。文檔中介紹:WePY中的組件都是靜態(tài)組件,是以組件ID作為唯一標(biāo)識的,每一個ID都對應(yīng)一個組件實例,當(dāng)頁面引入兩個相同ID的組件時,這兩個組件共用同一個實例與數(shù)據(jù),當(dāng)其中一個組件數(shù)據(jù)變化時,另外一個也會一起變化。
所以如果同一個頁面引用多個組件,你只能給每個組件定義不同的ID,類似這樣

import Child from '../components/child';

  export default class Index extends wepy.page {
    components = {
      //為兩個相同組件的不同實例分配不同的組件ID,從而避免數(shù)據(jù)同步變化的問題
      child: Child,
      anotherchild: Child
    };
  }

看起來是不是很蠢。但是沒辦法,你只能這么用。

如果頁面中只引用兩三個同類型組件還好,但是如果我是一個循環(huán),我也不知道我要引用多少組件,該怎么辦?
接下來再說說組件的循環(huán)。

wepy官方文檔中說明:當(dāng)需要循環(huán)渲染W(wǎng)ePY組件時(類似于通過wx:for循環(huán)渲染原生的wxml標(biāo)簽),必須使用WePY定義的輔助標(biāo)簽。但是不支持在 repeat 的組件中去使用 props, computed, watch 等等特性。什么?props 都不讓用??那父組件如何給子組件傳參??

后來實踐發(fā)現(xiàn),如果 props 中的數(shù)據(jù)在 template 中是能取到的,但是在 method 或者event 中就取不到了,你說神不神奇!
所以最后的解決辦法是用的 wepy-redux,類似vuex,放在 store 中實現(xiàn)的。

視圖的渲染之異步數(shù)據(jù)

異步數(shù)據(jù)的獲取后需要手動調(diào)用 this.$apply() 方法才能重新渲染視圖,這一點也一定要記得。剛開始做的時候是在頁面 data 中寫的假數(shù)據(jù),渲染的好好的。但是數(shù)據(jù)換成從接口讀取后,死活視圖出不來。琢磨了半天才想起來需要手動調(diào)用 this.$apply()。而 vue 是不需要這么做的。

方法定義

wepy中頁面中的事件需要些在 methods 中,組件之間的處理函數(shù)需要寫在 events 中,而自己寫的自定義方法需要寫在與 methods 同級中。不像vue,可以寫在 methods 里。在 events 中寫的函數(shù),不需要在調(diào)用子組件的時候?qū)懺谧咏M件中,子組件 $emit 會自動去 events 中尋找同名方法執(zhí)行。這點也與vue不同。

事件傳參

wepy優(yōu)化了原生小程序在事件中的傳參形式。比如頁面中有一個方法,叫 getIndex,目的是取一個循環(huán)的 index 屬性,在原生中需要額外定義一個 data-index 屬性,然后在 getIndex 中通過event.currentTarget.dataset.index 來獲取。而wepy中可以直接在事件里傳遞,但需要加上{{}},寫成 getIndex({{index}})這樣,這點也與vue不同。

數(shù)據(jù)綁定

這個是小程序原生方法中的不好點,wepy不能幫忙背這個鍋。數(shù)據(jù)綁定也是使用 {{}},但是{{}} 里面只能進行簡單的運算,具體支持哪些運算可以看官方文檔。需求是一個列表,選中的變個樣式,正常的思路就是選中的時候觸發(fā)一個方法,將 index 賦值給 currentActive,在 {{}} 中判斷如果 currentActive == index 就應(yīng)用 active 樣式,命名很簡單的一個需求。但是寫好了就是不好使,找了半天也沒發(fā)現(xiàn)哪錯了,最后看文檔,原來是根本就不支持這種寫法!!只支持簡單的運算,這種不屬于簡單的范圍??!最后的解決辦法是弄了一個數(shù)組 arr,選中將對應(yīng)位置置為 true,在 {{}} 判斷 arr[index] 是否為 true 解決了這個問題。總結(jié)一句話:{{}} 一點也不強大。

動態(tài)綁定class

wepy中需要遵循小程序原生的綁定方式,與vue中也不同。在vue中,動態(tài)的和非動態(tài)的需要分別寫,類似這樣:

。但是在wepy中,動態(tài)和非動態(tài)的可以寫在一起,類似這樣:

mixin混合

wepy中的 mixin 分為兩種。對于組件data數(shù)據(jù),compontents 組件,events 事件及其他自定義方法采用默認(rèn)式混合,即如果組件中未定義這些東西,那么 mixin 中的將生效,如果組件中已經(jīng)定義了,將以組件中定義的為主,mixin 中定義的不會生效。但對于 methods 事件及小程序頁面事件,將采用兼容式混合,只要定義了就都會生效。但是先響應(yīng)組件中定義的,再響應(yīng) mixin 中定義的。而vue組件中 methods 里的事件如果與 mixin 中的重名,會采用組件中的事件。而生命周期的鉤子函數(shù)則是先響應(yīng) mixin 中的,在響應(yīng)組件中的。

注:以上問題均是采用wepy1.7.2的版本

關(guān)于“微信小程序框架wepy的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。


網(wǎng)站題目:微信小程序框架wepy的示例分析-創(chuàng)新互聯(lián)
鏈接分享:http://www.dlmjj.cn/article/ccciss.html