功能一、联系客服
小程序开发的时候都会配备有类似于一个电话的悬浮按钮,比如:
这就是一个联系客服的功能,说白了就是打电话-----调用自己的电话功能进行拨打,具体代码实现
<!-- 点击拨打电话 -->
makePhone: function (e) {
var that = this;
var mobile = e.currentTarget.dataset.mobile; //点击拨打电话 携带的参数
if (mobile) { //存在电话号码
that.makePhoneCall(mobile); //调用拨打功能
} else {
app.errorTip(that, '暂无电话~', 2000); //提示框
}
}
<!-- 调起自己手机的电话拨打功能 -->
makePhoneCall: function (mobile) {
<!-- 模拟弹窗 -->
wx.showModal({
title: '', //标题
content: mobile, //弹窗展示的内容
confirmText: '拨打', //确认按钮的提示语
confirmColor: '#48C23D', //确认按钮的样式
success: function (res) {
if (res.confirm) { //如果确认则调用手机的电话功能
<!-- 拨打电话 -->
wx.makePhoneCall({
phoneNumber: mobile, //拨打的电话号码
success: function () {
console.log("拨打电话成功！")
},
fail: function () {
console.log("拨打电话失败！")
}
})
}
}
})
}功能二、定位功能
第一步:首先要认识三个小程序的 api
wx.chooseLocation 和 wx.getLocation 和 wx.openLocation
(1).wx.chooseLocation 用于在小程序中选择地理位置。当用户点击选择位置按钮时，小程序会调起地图选择界面，用户可以在地图上选择一个位置，并可以获取到该位置的经纬度、名称、详细地址等信息。
(2).wx.getLocation 可以获取用户当前的经纬度信息，并可根据需要获取用户的详细地址、速度等附加信息。使用 wx.getLocation API 可以让小程序在需要的情况下获取用户的地理位置信息，然后根据这些信息来进行相关的操作。
(3).wx.openLocation 用于在地图上打开指定的位置。通过调用 wx.openLocation API，开发者可以传入经度、纬度、名称、地址等参数来指定一个具体的地理位置，然后微信客户端会打开地图并显示该位置。
所以，三者的区别主要在于：
1. wx.chooseLocation 是用于选择地理位置的，返回用户选择的位置信息。
2. wx.getLocation 是用于获取用户当前位置的，返回用户当前位置的信息。
3.wx.openLocation 用于打开地图显示一个指定的位置，而不是获取用户当前位置或选择位置。它用于在小程序中以地图的形式展示一个固定的地理位置，让用户查看或进一步操作。
需要注意的是，使用 wx.getLocation API,wx..getLocation 需要用户在微信公众平台申请权限,并在 app.json 中进行配置,如下:
"requiredPrivateInfos": [
"getLocation",
"chooseLocation"
],第二步:具体用法
第一种:打开地图自行选择位置并展示,具体代码如下:
//选择地址
chooseLocation: function () {
//保存上下文
var that = this;
wx.chooseLocation({
success: (res) => {
//返回自己选择的经度 纬度 和详细地址信息
console.log(res);
//就向发布动态一样需要将获取到的地理位置信息存储起来
//展示动态直接渲染
that.setData({
curChooseAddress: res.address,
curChooseLatitude: res.latitude,
curChooseLongitude: res.longitude
})
},
fail: (res) => {
//未授权需要先进行授权
//获取授权过的设置
wx.getSetting({
success: (res) => {
console.log(res.authSetting['scope.userLocation']);
//如果不存在地址授权 则需要进行确认授权
if (!res.authSetting['scope.userLocation']) {
//方法一:打开设置进行授权
wx.openSetting({
success: (res) => {
res.authSetting = {
"scope.userLocation": true
}
}
})
//方法二:弹窗进行授权
wx.authorize({
scope: 'scope.userLocation',
success () {
// 用户已经同意小程序使用录音功能，可以再次调用该方法
that.chooseLocation()
}
})
}
}
})
}
})
}第二种:就是获取当前的经纬度,并在地图中显示该位置,具体代码如下:
//打开地图
openMap(){
wx.getLocation({
type: 'gcj02', //返回可以用于 wx.openLocation 的经纬度
success (res) {
const latitude = res.latitude //当前位置的经度和纬度
const longitude = res.longitude
wx.openLocation({
//根据经度和纬度打开地图指定位置
latitude,
longitude,
scale: 18 //尺寸
address: //地址的详细说明
name: //位置名
})
}
})
}功能三、图片上传
1.点击添加触发点击事件,执行 chooseSingleImage ()
//选择上传图片方式
chooseSingleImage: function (e) {
var that = this;
//可以根据 id 保证图片上传唯一性
var id = e.currentTarget.dataset.id;
//调用小程序 api 弹出层
wx.showActionSheet({
itemList: ['从相册中选择', '拍照'], //方式
itemColor: "#333", //文字颜色
success: function (res) {
if (!res.cancel) { //如果没有点击取消按钮 咋执行该逻辑
if (res.tapIndex == 0) { //当前选择的是哪一种方式
that.chooseWxImage('album', id) //表示 从相册选择
} else if (res.tapIndex == 1) {
that.chooseWxImage('camera', id) //表示 拍照
}
}
}
})
},2.调用 choosWxImage,选择单张图片还是多张
//选择图片数量
chooseWxImage: function (type, id) {
//保存上下文
var that = this;
//小程序 api
wx.chooseMedia({ //chooseImage 已经停止维护
count: 1, //可选择的图片数量
sizeType: ['compressed'], //压缩图片
sourceType: [type],
success: function (res) {
//返回图片的临时路径
var temPath = res.tempFilePaths[0];
that.upload_file(temPath, id);
}
})
},3.上传图片到服务器
// 上传图片到服务器
upload_file: function (temPath, id) {
var that = this;
//交互效果 添加弹出框
wx.showLoading({
title: '上传中',
})
//上传图片 api
wx.uploadFile({
url: '后台接口地址'
//传递的临时路径
filePath: temPath,
name: 'image', //图片类型
success: function (res) {
var data = JSON.parse(res.data); //这里需要对数据进行转化
var realpath = '本地域名' + data.data.path; //拼接真实的图片路径
//此时可以拿到这个真正的图片路径 进行渲染 展示上传的图片
that.setData({
imgUrl: realpath
})
},
complete: function () {
//最后关闭弹出框
wx.hideLoading();
}
});
},
