小程序开发：内置的方法事件 api

旧城等待， 2023-01-02 15:28 72阅读 0赞

小程序内封装的api包括：数据请求，路由，动画效果，缓存，位置，画布等等；

## **1. 基础：** ##

获取手机型号，地理位置，权限等一些信息；  
[点击查看文档详情][Link 1]

console.log(wx.getSystemInfoSync()) // 可以查看都有哪些属性
    wx.getSystemInfoSync().model  // 获取手机型号

## **2.界面** ##

\*\*2.1 交互：\*\*包含消息提示 toast，加载中load，  
[点击查看文档详情][Link 2]  
以wx.showLoading() 为例

onload: function(){ 
    	wx.showLoading({ 
    	  title: '加载中',
    	})
    	setTimeout(function () {  // 数据请求到了以后进行清除
    	  wx.hideLoading()
    	}, 2000)
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]

## **3.路由** ##

之前路由都是在 navigator标签内跳转，默认的navigat不能跳转tabber；  
使用api进行跳转：

wx.navigateTo({  // 不能跳转 tabber
      url: 'test?id=1',
      events: { 
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        acceptDataFromOpenedPage: function(data) { 
          console.log(data)
        },
        someEvent: function(data) { 
          console.log(data)
        }
        ...
      },
      success: function(res) { 
        // 通过eventChannel向被打开页面传送数据
        res.eventChannel.emit('acceptDataFromOpenerPage', {  data: 'test' })
      }
    })
    wx.switchTab({  // 可以跳转 tabber 但是不能传参
      url: '/index'
    })
    wx.reLaunch({  // 可以跳转 tabber 可以传参
      url: 'test?id=1'
    })

## **4，请求** ##

wx.request({ 
      url: 'test.php', //仅为示例，并非真实的接口地址
      data: { 
        x: '',
        y: ''
      },
      header: { 
        'content-type': 'application/json' // 默认值
      },
      success (res) { 
        console.log(res.data)
      }
    })

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/base/system/system-info/wx.getSystemInfoSync.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY4NDM1Nw_size_16_color_FFFFFF_t_70]: /images/20221119/2eec69d669c94e6aa0df681af07cff10.png