博主:👍不许代码码上红
欢迎:🐋点赞、收藏、关注、评论。
API篇
● 小程序开发框架提供丰富的微信原生 API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等
通常,在小程序API中有以下几种类型:
● 事件监听api
● 同步api
● 异步api
● 异步api返回promise
● 云开发api
事件监听api
我们约定,以 on 开头的 API 用来监听某个事件是否触发,如: wx.onSocketOpen,wx.onCompassChange 等。这类 API 接受一个回调函数作为参数,当事件触发时会调用这个回调函数,并将相关数据以参数形式传入。
同步api
我们约定,以 Sync 结尾的 API 都是同步 API, 如 wx.setStorageSync,wx.getSystemInfoSync 等。此外,也有一些其他的同步 API,如 wx.createWorker,wx.getBackgroundAudioManager 等。同步 API 的执行结果可以通过函数返回值直接获取,如果执行出错会抛出异常。
异步api
大多数 API 都是异步 API,如 wx.request,wx.login 等。这类 API 接口通常都接受一个 Object 类型的参数
异步api返回promise
基础库 2.10.2 版本起,异步 API 支持 callback & promise 两种调用方式。当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 promise,否则仍按回调方式执行,无返回值。
注意事项
部分接口如 downloadFile, request, uploadFile, connectSocket, createCamera(小游戏)本身就有返回值, 它们的 promisify 需要开发者自行封装。
当没有回调参数时,异步接口返回 promise。此时若函数调用失败进入 fail 逻辑, 会报错提示 Uncaught (in promise),开发者可通过 catch 来进行捕获。
wx.onUnhandledRejection 可以监听未处理的 Promise 拒绝事件。
云开发api
开通并使用微信云开发,即可使用云开发API,在小程序端直接调用服务端的云函数。
一、getUserProfile({})
wx.getUserProfile(Object object)
(基础库 2.10.4 开始支持,低版本需做兼容处理。)
功能描述
获取用户信息。页面产生点击事件(例如 button 上 bindtap 的回调中)后才可调用,每次请求都会弹出授权窗口,用户同意后返回 userInfo。该接口用于替换 wx.getUserInfo
用户登录实现
● 代码
1、.js
Page({
data: {
// 是否登录
isLogin:false,
// 头像
avatarUrl:'',
// 昵称
nickName:'',
},
// 登录方法
login(){
//获取当前微信用户信息
wx.getUserProfile({
// 设置获取微信信息的用途
desc: '登录系统',
// 成功获取用户信息的回调函数
success:(e)=>{
// 获取用户的头像,昵称
let {userInfo:{avatarUrl,nickName}} = e
// 更新页面渲染
this.setData({
avatarUrl:avatarUrl,
nickName:nickName,
isLogin:true
})
// 将头像和昵称保存到缓存中
wx.setStorageSync('avatarUrl', avatarUrl)
wx.setStorageSync('nickName', nickName)
}
})
},
//退出登录方法
exit(){
// 清空缓存数据
wx.clearStorageSync()
this.setData({
avatarUrl:'',
nickName:'',
isLogin:false
})
},
onLoad: function () {
//判断缓存中有没有用户昵称,如果有,就表示该用户已经登录过
if(wx.getStorageSync('nickName')){
this.setData({
isLogin:true,
nickName:wx.getStorageSync('nickName'),
avatarUrl:wx.getStorageSync('avatarUrl')
})
}
}
})
2、.wxml
<view class="login">
<view wx:if="{{!isLogin}}" class="btn" bindtap="login">登录</view>
<view wx:else class="avatar">
<image class="img" src="{{avatarUrl}}" mode="aspectFit" bindtap="exit"></image>
<view class="txt">{{nickName}}</view>
</view>
</view>
3、wxss
.login{
height: 300rpx;
background-color: rgb(212, 38, 47);
font-size: 28rpx;
display: flex;
justify-content: center;
align-items: center;
}
.btn{
width: 100rpx;
height: 50rpx;
border: 1px solid #ccc;
text-align: center;
line-height: 50rpx;
background-color: white;
border-radius: 6rpx;
}
.avatar{
width: 140rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.avatar .img{
width: 140rpx;
height: 140rpx;
border-radius: 50%;
}
.avatar .txt{
color: #fff;
margin-top: 10rpx;
}
二、wx.scanCode({})
wx.scanCode(Object object)
(基础库 1.0.0 开始支持,低版本需做兼容处理。)
功能描述
调起客户端扫码界面进行扫码
扫码实现
● 代码
1、.js
Page({
/**
* 页面的初始数据
*/
data: {
MGAlertView_S_H: true,
contentText:''
},
//扫一扫
btnClick: function () {
var that = this
wx.scanCode({
success(res) {
console.log('扫描成功:', JSON.stringify(res))
//JSON.stringify() 方法将一个 JavaScript 对象或值转换为 JSON 字符串,如果指定了一个 replacer 函数,则可以选择性地替换值,或者指定的 replacer 是数组,则可选择性地仅包含数组指定的属性。
that.setData({
contentText: JSON.stringify(res)
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
}
})
2、.wxml
<view class='contentView'>
<view class='contentText'>显示内容:{{ contentText }}</view>
<button type="primary" bindtap="btnClick">扫一扫wx.scanCode</button>
</view>
3、.wxss
在这里插入代码片
.item{
padding: 10rpx;
display: flex;
align-items: center;
}
.contentView{
width: 100%;
height: 100%;
}
.contentText{
text-align: center;
margin: 20rpx;
margin-top: 400rpx;
}
button{
margin: 20rpx;
font-size: 30rpx;
}
三、wx.makePhoneCall
wx.makePhoneCall(Object object)
(以 Promise 风格 调用:支持;小程序插件:支持,需要小程序基础库版本不低于 1.9.6)
功能描述
拨打电话
拨打电话
● 代码
1、.js
Page({
data: {
//手机号码
tel:'12345678911'
},
//打电话
makePhoneCall(){
wx.makePhoneCall({
phoneNumber:this.data.tel,
success:(e)=>{
console.log(e);
}
})
}
})
2、.wxml
<view class="item">
<input class="txt" value="{{tel}}" disabled />
<van-icon class="iconfont" class-prefix="icon" name="dianhua" bindtap="makePhoneCall" />
</view>