小程序微信小程序常用api的使用，附案例（建议收藏）

Posted 2023-04-03 前端小媛

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序微信小程序常用api的使用，附案例（建议收藏）相关的知识，希望对你有一定的参考价值。

1- 前言

这是微信小程序常用的几个API，特地总结一下：

2- 界面

2.1 wx.setNavigationBarTitle() 标题栏文本

    wx.setNavigationBarTitle(
      title: '微信api',
    )

2.2 wx.showLoading() 加载提示和 wx.hideLoading() 停止提示

    wx.showLoading(
      title: '我不会停的',
    )
   // 显示loading 提示框，需主动调用 wx.hideLoading才能关闭提示框
 	  setTimeout(() => 
      wx.hideLoading()
    , 3000)

2.3 wx.showToast() 提示

   wx.showToast(
    title: '我要加载',
     icon:'loading'
    )

2.4 wx.showModal() 模态框对话框

 wx.showModal(
      title: '我是showModal',
      content: 'hahaha',
      // complete: (res) => 
      //   if (res.cancel) 
      //   
      //   if (res.confirm) 
      //   
      // 
    )

2.5 wx.setNavigationBarColor() 页面导航条颜色

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

2.6 总结

wxapi.wxml

<view>
  界面api
  <button> wx.setNavigationBarTitle() 标题栏文本</button>
  <button> wx.showLoading() 加载提示</button>
  <button> wx.hideLoading() 停止提示</button>
  <button> wx.showToast() 提示</button>
  <button> wx.showModal() 模态框</button>
  <button type="primary" bindtap="showTip">提示</button>
</view>

wxapi.js 代码

 showTip() 
    wx.setNavigationBarColor(
      frontColor: '#ffffff',
      backgroundColor: '#ff6600',
      animation: 
        duration: 400,
        timingFunc: 'easeIn'
      
    )
    wx.setNavigationBarTitle(
      title: '微信api',
    )
    // wx.showLoading(
    //   title: '我不会停的',
    // )
    // setTimeout(() => 
    //   wx.hideLoading()
    // , 3000)
    // wx.showToast(
    //   title: '我要加载',
    //   icon:'loading'
    // )
    wx.showModal(
      title: '我是showModal',
      content: 'hahaha',
      // complete: (res) => 
      //   if (res.cancel) 
      //   
      //   if (res.confirm) 
      //   
      // 
    )
  ,

界面

3- 用户头像

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

wxapi.wxml

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

wxapi.js

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

代码截图

4- 上传与下载

4.1 wx.downloadFile()下载文件

4.2 wx.saveImageToPhotosAlbum()保存图片到相册

在这里插入代码片

4.3 wx.uploadFile()上传文件

4.4 wx.chooseMedia()选择图片或者视频

4.5 上传图片

wxapi.wxml

  <button>wx.downloadFile()下载文件</button>
  <button> wx.saveImageToPhotosAlbum()保存图片到相册</button>
  <button type="primary" bindtap="downImg">下载图片</button>
  <view>
    <button bindtap="upImg">上传图片</button>
  </view>

wxapi.js

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

案例截图

4.6 下载图片

wxapi.wxml

<view>
    <button bindtap="upImg">上传图片</button>
  </view>
  <button>wx.uploadFile()上传文件</button>
  <button>wx.chooseMedia()选择图片或者视频</button>
  <image src="pic" module="aspectFill" bindtap="downImg" />

wxapi.js

  upImg()
    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);
            console.log("为转换前",res.data)
              //转化为js对象
            var data=JSON.parse(res.data)
            console.log("转换后",data)
              //更新图片信息
            that.setData(pic:"http://dida100.com"+data.pic)
          
        )
      
    )
  ,

代码截图

5- 系统信息

5.1 wx.getSystemInfo() 获取系统信息

  onLoad(options) 
    wx.getSystemInfo(
      success(res) 
        console.log(res)
      
    )

5.2 wx.getSysteminfoSync() 获取系统信息

statusBarHeight 状态栏高度
windowWidth 可用窗口的宽
windowHeight 可用窗口的高
safeArea 安全区域
model 手机型号
batteryLevel 电量
system 系统ios/android

wx.getSystemInfoAsync(
  success (res) 
    console.log(res.model)
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
    console.log(res.language)
    console.log(res.version)
    console.log(res.platform)
  
)

6- 网络请求

6.1 wx.request() 发起 HTTPS 网络请求

7- 路由

7.1 wx.navigateTo()跳转

7.2 wx.redirectTo()重定向

7.3 wx.switchTab() 切换底部栏

7.4 wx.navigateBack()返回

往期传送门

【微信小程序】小程序使用详细教程（建议收藏）

一篇文章带你入门《微信小程序》建议收藏

文章目录

一、了解微信小程序的概念

微信小程序 (Wechat Mini Program) ，是一种不需要下载安装即可使用的应用，用户使用微信 “扫一扫” 或 “搜一搜” 即可打开应用。即用即走的优点，使得微信小程序取代了许多App (应用程序) 。
微信小程序应用的领域非常多，包括教育、媒体、交通、房地产、生活服务、旅游、电商、餐饮、民政民生、科技等多个领域。微信小程序以快捷、低成本、微信庞大的用户量优势，为电商行业实现了更多的盈利，为消费者带来了更好的服务。微信小程序背后蕴藏着巨大的流量红利。因此，越来越多的企业和商家都开发了属于自己的小程序。

譬如，我们在微信界面下拉就可以看到我们经常使用的一些小程序，大家不要怕，我的码是绿色的

这里就有细心的小伙伴发现了，和一般在商店里下载的 APP 来说微信小程序还是有很多亮点的。比如微信小程序不占内存、无需下载、无需安装。

不过也有人在质疑，如今微信小程序这么好用，是不是能够彻底替代一切的APP呢 ❔❓
这里呢，小程序和APP各有特色，并不能取代所有APP，它们适用于不同需求的客户。但至少是能替代一部分 APP 的，比如那种不常用的但是又是必须要用的 APP 我就喜欢用小程序替代，但你说要在小程序上打把王者荣耀、和平精英，至少现在我觉得还不现实，毕竟成本摆在那