微信小程序 wepy

代码规范

注意: page中属性和值使用等号连接

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

关于window设置均设置在config中

官网
navigationBarTitleText--导航栏标题文字内容
navigationBarBackgroundColor--导航栏背景颜色，如"#000000"

数据.函数 存放位置

• 所有数据存放在data对象中
• 所有函数存放在methods对象中
• 生命周期函数位置 与 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
    };

page属性

watch 数据监视器

监听器在watch对象中声明，类型为函数，函数名与需要被监听的data对象中的属性同名，每当被监听的属性改变一次，监听器函数就会被自动调用执行一次

watch = {
    inpval(newval,oldval){
      console.log('新值'+newval+'---------旧值'+oldval);
    }
  }

computed 计算属性

注意:只要是组件中有任何数据发生了改变，那么所有计算属性就都会被重新计算。

// 计算属性aPlus，在脚本中可通过this.aPlus来引用，在模板中可通过{{ aPlus }}来插值
  computed = {
      aPlus () {
          return this.a + 1
      }
  }

props传值

静态传值
父组件 ===> 子组件
只能传递String字符串类型

在父组件template模板部分的组件标签中，使用子组件props对象中所声明的属性名作为其属性名来接收父组件传递的值。


// 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 即为传出来的值
      }
    }

实时更新子组件数据

如果每次进入父页面 , 都要更新子组件数据 , 需要在父组件onShow中传值到子组件
每次进入父组件 
在onShow中 通过事件传值到子组件
本地存储

video 标签巨坑

ios与Android兼容性
1. 不能添加 page-gesture 属性,否则在ios下不能滑动

标题栏加载反馈```

wepy.showNavigationBarLoading()
wepy.hideNavigationBarLoading()

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