在小程序开发中，我们经常会用到一些类似于复制文字、跳转地图、扫一扫、人脸识别、摄像头拍照、拨打电话、调整屏幕亮度、文字可复制、监听截屏等常用功能，今天糯麦为大家整理了多个常用小程序功能以便大家查阅。

一.文字可复制：

小程序页面里的文字默认是没有长按复制功能的，需要套个标签来实现：具体代码如下：

 <text user-select="{{true}}">霸州小程序开发</text>

点击按钮，直接复制文本，直接调用微信方法：

 wx.setClipboardData({
	data: '霸州小程序开发' ,
	success: function (res) {
	   wx.showToast({
		 title: '复制成功',
		 icon:"none",
		 mask:"true"//是否设置点击蒙版，防止点击穿透
	  })
	}
})

二.跳转地图：

有时显示一些地址需要在地图显示，这时可以直接借助跳转到小程序内置腾讯地图的api，直接自定义一个点击方法，然后在里面调用下面这个就行：具体代码如下：

wx.openLocation({
    longitude: '', //纬度
    latitude: '', //经度
    address: '', //地址的详细说明
    name: '' //位置名
})

三.扫一扫：

有时候会调用扫码功能，就是相当于微信的扫一扫，扫码获取码值后进行相应操作。具体代码如下：

wx.scanCode({
    onlyFromCamera: true, // 是否只能从相机扫码，不允许从相册选择图片
    success(res) {
        res = JSON.stringify(res);
        console.log('扫码结果：' + res.result);
    },
    fail(err) {
        console.log('无法识别该二维码')
    }
})

四.拨打电话：

实现点击小程序某个按钮时，直接跳到手机拨打电话界面，且号码自动输入好，直接调下面方法就好。具体代码如下：

wx.makePhoneCall({
    phoneNumber: '', //需要拨打的电话号码
    success: function () {
        console.log("拨打电话成功！")
    },
    fail: function () {
        console.log("拨打电话失败！")
    }
})

五.调整屏幕亮度：

有时跳到小程序某个页面时，比如有二维码的页面，想要手机屏幕可以高亮度显示，怕用户看不清。注意的是，先把原先手机屏幕亮度在变量保存下来，当离开这个页面，要恢复原亮度，可在onUnload生命周期恢复。具体代码如下：

// 获取屏幕亮度
wx.getScreenBrightness({
    success: function (res) {
        this.setData({
            ScreenBrightness: res.value //保存当前屏幕亮度，便于恢复亮度
        })
    }
})
//设置屏幕亮度
wx.setScreenBrightness({
    value: 1, //屏幕亮度值，范围 0~1，0 最暗，1 最亮
})

六.拍照：

有两种方法，一种是调用调用wx.chooseImage方法，一种是camera标签自定义拍照页。

wx.chooseImage(Object object) ，调用后可以直接相机拍照，也支持从相册选择

wx.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],  //original：原图；compressed：压缩图
    sourceType: ['album', 'camera'],  //album：相册；camera：相机
    success(res) {
        // tempFilePath可以作为 img 标签的 src 属性显示图片
        const tempFilePaths = res.tempFilePaths
        //小知识： 将图片转为base64
        const picBase64 = wx.getFileSystemManager().readFileSync(res.tempFilePaths[0], 'base64')
    }
})

camera标签就比较神奇，系统相机，可以自定义拍照页面，比如可以在相机拍摄页面加个蒙版框框啥的，可以自定义拍摄页面样式。具体代码如下：

<camera device-position="back" flash="off" binderror="error" style="width: 100%; height: 300px;"></camera>
<button type="primary" bindtap="takePhoto">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>

// camera.js
Page({
    takePhoto() {
        const ctx = wx.createCameraContext()
        ctx.takePhoto({
            quality: 'high',
            success: (res) => {
                this.setData({
                    src: res.tempImagePath
                })
            }
        })
    },
    error(e) {
        console.log(e.detail)
    }
})

七.提示小程序版本更新

当小程序版本进行调整升级后，需提醒用户退出后重新加载新版小程序，只需在根目录下app.js中设置以下代码：

const updateManager = wx.getUpdateManager()
updateManager.onCheckForUpdate(function (res) {
    // 请求完新版本信息的回调
    console.log(res.hasUpdate)
})
updateManager.onUpdateReady(function () {
    wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success: function (res) {
            if (res.confirm) {
                // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate()
            }
        }
    })
})
updateManager.onUpdateFailed(function () {
    // 新版本下载失败
})

八.打开显示一个网页

要跳转的网页都得在它那服务器配置过才有权限跳。新建一个文件夹，包括wxml、wxss、json、js四个基本文件，专门用来打开网页链接的，改动其中wxml内容为：

<web-view src="{{path}}"></web-view>

九.显示富文本内容

微信小程序的富文本主要在rich-text标签显示：

<rich-text  nodes="{{notice}}"></rich-text>

notice为文本内容。

其中，有些富文本的图片比较大，可以用replace替换修改图片的样式，已达到在小程序正常显示的目的。

noticeContent = noticeContent.replace(/<img/gi,'<img style="max-width:100%;height:auto;margin:0 auto;display:block"')

十.下载文件

download(e) {
    //文件链接
    var url = e.currentTarget.dataset.url
    // 下载文件
    var downloadFile = ''
    // 把文件下载到一个临时文件中
    const downloadTask = wx.downloadFile({
        url: url,
        success: function (res) {
            // 下面是临时文件的路径
            const tempFilePath = res.tempFilePath;
            wx.saveFile({
                tempFilePath,
                success: function (res) {
                    const savedFilePath = res.savedFilePath;
                    // 打开文件
                    wx.openDocument({
                        filePath: savedFilePath,
                        showMenu: true,
                        success: function (res) {},
                    });
                },
                fail: function (err) {}
            })
        },
        fail: function (err) {}
    })
    // 监控下载过程
    downloadTask.onProgressUpdate(function (res) {})
},

ios下文件下载无法使用以上代码进行下单，下面的可以：

// 判断文件类型
whatFileType(url) {
    let sr = url.lastIndexOf('.') //  最后一次出现的位置
    let fileType = url.substr((sr + 1)) // 截取url的类型
    return (fileType)
},
download(e) {
    var url = e.currentTarget.dataset.url
    let fileTypes = ['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'pdf']
    let imageTypes = ["jpg", "jpeg", "png"]
    let fileType = this.whatFileType(url)
    let fileId = e.currentTarget.dataset.id
    wx.showLoading({
        title: '加载中',
    })
    wx.getSavedFileList({ // 获取文件列表
        success(res) {
            res.fileList.forEach((val, key) => { // 遍历文件列表里的数据
                // 删除存储的垃圾数据
                wx.removeSavedFile({
                    filePath: val.filePath
                });
            })
        }
    })
    wx.downloadFile({
        url: url,
        filePath: wx.env.USER_DATA_PATH + "/" + fileId + "." + fileType,
        method: 'GET',
        success: function (res) {
            if (fileTypes.includes(fileType)) {
                wx.openDocument({
                    filePath: res.filePath,
                    showMenu: true,
                    flieType: fileType,
                    success: function (res) {
                        wx.hideLoading()
                        console.log('打开文档成功')
                    },
                    fail: function (err) {
                        wx.hideLoading()
                        console.log('打开文档失败：', err)
                    }
                });
            } else if (imageTypes.includes(fileType)) {
                wx.hideLoading()
                wx.previewImage({
                    showmenu: true,
                    current: res.filePath, // 当前显示图片的http链接
                    urls: [res.filePath] // 需要预览的图片http链接列表
                })
            } else {
                wx.hideLoading()
                wx.showModal({
                    title: '提示',
                    content: "文件类型不支持预览",
                    showCancel: false
                })
            }
        },
        fail: function (err) {
            wx.hideLoading()
            wx.showToast({
                title: "下载超时",
                icon: 'none'
            })
            console.log('下载失败：', err);
        }
    })
},

十一.小程序overflow: scroll下设置滚动条显示样式，具体代码如下：

::-webkit-scrollbar { width: 4px; height: 4px; color:#ffffff;}
::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border-radius: 10px; background-color:#FFFFFF;}
::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); background-color:rgb(170, 170, 170);}

十二.扫描二维码微信小程序获取码内容：

后端设置码值时 scene:“t/123*a/456” , 不能"t=12;a=56" , 不然获取不到。因为=号不行，得特殊符号才行。

analysisCode(options) {
    // options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    var scene = decodeURIComponent(options.scene);
    var obj = {};
    for (var i = 0; i < scene.split('*').length; i++) {
        var arr = scene.split('*')[i].split('/');
        obj[arr[0]] = arr[1];
    }
    return obj
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
    let scene = null
    if (options.scene) {
        // options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
        scene = this.analysisCode(options.scene)
        console.log("二维码值scene is ", scene);
    }
}

十三.缓存网络图片至本地，具体代码如下：

///把在线logo图片放本地服务器  重新启动小程序，去缓存中获取图片的缓存地址。 然后给Imagesrc赋值
const path = wx.getStorageSync('image_logo')
if (path) {
    console.log('path====', path)
    console.log('图片已缓存') // res.savedFilePath 为一个本地缓存文件路径  
} else {
    wx.downloadFile({
        url: 'https://sbk.hrss.gdqy.gov.cn/ykttest/Integration/xcx/images/BrightQRCode/qy-logo.png',
        success: function (res) {
            if (res.statusCode === 200) {
                console.log('图片下载成功' + res.tempFilePath)
                // 第二步: 使用小程序的文件系统，通过小程序的api获取到全局唯一的文件管理器
                const fs = wx.getFileSystemManager()
                //  fs为全局唯一的文件管理器。那么文件管理器的作用是什么，我们可以用来做什么呢？
                //   文件管理器的作用之一就是可以根据临时文件路径，通过saveFile把文件保存到本地缓存.
                fs.saveFile({
                    tempFilePath: res.tempFilePath, // 传入一个临时文件路径
                    success(res) {
                        console.log('图片缓存成功', res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径  
                        wx.setStorageSync('image_logo', res.savedFilePath)
                    }
                })
            } else {
                console.log('响应失败', res.statusCode)
            }
        }
    })
}

以上就是为大家总结的在微信小程序中如何进行文字复制、地图跳转、扫一扫、拨打电话、调整屏幕亮度、使用相机拍照、提示用户版本更新、显示Web页面、显示富文本内容、下载文件、设置滚动条样式、扫描二维码获取微信小程序内容、缓存网络图片至小程序本地临时文件夹等常用功能，希望对大家开发有所帮助。