微信小程序中app.js文件组件api

Posted 2021-06-30 苦海123

app.js文件：

每个小程序都需要在app.js中调用 App 方法注册小程序实例.

	App({//App实例化，整个小程序只有一个App实例，全部页面共享
        onLaunch: function () {
          //onLaunch小程序启动之后触发  
        },
         onShow: function () {
          //onShow小程序启动，或从后台进入前台显示时触发 
        },
        onHide: function () {
          //onHide小程序从前台进入后台时触发 
        },
        onError: function () {
          //onError小程序发生脚本错误或 API 调用报错时触发 
        },
        onPageNotFound: function () {
          //onPageNotFound小程序要打开的页面不存在时触发 
        },
        onUnhandledRejection: function () {
          //onUnhandledRejection小程序有未处理的 Promise 拒绝时触发 
        },
        onThemeChange: function () {
          //onThemeChange系统切换主题时触发  
        },
        //可自定义天剑任意类型函数或变量，用this可访问，如:
        names:'jack'
    })

页面中的js文件：

对于小程序中的每个页面，都需要在页面对应的 js文件中使用page进行注册页面，指定页面的初始数据、生命周期回调、事件处理函数等。

	Page({//page为页面构造器，生成一个页面
      data: {//data定义初始化数据，会和wxml使用{{text}}渲染
        text: "hello"
      },
      options: {
        //options定义页面的组件选项
      },
      onLoad: function() {
        // 页面创建时执行
      },
      onShow: function() {
        // 页面出现在前台时执行
      },
      onReady: function() {
        // 页面首次渲染完毕时执行
      },
      onHide: function() {
        // 页面从前台变为后台时执行
      },
      onUnload: function() {
        // 页面销毁时执行
      },
      onPullDownRefresh: function() {
        // 触发下拉刷新时执行
      },
      onReachBottom: function() {
        // 页面触底时执行(上拉)
      },
      onShareAppMessage: function () {
        // 页面被用户分享时执行
      },
      onShareTimeline: function () {
        // 页面被用户分享到朋友圈时执行
      },
      onAddToFavorites: function () {
        // 页面被用户收藏时执行
      },
      onPageScroll: function() {
        // 页面滚动时执行
      },
      onResize: function() {
        // 页面尺寸变化时执行
      },
      onTabItemTap(item) {
        // tab 点击时执行
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
      },
      // 事件响应函数（自定义函数名，如：viewTap）
      viewTap: function() {
        this.setData({//setData重新设置值
          text: 'word'
        }, function() {
          //重新赋值后执行的回调函数
        })
      },
      // 自由数据
      customData: {
        hi: 'MINA',
        lucky:'jack'
      }
    })

behaviors:

behaviors 可以用来让多个页面有相同的数据字段和方法,如：

	 //behavior.js中：
    module.exports = Behavior({
      data: {
        sharedText: '页面共用字段'
      },
      methods: {
        sharedMethod: function() {
          //共用方法
        }
      }
    })
    
    // page.js中：
    var myBehavior = require('./behavior.js')
    Page({
      behaviors: [myBehavior],//使用behaviors接收数据
      onLoad: function() {
        console.log(this.data.sharedText)//通过this拿到数据
      }
    })

Component：

Component构造器可用于定义组件，调用 Component构造器时可以指定组件的属性、数据、方法等，文档推荐：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html，如：

	Component({
      behaviors: [],
      // 属性定义（详情参见下文）
      properties: {
        myProperty: { // 属性名
          type: String,
          value: ''
        },
        myProperty2: String // 简化的定义方式
      },
      data: {}, // 私有数据，可用于模板渲染
      lifetimes: {
        // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
        attached: function () { },
        moved: function () { },
        detached: function () { },
      },
      // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
      attached: function () { }, // 此处attached的声明会被lifetimes字段中的声明覆盖
      ready: function() { },
      pageLifetimes: {
        // 组件所在页面的生命周期函数
        show: function () { },
        hide: function () { },
        resize: function () { },
      },
      methods: {
        onMyButtonTap: function(){
          this.setData({
            // 更新属性和数据的方法与更新页面数据的方法类似
          })
        },
        // 内部方法建议以下划线开头
        _myPrivateMethod: function(){
          // 这里将 data.A[0].B 设为 'myPrivateData'
          this.setData({
            'A[0].B': 'myPrivateData'
          })
        },
        _propertyChange: function(newVal, oldVal) {
        }
      }
    })

组件：

小程序提供了丰富的组件给开发者，开发者可以组合各种组件合成自己的小程序。就像 HTML的div, p 等标签一样，如：

<map longitude="深圳经度" latitude="深圳纬度" bindmarkertap="点击地图时触发的函数" style='width:200px;height:200px' class='mapbox'></map><!--map地图组件，呈现一个地图到页面上,可添加属性，如组件内-->

更多组件文档推荐：https://developers.weixin.qq.com/miniprogram/dev/component/

api:

为了让开发者可以方便的调起微信提供的能力，例如获取用户信息、微信支付等，小程序提供了很多 API 给开发者去使用,如获取地理信息：

	wx.getLocation({
      type: 'wgs84',
      success: (res) => {
        var latitude = res.latitude // 纬度
        var longitude = res.longitude // 经度
      }
    })

更多API推荐阅读：https://developers.weixin.qq.com/miniprogram/dev/api/

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[e-mail]联系笔者删除。
笔者：苦海