Bootstrap

微信小程序知识点

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;
}
    
    

 

;