标签微信小程序文章 - 零分杂记 - 收集建站知识，分享网络资源

微信小程序单指、双指操作图片/层（移动缩放）

微信小程序单指、双指操作图片/层WXML：<view class="myCanvas"> <image src="{{ loadSrc}}" class="img" bindtouchstart="touchstartCallback" bindtouchmove="touchmoveCallback" bindload="imgload" style="width: {{ scaleWidth }}px;height: {{ scaleHeight }}px;margin-top:{{marginTop}}px;margin-left:{{marginLeft}}px;" /> </view>微信小程序单指、双指操作图片/层JS：/** * 监听图片加载成功时触发 */ imgload: function (e) { this.multiple = e.detail.width / this.width; // 计算原图和默认显示的倍数 let height = this.multiple > 1 ? e.detail.height / this.multiple : e.detail.height; // 等比例计算出默认高度 let width = this.multiple > 1 ? this.width : e.detail.width; this.setData({ baseWidth: e.detail.width, // 获取图片实际宽度 baseHeight: e.detail.height, // 获取图片实际高度 initWidth: width, initHeight: height, scaleWidth: width, scaleHeight: height, }) }, /** * 双手指触发开始计算开始触发两个手指坐标的距离 */ touchstartCallback: function (e) { // 单手指缩放开始，不做任何处理 if (e.touches.length == 1) { lastTouchPoint = { x: 0, y: 0 } return }; let distance = this.calcDistance(e.touches[0], e.touches[1]); this.setData({ 'distance': distance, }) }, /** * 双手指移动计算两个手指坐标和距离 */ touchmoveCallback: function (e) { // 单手指缩放不做任何操作 if (e.touches.length == 1) { if (lastTouchPoint.x == 0 && lastTouchPoint.y == 0) { lastTouchPoint.x = e.touches[0].clientX lastTouchPoint.y = e.touches[0].clientY } else { var xOffset = e.touches[0].clientX - lastTouchPoint.x var yOffset = e.touches[0].clientY - lastTouchPoint.y this.setData({ marginTop: this.data.marginTop + yOffset, marginLeft: this.data.marginLeft + xOffset, }) lastTouchPoint.x = e.touches[0].clientX lastTouchPoint.y = e.touches[0].clientY } return }; let distance = this.calcDistance(e.touches[0], e.touches[1]); // 计算移动的过程中实际移动了多少的距离 let distanceDiff = distance - this.data.distance; let newScale = this.data.scale + 0.005 * distanceDiff; // 最小缩放到0.5 if (newScale <= 0.5) { newScale = 0.5; }; let scaleWidth = newScale * this.data.initWidth; let scaleHeight = newScale * this.data.initHeight; this.setData({ distance: distance, scale: newScale, scaleWidth: scaleWidth, scaleHeight: scaleHeight, diff: distanceDiff }); }, /** * 计算两个手指距离 */ calcDistance(pos0, pos1) { let xMove = pos1.clientX - pos0.clientX; let yMove = pos1.clientY - pos0.clientY; return (Math.sqrt(xMove * xMove + yMove * yMove)); },笔记4个月前

微信小程序选择照片（支持拍照）、获取图片信息、预览图片、保存图片到相册

微信小程序图片操作wxml：<button bindtap="choose">选择图片</button><button bindtap="getInfo">获取图片信息</button><button bindtap="preview">预览图片</button><button bindtap="save">保存图片到相册</button><image src="{{loadSrc}}"></image>微信小程序图片操作JS：Page({ /** * 页面的初始数据 */ data: { loadSrc:'' }, // 保存图片 save(){ var that=this; wx.saveImageToPhotosAlbum({ filePath:that.data.loadSrc, success(res){ console.log('save success!!!'); } }) }, // 预览图片 preview(){ var that=this wx.previewImage({ urls:[that.data.loadSrc], showmenu:true }) }, // getImageInfo getInfo(){ var that=this; wx.getImageInfo({ src:that.data.loadSrc, success(res){ console.log(res,'ressuccess'); } }) }, // 选择图片 choose(){ var that=this wx.chooseMedia({ success(res){ that.setData({ loadSrc:res.tempFiles[0].tempFilePath }) }, fail(res){ }, complete(res){ } }) },})笔记4个月前

微信小程序canvas初始化、绘图、保存

微信小程序canvas初始化、绘图、保存，记录保存一下canvas初始化/***初始化canvas */ initCanvas(){ // 通过 wx.createSelectorQuery()方法创建 const query = wx.createSelectorQuery() query.select('#myCanvas') // canvas id .fields({ node: true, size: true }) .exec((res) => { const canvas = res[0].node const ctx = canvas.getContext('2d') const dpr = wx.getSystemInfoSync().pixelRatio // 屏幕比例 canvas.width = res[0].width * dpr canvas.height = res[0].height * dpr // 存入data 后面用到 this.setData({ ctx:ctx, canvas:canvas, cW:res[0].width * dpr, cH:res[0].height * dpr }) }) },canvas绘图/***绘制图画 */ drawImg(x,y,Hx,Hy,CW){ let that=this; const {ctx,canvas} = this.data // 创建 image对象，因为新的canvas API ，在调用drawImage的时候需要传入一个image对象。 const img = canvas.createImage() // 这个url地址，可以是微信获取头像的临时地址 img.src = this.data.loadSrc img.onload = function() { // 图片加载后画 // ctx.drawImage(img, x, y,Hx,Hy) ctx.save(); ctx.beginPath(); ctx.arc(CW/2,CW/2,CW/2,0,2*Math.PI,false) ctx.clip(); ctx.drawImage(img, x, y, Hx, Hy); // 推进去图片 ctx.closePath(); ctx.restore(); that.saveImgs(); } },canvas保存图片 /***保存图片 */saveimg:function() { let dpr = wx.getSystemInfoSync().pixelRatio // 屏幕比例 let Hx=this.data.scaleWidth*dpr; let Hy=this.data.scaleHeight*dpr; let x=this.data.marginLeft*dpr; let y=this.data.marginTop*dpr; let cw=this.data.cW console.log(this.data.cH) console.log(this.data.cW) this.drawImg(x,y,Hx,Hy,cw) console.log(this.data.ctx); console.log(this.data.canvas.id); }, async saveImgs() { let self = this; //这里是重点新版本的type 2d 获取方法 const query = wx.createSelectorQuery(); const canvasObj = await new Promise((resolve, reject) => { query.select('#myCanvas') .fields({ node: true, size: true }) .exec(async (res) => { resolve(res[0].node); }) }); console.log(canvasObj); wx.canvasToTempFilePath({ //fileType: 'jpg', //canvasId: 'posterCanvas', //之前的写法 canvas: canvasObj, //现在的写法 success: (res) => { console.log(res); self.setData({ canClose: true }); //保存图片 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function (data) { wx.showToast({ title: '已保存到相册', icon: 'success', duration: 5000, }) // setTimeout(() => { // self.setData({show: false}) // }, 6000); }, fail: function (err) { console.log(err); if (err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { console.log("当初用户拒绝，再次发起授权") } else { util.showToast("请截屏保存分享"); } }, complete(res) { wx.hideLoading(); console.log(res); } }) }, fail(res) { console.log(res); } }, this) }, 笔记4个月前

微信小程序scroll-view下拉刷新，出现一直刷新

用scroll-view，主要原因是，可以在顶部固定一个模块，虽然position:fixed可以实现，但发现在真机上总会出现一条小白条，看着不是很舒服scroll-view下拉刷新，需要用到几个属性：scroll-view官方说明refresher-enabled：开启自定义下拉刷新refresher-threshold：设置自定义下拉刷新阈值refresher-default-style：设置自定义下拉刷新默认样式，支持设置 black | white | none， none 表示不使用默认样式refresher-background：设置自定义下拉刷新区域背景颜色refresher-triggered：设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发主要是：refresher-triggered，当值为FALSE时，关闭刷新，默认值是FALSE，原先一直在设置复位：TRUE，所以一直刷新，改FALSE后，才解决下拉刷新：bindrefresherrefresh: function (e) { let that = this; wx.showLoading({ title: '正在刷新...', mask: true, }) that.setData({ page: 1 }) that.GetData() },下拉刷新复位bindrefresherrestore: function (e) { let that = this; that.setData({ refresher: false, }) },而开始时一直设置refresher值为true！笔记8个月前

微信小程序scroll-view禁止滚动条

微信小程序禁用scroll-view滚动条::-webkit-scrollbar { display: none;}其实也简单，就是这样一个CSS样式，关键是这个样式要放在哪里！在写的时候，一直无法生效，翻看之前写的，也是一样的，但之前的可以生效！认真翻看才发现，这个要在在app.wxss里，并不是写在页面上！如果怕兼容，可以全部都写上::-webkit-scrollbar { display:none; width: 0 !important; height: 0 !important; -webkit-appearance: none; background: transparent; color: transparent; }以前就是因为全部都写上，在翻看时，一直都没有去翻app.wxss！笔记8个月前

微信小程序开发新版本检测、网络请求、json格式判断封装

微信小程序开发新版本检测、网络请求、json格式判断封装，放在APP.JS里，方便各个页面调用。App({})1、小程序新版本检测if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { updateManager.onUpdateReady(function () { wx.showModal({ title: '更新提示', content: '新版本已经准备好，是否重启应用？', success: function (res) { if (res.confirm) { updateManager.applyUpdate() } } }) }) updateManager.onUpdateFailed(function () { // 新的版本下载失败 wx.showModal({ title: '已经有新版本了哟~', content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~' }) }) } }) }2、网络数据请求request: function (url, data = false, callback) { wx.request({ url: url, data: data, method: 'POST', header: { "Content-Type": "application/x-www-form-urlencoded" }, success: function (res) { if (res.statusCode != 200) { return callback && callback(false); } else { return callback && callback(res.data); } }, fail: function (res) { return callback && callback(false); } }) }页面调用：app.request(url, false, (res) => {})3、JSON格式检测isJson: function (string) { try { if (typeof JSON.parse(string) == 'object') { return true; }else{ return false; } } catch (e) { // console.log(e); return false; } }笔记8个月前

零分杂记