联系客服功能+定位功能+图片上传功能

功能一、联系客服

小程序开发的时候都会配备有类似于一个电话的悬浮按钮,比如:

这就是一个联系客服的功能,说白了就是打电话-----调用自己的电话功能进行拨打,具体代码实现

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();
        }
    });
},