微信小程序学习笔记

小程序相对路径和绝对路径

　　以/开头的是绝对路径如何引用组件

小程序尺寸

　　1px = .5rpx

小程序引用组件

{
  "usingComponents": {
    "v-item": "/components/rank/item/index"
  }
}

小程序全局样式

　　组件继承全部font和color样式

　　page页可以继承全局样式

事件绑定

<text bind:tap="bindConfirm" data-q="{{item}}">{{item}}</text>

　　事件绑定和冒泡

　　　　bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

父组件向子组件传值

<v-item wx:for="{{singer}}" wx:key="{{id}}" singer="{{item}}" />

自定义方法，通俗的将就是子向父组件传值

this.triggerEvent('myevent', myEventDetail, myEventOption)

<v-com bind:like='myevent' />

　　获取参数　　

　　　　const behavior = event.detail.behavior || ''

加载更多

onReachBottom

HTTP请求，这里把微信小程序wx.request封装成Promise

  request(url, data, method = 'GET') {
    return new Promise(function(resolve, reject) {
      return wx.request({
        url: config.baseUrl + url,
        data,
        method,
        success: function(res) {
          resolve(res.data)
        },
        fail: function(err) {
          reject(err)
        }
      })
    })
  }

Iinput标签

<input value='{{q}}' bindconfirm='bindConfirm' focus='{{true}}' class='input' placeholder='搜索歌曲,歌手'></input>

Behavior行为，类似mixins

const  pageBehavior = Behavior({
  data: { },

  methods: { }

})

export default pageBehavior

组件引用

　　behaviors:['...']　　

样式继承

　　组件只能继承font和color

　　页面可以继承全局样式

onLoad钩子函数向服务器发送请求

 

setData

　　如果只是通过this.data.xxx是不会改变页面中的数据

　　只有通过setData才能改变页面中的数据

组件properties的observer监听数据变化

properties: {
    index: {
      type: Number,
      observer: function(newVal, oldVal) {
        let val = newVal < 10 ? '0' + newVal : newVal
        this.setData({
          _index: val
        })
      }
    }
  },

页面跳转

wx.navigateTo({
  url: `/pages/book-detail/book-detail?bid=${this.data.book.id}`,
})


const bid = options.bid

插槽

 <text class='nums' slot="after">{{'+' + item.nums}}</text>

 <slot name="after"></slot> 

  options:{
    multipleSlots: true
  }