小程序学习（11）：在自定义组件中，获取view高度，获取canvas对象

小程序学习（11）：在自定义组件中，获取view高度，获取canvas对象

2019年9月25日

1.获取view高度

首先，在wxml中的代码都是一样的

<view id="redd" class="red" />

这里的css是

.red{
  width: 100%;
  height: 500rpx;
  background-color: red
}

不同的是js方法里面

1.1正常页面的js

我放到页面加载函数中了，方便观察

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var query = wx.createSelectorQuery();
    query.select('#redd').boundingClientRect()
    query.exec(function (res) {
      console.log(res);
    })
  },

获得

1.2组件中

js代码在组件中复制是不行的，会获取不到
改成了这样，多了一个.in(this)
这样就能获取了’

  /**
   * 生命周期函数--组件挂载后执行
   */
  ready: function () {
    var query = wx.createSelectorQuery().in(this);
    query.select('#redd').boundingClientRect()
    query.exec(function (res) {
      console.log(res);
    })
  },

这是返回值

2.获取canvas对象

2.0页面的wxml

<canvas canvas-id='customCanvas' />

2.1在正常页面中

var ctx = wx.createCanvasContext('customCanvas');

2.2在组件中

var ctx = wx.createCanvasContext('customCanvas',this);