微信小程序内置api
1、界面
1、wx.showToast(Object object)
显示消息提示框
wx.showToast({
title: '你好',
icon:"none"
})
事件属性
属性 | 类型 | 说明 |
---|---|---|
success | function | 接口调用成功的回调函数 |
fail | function | 接口调用失败的回调函数 |
complete | function | 接口调用结束的回调函数 (成功失败都会调用) |
2、wx.hideToast(Object object)隐藏消息提示框
2秒后关闭提示
setTimeout(() => {
wx.hideToast();
}, 2000)
3、wx.showModal(Object object)显示模态对话框
wx.showModal({
title:"需要看广告才能解锁",
content:"每天试用两次"
})
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
title | string | 无 | 提示的标题 |
content | string | 无 | 提示的内容 |
showCancel | boolean | true | 是否显示取消按钮 |
cancelText | string | ‘取消’ | 取消按钮的文字 最多4个字符 |
cancelColor | string | #000 | 取消按钮的文字颜色,必须是16进制格式的颜色字符串 |
confirmText | string | ‘确定’ | 确认按钮的文字,最多4个字符 |
confirmColor | string | #576B95 | 确认按钮的文字颜色,必须是16进制格式的颜色字符串 |
4、wx.showLoading(Object object) 提示框
需主动调用 wx.hideLoading 才能关闭提示框
wx.showLoading({
title: '加载中。。。'
})
setTimeout(() => {
wx.hideLoading();
}, 2000)
注意:
①wx.showLoading 和 wx.showToast 同时只能显示一个
②wx.showToast 应与 wx.hideToast 配对使用
5、wx.showActionSheet(Object object)显示操作菜单
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
itemList | Array | 无 | 按钮的文字数组,数组长度最大为 |
itemColor | string | #000 | 按钮的文字颜色 |
success | function | 无 | 接口调用成功的回调函数 |
fail | function | 无 | 接口调用失败的回调函数 |
complate | function | 无 | 接口调用结束的回调函数 (成功失败都会调用) |
位置api
(1)wx.getLocation(Object object)
作用:获取当前的地理位置、速度。当用户离开小程序后,此接口无法调用。
注意:调用前需要 用户授权 scope.userLocation
success成功回调函数参数
配置:先配置定位权限认证app.json,小程序配置文件中添加如下配置
在这里插入图片描述
转发API
wx.showShareMenu(Object object)
onShareAppMessage() {
// 默认以当前页面截图
// 实际中,可以网络请求一个数组。冲数组随机的获取一组参数
return {
title: "送你50元大礼包",
path: "/pages/home/home.js",
imageUrl: "https://ts1.cn.mm.bing.net/th?id=OIP-C.ncrUEsrAOIkcmTzW_HmP0gHaEx&w=254&h=165&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
}
},
分享朋友圈wx.onShareTimeline()
onShareTimeline() {
// 不返回也是有个默认的当前页面效果
return {
title: "给你喜欢的",
query: "/pages/user/user.js",
imageUrl: "https://ts1.cn.mm.bing.net/th?id=OIP-C.4MYruHSYN8SmcZpmW_xndAHaIu&w=148&h=169&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2"
}
},
登录并渲染微信头像和微信名
wx.getUserProfile获取用户信息
wxml
<view wx:if="{
{userInfo.nickName}}">
<image style="width: 100px; height: 100px;" src="{
{userInfo.avatarUrl}}" mode=""/>
<view>
{
{
userInfo.nickName}}
</view>
</view>
<button wx:else size="mini" bindtap="getUser">获取用户信息</button>
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 sys = wx.getSystemInfoSync();
console.log(sys);
// 本地获取用户信息
var userInfo = wx.getStorageInfoSync("userInfo") || {
};
// 更新用户信息
this.setData({
userInfo
})
},
data: {
pic: "https://ts1.cn.mm.bing.net/th?id=OIP-C.pT8DAupmnWX-LrKZfVds_gHaLH&w=115&h=169&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
userInfo:{
},//用户信息
},
回到顶部
wxml
<view class="top" bindtap="goTop" wx:if="{
{showTop}}">
回到顶部
</view>
js
data: {
showTop: false,
},
onPageScroll(e) {
// 当页面滚动距离大于100时候显示回到顶部
if (e.scrollTop > 100) {
this.setData({
showTop: true
})
} else {
this.setData({
showTop: false
})
}
},
// 回到顶部
goTop() {
// 页面滚动到0的位置事件为600毫秒
wx.pageScrollTo({
duration: 600,
scrollTop: 0,
})
}
下载图片
wx.downloadFile
downPics() {
wx.downloadFile({
url: this.data.pic,
success(res) {
console.log(res);
// 把文件报存到相册(需要用户授权)
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success() {
// 提示保存成功
wx.showToast({
title: "下载图片成功",
icon: "none"
})
}
})
}
})
},
data: {
pic: "https://ts1.cn.mm.bing.net/th?id=OIP-C.pT8DAupmnWX-LrKZfVds_gHaLH&w=115&h=169&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2",
userInfo:{
},//用户信息
},
<image src="{
{pic}}" bindtap="downPics" mode="" />
上传图片
// 上传图片
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
})
}
})
}
})
},
<button type="warn" bindtap="upImg">上传图片</button>
button开放功能
open-type:
- share 触发分享
- getPhoneNumber 获取用户的手机号
- getUserInfo 获取用户信息
- chooseAvatar 获取用户的头像
都会弹框需要授权
tips: 如果拒绝授权后,使用的话是无效的,然后需要手动授权,