组件生命周期函数

@Lifetime

组件自身的一些函数：在特殊的时间点或遇到一些特殊的框架事件时被自动触发

最重要的生命周期是 created、attached、detached ，包含一个组件实例生命流程的最主要的时间节点

created：组件实例刚刚被创建好时

attached：在组件完全初始化完毕、进入页面节点树

detached：在组件离开页面节点树后

lifetimes: {
    created: function () {},
    attached: function () {},
    detached: function() {}
}

封装地图组件 map

创建组件 - 目录、文件

地图组件结构 - 指定id和经纬度、中心点；绑定事件；其它略

<view class="map-wrap">
    <map class="map" id="my-map" longitude="{{longitude}}" latitude="{{latitude}}" show-location />
    <image class="center-img" src="/utils/center.png" mode="aspectFill" bind:tap="moveToLocation" />
</view>

地图组件逻辑 - 创建地图组件上下文变量，这里声明为页面全局变量，避免使用 this 引用

let mapCtx;
Component({})

地图组件逻辑的生命周期函数

lifetimes: {
    attached: function () {
        // 实例化地图组件上下文
        mapCtx = wx.createMapContext('my-map', this)
        // 获取当前位置
        wx.getLocation({
        type: 'gcj02',
        success: res => {
            this.setData({
                longitude: res.longitude,
                latitude: res.latitude
            })
        }
        })
    }
}

地图组件逻辑的数据 - 经纬度

longitude: '"",
latitude: ""

地图组件逻辑的方法 - 返回中心点方法

moveToLocation() {
    mapCtx.moveToLocation({})
}

样式 - 略