小小微信小程序api

一、概述

1. 小程序提供了很多实用的方法供开发者使用

2. 小程序全局对象是: wx

3. 所有的api都保存在 wx 对象中

 二、常用api

1. 界面交互

   1、显示消息提示框: wx.showToast()

   2、显示消息加载框: wx.showLoading()

   3、 关闭消息提示框: wx.hideToast()

   4、 关闭消息加载框: wx.hideLoading()

2. 路由跳转

   1、wx.navigateTo()

   2、wx.redirectTo()

   3、 wx.switchTab()

3. 网络请求

   wx.request()

4. 本地存储

   1、 wx.setStorage()

   2、 wx.setStorageSync()

   3、 wx.getStorage()

   4、wx.getStorageSync()

三、开放能力-获取用户信息

wx.getUserinfo()获取用户的信息（头像、昵称等），目前更换为wx.getUserProfile() api方法，每次请求都会弹出授权窗口，用户同意后返回userInfo，该接口用于替换wx.getUserInfo

注意：该接口每次触发不会弹窗：不管上次用户是拒绝还是统一，为了后期开发方便可以再用户同意后讲获取到的用户信息存入本地缓存供后期业务使用

获取用户头像和昵称

<view>开放能力</view>
<view>we.getUserProfile 获取用户信息</view>
<view wx:if="{{userInfo.nickName}}">
  <image src="{{userInfo.avatarUrl}}" mode="" style="width: 100px;height: 100px;" />
<view>{{userInfo.nickName}}</view>
</view>
<button wx:else size="minni" bindtap="getUser">获取用户信息</button>

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    var sys=wx.getSystemInfoSync()
    console.log(sys);
    var userInfo=wx.getStorageSync('userInfo')||{};
    //更新用户信息
    this.setData({userInfo})
  },
  getUser(){
    var that=this;
    wx.getUserProfile({
      desc: '需要获取您的昵称',
      success:res=>{
        console.log(res);
        //更新本地用户信息
        that.setData({"userInfo":res.userInfo})
        //存储用户信息到本地
        wx.setStorageSync('userInfo', res.userInfo)
      }
    })
  },

 

 

四、上传图片、或保存到相册

 

<view>网络</view>
<view>wx.request()网络请求</view>
<view>wx.downloadFile 下载文件</view>
<view>wx.saveImageToPhotosAlbum 保存图片到相册</view>
<view>wx.uploadFile 下载</view>
<view>wx.chooseMedia 选择图片或者视频</view>
<view>wx.chooseImage 从相册选择图片</view>
<image src="{{pic}}" mode="" bindtap="downPic" ></image>
<view>wx.downloadFile下载文件</view>
<button type="warn" bindtap="upImg">上传图片</button>

上传图片

 upImg(){
    var that=this;
    //选择图片
    //wx.chooseImage()
    //选择媒体
    wx.chooseMedia({
      count:1,//媒体数量
      success(res){
        console.log(res);
        //获取选择的第0个图片临时地址
        var tempFile=res.tempFiles[0].tempFilePath;
        wx.uploadFile({
          filePath: 'filePath',
          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"
            })
          }
        })
      }
    })
  },

五、api

1、事件监听 API

1. 事件监听 API 主要用来监听某些事件的触发
2. 以 on 开头

举例：

  wx.onWindowResize 就是用来监听窗口变化

2、同步 API

1. 同步 API 可以直接通过函数返回值直接获取，执行出错也会直接抛出异常
2. 以 sync 结尾

举例：

   wx.setStorageSync('key', data) 就是向本地存储写入数据

3、异步 API
异步 API 和我们同步 API 可以对照来看，我们同步时可以直接获取返回值，但是异步不可以，他需要回调函数接收

举例：

   wx.request 的返回是通过 success 回调成功，利用 fail 回调失败