微信小程序常用功能实例
在小程序开发中,我们经常会用到一些类似于复制文字、跳转地图、扫一扫、人脸识别、摄像头拍照、拨打电话、调整屏幕亮度、文字可复制、监听截屏等常用功能,今天糯麦为大家整理了多个常用小程序功能以便大家查阅。
一.文字可复制:
小程序页面里的文字默认是没有长按复制功能的,需要套个标签来实现:具体代码如下:
<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页面、显示富文本内容、下载文件、设置滚动条样式、扫描二维码获取微信小程序内容、缓存网络图片至小程序本地临时文件夹等常用功能,希望对大家开发有所帮助。
小程序地图
小程序扫一扫
小程序屏幕亮度
阅读排行
-
1. 几行代码就能实现Html大转盘抽奖
大转盘抽奖是网络互动营销的一种常见形式,其通过简单易懂的界面设计,让用户在游戏中体验到乐趣,同时也能增加商家与用户之间的互动。本文将详细介绍如何使用HTML,CSS和JavaScript来实现大转盘抽奖的功能。
查看详情 -
2. 浙江省同区域公司地址变更详细流程
提前准备好所有需要的资料,包含:房屋租赁合同、房产证、营业执照正副本、代理人身份证正反面、承诺书(由于我们公司其中一区域已有注册另外一公司,所以必须需要承诺书)
查看详情 -
3. 微信支付商户申请接入流程
微信支付,是微信向有出售物品/提供服务需求的商家提供推广销售、支付收款、经营分析的整套解决方案,包括多种支付方式,如JSAPI支付、小程序支付、APP支付H5支付等支付方式接入。
查看详情 -
4. 阿里云域名ICP网络备案流程
根据《互联网信息服务管理办法》以及《非经营性互联网信息服务备案管理办法》,国家对非经营性互联网信息服务实行备案制度,对经营性互联网信息服务实行许可制度。
查看详情 -
5. 微信小程序申请注册流程
微信小程序注册流程与微信公众号较为相似,同时微信小程序支持通过已认证的微信公众号进行注册申请,无需进行单独认证即可使用,同一个已认证微信公众号可同时绑定注册多个小程序。
查看详情