微信小程序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
完成(成功和失败都会执行)会结束加载提示
下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单次下载允许的最大文件为
200MB。扫描二维码关注公众号,回复: 15069873 查看本文章
//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. 交互
//wxml代码
<button size="mini" bindtap="showTip">提示</button>
//js代码
showTip(){
// setNavigationBarTitle 标题栏文本
wx.setNavigationBarTitle({
title: 'api讲解',
})
wx.showToast({
title: '你好!',
icon:"none"
})
},
效果图
//wxml代码
<button size="mini" bindtap="showTip">提示</button>
//js代码
showTip(){
// setNavigationBarTitle 标题栏文本
wx.setNavigationBarTitle({
title: 'api讲解',
})
wx.showToast({
title: '你好!',
icon:"none"
})
效果图
//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'
}
})
}
效果图
开放接口
获取用户信息。页面产生点击事件(例如 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…
文章每一步都可以跳转到官方文档方便查找
切记熟悉官方问答最重要!!!
希望文章能帮到正在学习的您
下期见~