微信小程序常用api使用

        小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。本文提及的案例为小程序搭建时常用种类，如需全面了解，可查阅官方文档（官网->首页->文档）。注意，查阅搜索时要输入api全称。

一、生命周期

1.1 小程序的生命周期

        小程序生命周期，在小程序根目录下app.js文件里设置。每个小程序都需要在 app.js 中调用 App 方法注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。

        onError 小程序发送错误，用于提示与重启；

        onHide 后台运行，用于停止播放；

        onShow 前台展示，用于恢复播放；

        onLaunch 页面启动，用于本地存储，系统信息获取，登录获取code等。

App({
  onError(){
    console.log("小程序生命周期：onError小程序发送错误")
  },
  onHide(){
    console.log("小程序生命周期：onHide小程序后台运行")
  onShow(){
    console.log("小程序生命周期：onShow小程序前台展示")
  },
  onLaunch() {
    console.log("小程序生命周期：onLaunch小程序页面启动")
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null,
    num:5
  }
})

1.2  页面生命周期

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

        onReady 第一次渲染完成；

        onShow页面前台显示；

        onHide页面后台运行；

        onUnload页面页面被卸载；

        固定回调函数有：onPullDownRefresh下拉属性、onReachBottom上拉触底、onShareAppMessage右上角分享、onShareTimeLine 分享到朋友圈、onPageScroll 当页面滚动时、onTabItemTap 页面底部栏被点击等

.js文件

Page({
  data: {
    showtop:false
  },
  onLoad(options) {
    console.log("页面生命周期：onLoad加载")
  },
  onReady() {
    console.log("页面生命周期：onReady第一次渲染完成")
    //1.操作节点（没有window，document.getElsment,document）
    //创建一个选择器
    const query=wx.createSelectorQuery();
    //选中h1节点，获取它的边界
    query.select(".h1").boundingClientRect();
    //获取窗口的位置信息
    query.selectViewport().scrollOffset();
    //执行命令返回结果
    query.exec(function(res){
      //获取元素的边界信息，bottom,top,right,left,height,width
      console.log(res[0]);
      //窗口信息，scrollHeight,scrollLeft,scrollWidth,scrollTop
      console.log(res[1]);
    })

  },
  onShow() {
    console.log("页面生命周期：onShow页面前台显示")
  },
  // onShareTimeline
  onShareTimeline(){
    
  },
  onHide() {
    console.log("页面生命周期：onHide页面后台运行")
  },
  onUnload() {
    console.log("页面生命周期：onUnload页面页面被卸载")

  },
  onPullDownRefresh() {

  },
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    //默认以当前页面的截图
    //实际中可以网络请求一个数组，从数组随机的获取一组参数
    return {
      title:"送你50元现金",
      path:"/pages/yidian/yidian",
      imageUrl:"图片路径"
    }
  },
  //分享到朋友圈
 
  onPageScroll(e){
    //当页面滚动距离大于100时显示回到顶部
    if(e.scrollTop>100){
      this.setData({showtop:true});
    }else{
      this.setData({showtop:false});
    }
  },
  goTop(){
    //页面滚动到0的位置，时间为600毫秒
    wx.pageScrollTo(
      {
        duration:600,
        scrollTop:0,
      })
  }
})

.wxml文件

<view class="h1">
  页面的生命周期
</view>
<navigator url="/pages/home/home">home</navigator>
<view>
  <navigator url="/pages/home/home" open-type="redirect">首页-redirect </navigator>
</view>
<view wx:for="{{100}}" wx:key="index">
  {{item+1}}
</view>
<view class="showtop" wx:if="{{showtop}}" bindtap="goTop">
  TOP
</view>

 二、微信内置api

2.1 基础api

        wx.getSystemInfoAsync()同步获取系统信息，一般常用到的系统信息有statusBarHeight状态栏高度、windowWith/Height可用窗口的宽/高、safeArea安全区域、model手机型号、system系统 iOS/Android、batteryLevel电量等。

         路由api，常用到有wx.navigateTo({}) 跳转、wx.redirectTo()重定向、wx.switchTab()切换底部栏、wx.navigateBack()返回等。

2.2 网络请求

        wx.request()，参数及含义：url请求地址、data数据（post）、timeout超时、header请求头 通常添加contentType Authorization token、method方法、success成功的回调函数、fail失败的回调函数、complete 无论成功或失败都会执行（通常会结束加载提示）等。

wx.request({
      url:url,
      method:option.method,//请求的方法，默认为get
      data:option.data,
      header,
      success(res){
        //请求成功
        resolve(res.data);
      },
      fail(err){
        //04对错误进行处理
        wx.showToast({
          title: '加载失败',
          icon:"none"
        })
        //请求失败
        rejects(err);
      },
      complete(){
        //关闭加载提示
        wx.hideToast();
      }
    })

2.3  文件下载与上传

        wx.downloadFile() 下载文件；

        wx.upLoadFile() 上传文件（图片）。

.js文件

page({
data: {
    pic:"https://img1.baidu.com/it/u=3176572196,1731961520&fm=253&fmt=auto&app=138&f=JPEG?w=749&h=500"
  },
upFile(){
    var that=this;
    //选择媒体
    wx.chooseMedia({
      count:1,//媒体数量
      success(res){
        console.log(res);
        //获取选择的第0个图片的临时地址
        var tempFile=res.tempFiles[0].tempFilePath;
        wx.uploadFile({
          filePath: tempFile,
          name: 'file',
          url: 'http://dida100.com/ajax/file.php',
          success:res=>{
            console.log(res);
            //转换为json对象
            var data=JSON.parse(res.data);
            //更新图片信息
            that.setData({pic:"http://dida100.com"+data.pic})
          }
        })
      }
    })
  },
  downPic(){
    wx.downloadFile({
      url: this.data.pic,
      success(res){
        console.log(res);
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(){
        //提示保存成功
            wx.showToast({
              title: '下载成功',
              icon:"none"
            })
          }
        })
        
      }
    })
})

 .wxml文件

<view>
  wx.downloadFile()下载文件
</view>
<image src="{{pic}}" bindtap="downPic" mode="aspectFill"/>
<button type="warn" bindtap="upFile">上传文件</button>

2.4 界面

     wx.showModal 显示模态框；

     wx.showToast 显示提示，icon的类型有success、 fail、 err、 none；

     wx.showLoading显示加载；

     wx.setNavigationBarTitle({})设置页面顶部栏标题。

showTip(){
    wx.setNavigationBarTitle({
      title: 'api讲解',
    })
    wx.showLoading({
      title: '加载中',
    })
    setTimeout(()=>{
      wx.hideLoading()
    },1000)
    wx.showToast({
      title: 'hello',
      icon:"none"
    })
    wx.showModal({
      title:"需要观看广告",
      content:"每天试用两次"
    })
  },

2.5 获取用户信息

        wx.getUserProfile()获取用户信息。

三、button开放能力

        内置组件button有一个open-type属性，值类型为string，常用到的合法值有：share触发用户转发、getPhoneNumber获取用户手机号、getUserInfo获取用户信息、chooseAvatar获取用户头像等。