微信小程序常用api

一、获取系统信息

onLoad(options) {
  console.log( wx.getSystemInfoSync());
},

 二、网络请求

   wx.request({
      // 请求的地址如果一http开头直接用url不是http开头添加我们 baseUrL
      url: url,
      method: option.method || "GET", //请求的方法 默认get
      data: option.data, //post出入的参数
      header,
      success(res) {
        // 请求成功
        resolve(res.data);
      },
      fail(err) {
        // 04 对错误进行处理
        wx.showToast({
          title: "加载失败",
          icon: "none"
        })
        // 请求失败
        reject(err);
      },
      complete() {
        // 关闭加载提示
        wx.hideToast();
      }
    })

三、下载文件

wxml:
<image src="{
   
   {pic}}" bindtap="downPic" mode="aspectFill"></image>


js:
  data: {
    pic:"https://tse1-mm.cn.bing.net/th/id/OIP-C.n0_p3rYRuofABd3XudbZnAHaEo?        
    pid=ImgDet&rs=1",
},

downPic(){
    wx.downloadFile({
      url: this.data.pic,
      success(res){
        console.log(res);
        // 把临时文件保存到相册（需要用户授权）
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(){
            // 提示保存成功
            wx.showToast({
              title: '下载图片成功',
              icon:"none",
            })
          }
        })
      }
    })
  },

四、上传文件

wxml:
<image src="{
   
   {pic}}" bindtap="downPic" mode="aspectFill"></image>
<button type="warn" bindtap="upImg">上传图片</button>

js:
  upImg(){
    var thta=this;
    //选择媒体
    wx.chooseMedia({
      count:1, //媒体数量
      success(res){
        console.log(res);
        //获取选择的第0个图片临时地址
        var temFile=res.tempFiles[0].tempFilePath;
        wx.uploadFile({
          filePath: temFile,
          name:'file',
          url:'http://xxx.com/ajax/file.php',
          success:res=>{
            console.log(res);
            //转换为js对象
            var data=JSON.parse(res.data);
            //更新图片信息
            thta.setData({pic:"http://xxx.com"+data.pic})
          }
        })
      }
    })
  },

五、界面

1.wx.showModal模态框

wx.showModal({
  title: '需要观看广告才能解锁',
  content: '每天试用2次'
})

2.wx.showToast提示

    wx.showToast({
      title: '你好！',
      icon: 'none',
    })

3.wx.showLoading 加载提示

 wx.showLoading({
      title: '加载中...',
    })
    setTimeout(() => {
      wx.hideLoading()
    }, 2000)

4.wx.setNavigationBarTitle标题栏文本

    wx.setNavigationBarTitle({
      title: 'api讲解',
    })

5.wx.setNavigationBarColor标题颜色

    wx.setNavigationBarColor({
      backgroundColor: '#000000',
      frontColor: '#ffffff',
      animation:{
        duration:400,
        timingFunc:'easeIn',
      }
    })

六、获取用户信息

wxml:
<view wx:if="{
   
   {userInfo.nickName}}">
  <image style="width: 100px;height: 100px;" src="{
   
   {userInfo.avatarUrl}}"></image>
  <view>{
   
   {userInfo.nickName}}</view>
</view>

js:
  getUser(){
    var that=this;
    wx.getUserProfile({
      desc: '需要获取您的昵称',
      success:res=>{
        console.log(res);
        //更新本地用户信息
        that.setData({"userInfo":res.userInfo});
        //存储用户信息到本地
        wx.setStorageSync('userInfo', res.userInfo);
      }
    })
  },
 onLoad(options) {
    //本地获取用户信息
    var userInfo=wx.getStorageSync('userInfo')||{};
    //更新用户信息
    this.setData({userInfo});
  },