微信小程序 wepy

代碼規(guī)范

注意: page中屬性和值使用等號連接

一個字符空格使用 全角空格  

關于window設置均設置在config中

官網(wǎng)
navigationBarTitleText--導航欄標題文字內(nèi)容
navigationBarBackgroundColor--導航欄背景顏色,如"#000000"

數(shù)據(jù).函數(shù) 存放位置
  • 所有數(shù)據(jù)存放在data對象中
  • 所有函數(shù)存放在methods對象中
  • 生命周期函數(shù)位置 與 methods對象 平行
組件引入

使用 import引入組件后,需要在compoents中聲明

import wepy from 'wepy';
//引入List、Panel和Counter組件
import List from '../components/list';
import Panel from '../components/panel';
import Counter from '../components/counter';

export default class Index extends wepy.page {
    //頁面配置
    config = {
        "navigationBarTitleText": "test"
    };

    //聲明頁面中將要使用到的組件
    components = {
        panel: Panel,
        counter1: Counter,
        counter2: Counter,
        list: List
    };
</script>

page屬性

watch 數(shù)據(jù)監(jiān)視器

監(jiān)聽器在watch對象中聲明,類型為函數(shù),函數(shù)名與需要被監(jiān)聽的data對象中的屬性同名,每當被監(jiān)聽的屬性改變一次,監(jiān)聽器函數(shù)就會被自動調(diào)用執(zhí)行一次

watch = {
    inpval(newval,oldval){
      console.log('新值'+newval+'---------舊值'+oldval);
    }
  }
computed 計算屬性

注意:只要是組件中有任何數(shù)據(jù)發(fā)生了改變,那么所有計算屬性就都會被重新計算。

// 計算屬性aPlus,在腳本中可通過this.aPlus來引用,在模板中可通過{{ aPlus }}來插值
  computed = {
      aPlus () {
          return this.a + 1
      }
  }
props傳值

靜態(tài)傳值
父組件 ===> 子組件
只能傳遞String字符串類型

在父組件template模板部分的組件標簽中,使用子組件props對象中所聲明的屬性名作為其屬性名來接收父組件傳遞的值。
<child title="mytitle"></child>

// child.wpy
props = {
    title: String
};

onLoad () {
    console.log(this.title); // mytitle
}

只顯示兩行,多余使用省略號

text-overflow: ellipsis;
display: box;
display: -webkit-box;
 -webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;

$emit 子傳父

// 比如有一個輸入彈框組件,點擊確定時把輸入的值傳出來;
    confirm() {
      // 輸出值傳遞給父組件
      this.$emit('getInputModalValue', this.value)
    }
    // 使用這個組件的頁面中在events里接收事件 getInputModalValue 
    events = {
      'getInputModalValue': (value, $event) => {
        console.log(`${this.$name} receive ${$event.name} from ${$event.source.$name}`)
        // value 即為傳出來的值
      }
    }

實時更新子組件數(shù)據(jù)

如果每次進入父頁面 , 都要更新子組件數(shù)據(jù) , 需要在父組件onShow中傳值到子組件
每次進入父組件 
在onShow中 通過事件傳值到子組件
本地存儲

video 標簽巨坑

ios與Android兼容性
1. 不能添加 page-gesture 屬性,否則在ios下不能滑動

標題欄加載反饋```

wepy.showNavigationBarLoading()
wepy.hideNavigationBarLoading()

**注意點:**
1. page高度  使用`wepy.getSystemInfo` > `e.screenHeight`

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容