微信小程序知识点

1、:host相当于组件本身（比如你组件名叫 v-name 然后这个组件里面的:host就是v-name
）
:host {//这个是组件本身（比如组件名为v-name）v-name的样式
  color: yellow;
}
相当于
v-name{
color: yellow;
}
2、比如app.wxss（公共样式）里面有个 .section ,组件也有，组件不开放公共样式的话就只用组件里的样式了。
3、在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name="attr value"），应用于数据绑定时采用驼峰写法（attr="{{propertyName}}"）。
4、 that.setData({
         'A[0].B': 'myPrivateData'
      })=====相当于
    (   that.replaceDataOnPath( ['A', 0, 'B'], 'myPrivateData'); // 替代数据：这里将 data.A[0].B 设为 'myPrivateData';‘A’表示数组本身,0表示索引位置,‘B’表示数组子元素中的某一对象；
     that..applyDataUpdates();//更新数据
     )
5、
bug : 对于 type 为 Object 或 Array 的属性，如果通过该组件自身的 this.setData 来改变属性值的一个子字段，则依旧会触发属性 observer ，且 observer 接收到的 newVal 是变化的那个子字段的值， oldVal 为空， changedPath 包含子字段的字段名相关信息。
6、   observer: function (newVal, oldVal, changedPath) {
        this._propertyChange(newVal, oldVal, changedPath)
      }
      methods: {
    _propertyChange: function (newVal, oldVal, changedPath) {
      console.log(newVal);
      console.log(oldVal);
      console.log(changedPath);
    }
  }
  ======相当于=====
 observer: function (newVal, oldVal, changedPath) {
        console.log(newVal);
        console.log(oldVal);
        console.log(changedPath);
      }
7、组件间通信
组件间的基本通信方式有以下几种。
    WXML 数据绑定：用于父组件向子组件的指定属性设置数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还可以在数据中包含函数）。具体在 组件模版和样式 章节中介绍。
    事件：用于子组件向父组件传递数据，可以传递任意数据。
    如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以直接访问组件的任意数据和方法。
    注：this.selectComponent方法的用法：
    index.wxml界面：
    <!-- 引用组件的页面模版 -->
<view>
  <my-component bindmyevent="myEventListener" id="main">
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view>这里是插入到组件slot中的内容</view>
  </my-component>
</view>
index.js文件：
Page({
  data: {
  },
  onReady: function () {
    var main=this.selectComponent("#main");
    console.log(main.data.on);
  }
})
8、dataset
在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

示例：

<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

Page({
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})
9、(1) ./当前目录
     (2)  ../上级目录
 10、 App() 与behaviors组件间状态共享的区别：
        （1）① App() 必须在 app.js 中调用，必须调用且只能调用一次（实例一次，比如如果两个页面都调用了App()，其中的一个参数在一个页面里修改，那会导致全部页面调用的数据都修改了）。不然会出现无法预期的后果。
        ②App（）里可以调用方法和属性，在 globalData:{}里写方法和属性。
        （2）①behaviors 是用于组件间代码共享的特性（可以实例多次，相当于代码复制。比如两个组件调用了该behaviors 文件，相当于两个实例，如果其中一个实例中的参数改变，另一个组件里的实例的参数不会变化的），每个 behavior 可以包含一组属性、数据、生命周期函数和方法，组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。每个组件可以引用多个 behavior 。 behavior 也可以引用其他 behavior 。具体功能参考api文档。
11、父组件与子组件之间的通信：（1）子组件传递数据给父组件时：一般情况下是会触发某种事件的，导致数据（在子组件里）变化的：你每次改值的时候要触发组件里的自定义组件事件函数给父级监听。
例如：index.wxml页面：
<list listdata="{{listdata}}"   bind:addData="adddata"></list>
<addBtn listdata="{{listdata}}"></addBtn>
addBtn.wxml页面：
<view>
    <button catchtap='add'>添加</button>
</view>
addBtn.js:
Component({
  options: {
  },
  properties: {
    listdata: {
      type: Array, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
      value: [], // 属性初始值（可选），如果未指定则会根据类型选择一个
      observer: function (newVal, oldVal, changedPath) {
        var that = this;
        that.setData({
          listdata: newVal
        })
      }
    }
  },
  methods: {
    add:function(e){
      var that = this;
      console.log(that.data.listdata);
    }
  }
})
addBtn.json:
{
    "component": true,
    "usingComponents": {}
}
list.wxml:

<view>
    <ul>
        <li wx:for="{{listdata}}" wx:key="index">
        {{item}}<text catchtap='adddata' data-value="{{item}}" data-index="{{index}}">+</text>
        </li>
    </ul>
</view>
list.json:
{
  "component": true,
  "usingComponents": {
    
  }
}
list.js:
Component({
options: {
},
properties: {
  listdata:{
    type: Array, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
    value:[], // 属性初始值（可选），如果未指定则会根据类型选择一个
    observer: function (newVal, oldVal, changedPath) {
        var that=this;
        that.setData({
          listdata: newVal
        })
    }
  }
 },
methods: {
  adddata:function(e){
    var index=e.currentTarget.dataset.index;
    var valuetxt = e.currentTarget.dataset.value;
    var that =this;
    var curlistdata={
      index:index,
      curdata: valuetxt
    }
    this.triggerEvent('addData', curlistdata);
  }
}
})
index.json:
{
    "usingComponents": {
      "list": "/components/list/list",
      "addBtn": "/components/addBtn/addBtn"
    }
}
index.js:
Page({

  /**
   * 页面的初始数据
   */
  data: {
    listdata:[11,12,16]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },
  adddata:function(e){
      var index=e.detail.index;
      var datavalue = e.detail.curdata+1;
      var that=this;
      var listdata = that.data.listdata;
      listdata[index] = datavalue;
      that.setData({
        listdata
      })
    console.log(that.data.listdata);
  }
})
12、去除button自带的的边框：
button::after{
    border: none;
}