一起学习微信小程序api

最新推荐文章于 2024-04-18 00:05:49 发布

敲代码的小吉米

最新推荐文章于 2024-04-18 00:05:49 发布

阅读量1.7k

点赞数 3

文章标签：微信小程序学习小程序

本文链接：https://blog.csdn.net/promise466/article/details/127858606

版权

微信小程序api介绍

小程序API 是小程序开发的核心，通过 API 开发者可以获得微信底层封装的高级特性，如网络请求、文件操作、设备信息、地理定位、本地存储等。
小程序的 API 以全局对象 wx 为命名空间，格式为 wx.方法名()，可全局调用。

接下来我将会介绍几个常用的api api的基础、路由、网络请求、界面、用户信息、上传、下载、开放接口
介绍之前小编建议，想要掌握小程序api一定要学会阅读微信开发文档去使用！！！

api基础

wx.getSkylineInfoSync() 获取系统信息
windowHeight 可用窗口高
windowWidth 可用窗口宽
statusBarHeight 状态栏的高度
safeArea 在竖屏正方向下的安全区域
model 手机型号
system 操作系统及版本
benchmarkLevel 电量

我们可以在wxjs里获取一下wxml的系统信息

//wxml代码
<view class="title">基础</view>
<view>wx.getSystemInfoSync() 同步获取系统信息</view>

//wxjs代码
 //生命周期函数--监听页面加载
  onLoad(options) {
    var sys = wx.getSystemInfoSync();
    console.log(sys)
  },

详情可见图解
在这里插入图片描述

小程序路由

路由开发文档

程序是单页的，页面的切换本质上是局部更新，其实是由路由实现的。但是小程序的路由都默认封装好了，底部配置的菜单，navigator标签。

（路由小编在上篇文中有更详细的介绍）

wx.navigateTo({}) 跳转
- 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
wx.redirectTo()重定向
- 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
wx.switchTab() 切换底部栏
- 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
wx.navigateBack( ) 返回

<navigator url="/pages/home/home.js">home</navigator>
<navigator url="/pages/home/home.js" open-type="redirect">首页-redirect</navigator>

网络

1. 网络请求 wx.request（小编在上篇文章也有更详细的介绍）

这里小编强调几个常见的参数
url 请求的地址（必填）
data 数据（post）
header 请求头信息
timeout 超时
methods 方式 post | get | put |
success 成功回调函数
fail 接口调用失败的回调函数
complete 完成（成功和失败都会执行）会结束加载提示

2.下载 wx.downloadFile()

下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)，单次下载允许的最大文件为
200MB。

//wxml代码
<view class="title">wx.downloadFile 下载文件</view>
<view class="title">wx.saveImageToPhotosAlbum 保存图片到相册</view>
<image src="{{pic}}" mode="aspectFill" bindtap="downPic"></image>

//js代码
downPic(){
    wx.downloadFile({
      url: this.data.pic,
      success(res){
        console.log(res);
        // 把临时文件保存到相册(需要用户授权) 
        // 当点击下载时会弹出是否允许访问您的相册 同意则可下载
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success(){
            // 提示保存成功
            wx.showToast({
              title: '下载图片成功',
              icon:"none"
            })
          }
        })
      }
    })
  },

效果图
在这里插入图片描述

3.上传 wx.uploadFile
这里可以引用媒体相关的
wx.chooseImage 从相册选择图片
chooseMessageFile 选择图片或者视频

将本地资源上传到服务器。客户端发起一个 HTTPS POST 请求，其中 content-type 为 multipart/form-data。

//wxml代码
<button type="warn" bindtap="upImg">上传图片</button>
<view class="title">wx.uploadFile 上传</view>
<view class="title">wx.chooseMedia 选择图片或者视频</view>
<view class="title"> wx.chooseImage 从相册选择图片</view>

//js代码
 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: tempFile,
          name: 'file',
          url: 'http://dida100.com/ajax/file.php',
          success:res=>{
            console.log(res);
            // 转换为js对象
            var data = JSON.parse(res.data);
            // 更新图片信息
            that.setData({pic:"http://dida100.com"+data.pic})
          }
        })
      }
    })
  },

效果图
在这里插入图片描述

界面

介绍几个常用的 wx.showToast、wx.showModal 、wx.showLoading 、wx.setNavigationBarTitle 、wx.setNavigationBarColor
1. 交互

wx.showToast-显示消息提示框

//wxml代码
<button size="mini" bindtap="showTip">提示</button>

//js代码
showTip(){
    // setNavigationBarTitle 标题栏文本
    wx.setNavigationBarTitle({
      title: 'api讲解',
    })
    wx.showToast({
      title: '你好！',
      icon:"none"
    })
     },

效果图
在这里插入图片描述

wx.showModal 显示模态对话框

//wxml代码
<button size="mini" bindtap="showTip">提示</button>

//js代码
showTip(){
    // setNavigationBarTitle 标题栏文本
    wx.setNavigationBarTitle({
      title: 'api讲解',
    })
   
    wx.showToast({
      title: '你好！',
      icon:"none"
    })

效果图
在这里插入图片描述

wx.showLoading 显示 loading 提示框

//wxml代码
<button size="mini" bindtap="showTip">提示</button>

//js代码
showTip(){
    // setNavigationBarTitle 标题栏文本
    wx.setNavigationBarTitle({
      title: 'api讲解',
    })
    
    // wx.showLoading 加载提示
    wx.showLoading({
      title: '加载中...',
    })
    setTimeout(()=>{
      wx.hideLoading();
    },2000)
  },

效果图
在这里插入图片描述

2. 导航栏

//wxml代码
<button size="mini" bindtap="showTip">提示</button>

//js代码
showTip(){
    // setNavigationBarTitle 标题栏文本
    wx.setNavigationBarTitle({
      title: 'api讲解',
    })
    // setNavigationBarColor 设置导航栏的颜色
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#000000',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
   }

效果图
在这里插入图片描述

开放接口

1. wx.getUserProfile 用户信息

获取用户信息。页面产生点击事件（例如 button 上 bindtap 的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo

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

//js代码
 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)
      }
    })
  },

在这里插入图片描述
end…
文章每一步都可以跳转到官方文档方便查找
切记熟悉官方问答最重要！！！
希望文章能帮到正在学习的您
下期见~

敲代码的小吉米

关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
一起学习微信小程序api

小程序API 是小程序开发的核心，通过 API 开发者可以获得微信底层封装的高级特性，如网络请求、文件操作、设备信息、地理定位、本地存储等。小程序的 API 以全局对象 wx 为命名空间，格式为 wx.方法名()，可全局调用。接下来我将会介绍几个常用的apiapi的基础、路由、网络请求、界面、用户信息、上传、下载、开放接口介绍之前小编建议，想要掌握小程序api一定要学会阅读去使用！！！
复制链接

扫一扫