一. 写在开头

学习微信api,我们可以查阅微信官方学习文档API,由于里面内容很多，在这里我就总结了一些常用的api可供参考。

二. 微信api的介绍

1. 基础

wx.getWindowInfoSync()获取系统信息
（1）statusBarHeight 状态栏高度
（2） windowWidth 可用窗口的宽
（3） windowHeight 可用窗口的高
（4）safeArea 安全区域

（5）model 手机型号
（6）system 系统ios/android
（7） batteryLevel 电量

2. 路由（详细信息请看上一篇小程序文章）

（1）wx.navigateTo({}) 跳转
（2） wx.redirectTo()重定向
（3）wx.switchTab() 切换底部栏
（4） wx.navigateBack( ) 返回

3.界面

交互
(1)wx.showModal 模态框
(2)wx.showToast 提示
(3)wx.showLoading加载提示
(4) wx.setNavigationBarTitle 标题栏文本

1.js代码

showTip(){wx.setNavigationBarTitle({title: 'api讲解',})wx.setNavigationBarColor({frontColor:'#ffffff',backgroundColor:"#ff0000",animation:{duration:400,timingFunc:"easeIn"}})// wx.setNavigationBarColor({//     frontColor:'#ff0000',//     backgroundColor:"#000000",// })// wx.showModal({//   title:"需要观看广告才能解锁",//   content:"每天试用两次"// })wx.showToast({title: '你好',icon:"success"})// wx.showLoading({//   title:'加载中....'// })// setTimeout(()=>{//   wx.hideLoading();// },2000)},

2.wxml代码

<view  class="title">界面</view>
<view>wx.showModal 模态框</view>
<view>wx.showToast 提示</view>
<view>wx.showLoading 加载提示</view>
<view> wx.setNavigationBarTitle 标题栏文本</view>
<button size="mini" bindtap="showTip">提示</button>

下拉刷新
wx.stopPullDownRefresh
wx.startPullDownRefresh

4.网络

wx.request网络请求
（1） url 请求的地址
（2） data 数据（post）
（3） timeout超时事件
（4）header 请求头
（5）method 方式 post|get|put|delete
（6） success 成功回调函数
（7） fail 失败回调
（8）complete完成（成功和失败都会执行）会结束加载提示
下载
wx.downloadFile 下载文件
wx.saveImageToPhotosAlbum 保存图片到相册
下图就是把图片下载保存到本地

1.js代码（data里面写图片路径）

data: {pic:"https://img0.baidu.com/it/u=2028084904,3939052004&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668531600&t=ed94434b39c6e8e4c6c35e423c366e41"},
downPic(){wx.downloadFile({url: this.data.pic,success(res){console.log(res);wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(){wx.showToast({title:'下载图片成功',icon:"none"})}})}})},

2.wxml 代码

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

wx.uploadFile 上传
wx.chooseMedia 选择图片或者视频
wx.chooseImage从相册选择图片

1.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);var data=JSON.parse(res.data);that.setData({pic:"http://dida100.com"+data.pic})}})}})},

2.wxml代码

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

5. 开放接口

open-type:share触发分享(都会弹框需要授权)，像下图这样，弹出一个窗口，点击允许即可

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

1.写如下的js代码

 getUser(){var that=this;wx.getUserProfile({desc: '需要获取您的昵称',success:res=>{console.log(res);that.setData({"userInfo":res.userInfo})wx.setStorageSync('userInfo', res.userInfo)}})},

写如下的wxml代码

<view><image src="{{userInfo.avatarUrl}}" mode="" style="width:100px;height:100px;"/><view>{{userInfo.nickName}}</view>
</view>
<button  size="mini" bindtap="getUser">获取用户信息</button>

7. 页面生命周期实现分享朋友与分享到朋友圈

（1）onShareAppMessage 右上角分享点击分享

（2）onShareTimeLine 分享到朋友圈

wxml代码

<button size="mini" type="primary" open-type="share">分享给朋友</button>
<view wx:for="{{100}}" wx:key="item"> {{item+1}}
</view>

js代码

 onShareAppMessage() {return{title:"送你50元现金红包",path:"/pages/yidian/yidian",imageUrl:"https://img1.baidu.com/it/u=2192736850,1088345825&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668531600&t=1b750f56e87bdeaa7af99d0aaf1af1a6"}},onShareTimeline(){return{title:"欢迎来到朋友圈",query:"/pages/event/event?name=mumu&age=18",imageUrl:"https://img1.baidu.com/it/u=2192736850,1088345825&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1668531600&t=1b750f56e87bdeaa7af99d0aaf1af1a6"}},

3.写在结尾

其实我们会发现学习小程序的时候，很多功能的实现还是很有趣的，坚持下去，我们终会有收获的。如果对你有用，不要忘了一键三连哦，你的支持将是我最大的动力。

微信小程序api详细教程相关推荐

【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
PbootCMS微信小程序API的封装使用教程
PbootCMS微信小程序API的封装使用教程原文网址:https://www.lkcms.top/rgcms/58.html 第一步:准备md5加密文件 PbootCMS的签名参数signatur ...
微信小程序入坑教程二十一：使用wx.saveImageToPhotosAlbum保存图片时通过检测scope.writePhotosAlbum权限来提醒用户是否需要授权
摘要: 在昨天的文章<微信小程序入坑教程二十:生成海报前使用wx.downloadFile或wx.getImageInfo时潜在的坑>中提到了用户授权一事,scope.writePhoto ...
小程序长按api_微信小程序API相关知识科普
微信小程序API(Application Programming Interface),即应用程序编程接口.API是一种接口函数,把函数封装起来,给开发者,这样好多的功能就不需要你去实现了,只要会调用 ...
❤️微信小程序云开发教程合集（视频+图文）免费❤️
一.视频版微信小程序云开发视频教程上线啦二.图文版 (1)预备知识 1. 怎么注册开通个人微信小程序 2. 微信小程序云开发教程-互联网软件的运作模式 3.微信小程序云开发教程-云开发对微信小程序 ...
微信小程序开发基础教程
文章目录 1.什么叫做微信小程序 2.微信小程序开发功能特点 3.微信小程序开发流程 3.1 微信公众平台注册 3.2 微信开发者工具下载 3.3 微信开发者工具界面上的基本功能介绍 3.3.1 开发 ...
一起学习微信小程序api
微信小程序api介绍小程序API 是小程序开发的核心,通过 API 开发者可以获得微信底层封装的高级特性,如网络请求.文件操作.设备信息.地理定位.本地存储等. 小程序的 API 以全局对象 wx ...
微信小程序api调起微信提供的功能-网络、媒体、文件、数据存储、位置、设备、界面、开发接口
微信小程序-API 框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等. 说明: wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 C ...
python开发微信小程序-Django微信小程序后台开发教程的实现
1 申请小程序,创建hello world小程序 2 添加交互框和按钮 index. wxml cal {{ result }} index.wxss /**index.wxss**/ .input ...

微信小程序api详细教程