微信小程序，当字数不确定时的右移
Posted 小桥流水
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序，当字数不确定时的右移相关的知识，希望对你有一定的参考价值。
wxml: <scroll-view class="warp_" scroll-y="true"> <view style=\'\' style=\'position: absolute;z-index: 2;top:0;left:0;right:0;\'> <canvas canvas-id="myCanvas" style="width:{{335 * rpx}}px;height:{{580 * rpx}}px;margin: 30rpx auto 50rpx;"/> <cover-view style=\'padding-bottom: 0;box-sizing: border-box;background:#fff;position: fixed;bottom:0;left:0;width:100%;z-index:9999\'> <!-- <cover-view class="tit f28">海报模板</cover-view> <cover-view class=\'pageNav bWhite flex f24 center gridXb\'> <cover-view class="pageLi sub pr" data-index="{{index}}" catchtap="changeBg" wx:key="" wx:for="{{pageNav}}"> <cover-view class="text pr {{index==active?\'active\':\'\'}} "> <cover-image class="pageLiImg" src="/image/close2.png"></cover-image> </cover-view> <cover-view class="pageBox"> {{item.title}} </cover-view> </cover-view> </cover-view> --> <cover-view bindtap=\'saveImg\' class=\'btn\'>保存图片</cover-view> </cover-view> </view> <view class=\'pop_bg_fix\'></view> <!-- </view> --> </scroll-view>
wxss: .warp_{width: 100vw;height: 100vh;box-sizing: border-box;line-height: 1.5;position: fixed;top: 0;left: 0;z-index: 9999991;background: #fff;}
wxjs: // pages/newPage/haoBao/index.js const app = getApp() Page({ /** * 页面的初始数据 */ data: { pageNav: [ { title: \'简约白\', color: \'#fff\', img: \'\', iocn: \'/image/iocn60.png\' }, { title: \'西瓜红\', color: \'#fd8866\', img: \'/image/topBg3.png\', iocn: \'/image/iocn60.png\' }, { title: \'天空蓝\', color: \'#e5f2fb\', img: \'/image/topBg4.png\', iocn: \'/image/iocn59.png\', ac: 1 }, { title: \'胭脂粉\', color: \'#fcdee3\', img: \'/image/topBg2.png\', iocn: \'/image/iocn62.png\' }, { title: \'薰衣草\', color: \'#ebdefb\', img: \'/image/topBg.png\', iocn: \'/image/iocn61.png\' }, { title: \'豆沙绿\', color: \'#a6e7de\', img: \'/image/topBg5.png\', iocn: \'/image/iocn63.png\' } ], active: 0, wx_avatar_url: \'\', userinfo: [], index2:0, walk_km: 0, walk_sumk: 0, walk_left:0 }, //获取encryptedData（没有解密的步数）和iv（加密算法的初始向量） myWalk: function(e) { let that = this that.pushRQId = null console.log(that.pushRQId) if (app.HTTP.isLoading(that.pushRQId)) return console.log(\'walk\') let formid = e.detail.formId wx.checkSession({ success() { // session_key 未过期，并且在本生命周期一直有效 }, fail() { wx.clearStorageSync() } }) wx.getSetting({ success: function(res) { console.log(res); if (!res.authSetting[\'scope.werun\']) { wx.showModal({ title: \'提示\', content: \'获取微信运动步数，需要开启计步权限\', success: function(res) { if (res.confirm) { //跳转去设置 wx.openSetting({ success: function(res) { wx.getWeRunData({ success: function(res2) { that.pushRQId = app.HTTP.post(app.URL.userinfo_url, { iv: res2.iv, encryptedData: res2.encryptedData, m: \'mywalk\', city: app.globalData.city, formid: formid }, (res) => { //console.log(res); return let arr_top3 = []; if (res.walkrank.length > 0) { arr_top3 = res.walkrank.splice(0, 3) } wx.setStorageSync(\'user_info\', res.user) that.setData({ walk_step: res.step, walk_sum: res.stepsum, walk_sumk: (res.stepsum * 0.75 * 0.001).toFixed(1), walk_km: (res.step * 0.75 * 0.001).toFixed(1), walk_top3: arr_top3, walk_rank: res.walkrank, userscore: res.user.score }) wx.showToast({ title: \'同步成功\', }) }) }, fail: function(res) { wx.showModal({ title: \'提示\', content: \'开发者未开通微信运动，请关注“微信运动”公众号后重试\', showCancel: false, confirmText: \'知道了\' }) } }) } }) } else { //不设置 } } }) } else { wx.getWeRunData({ success: function(res2) { console.log(res2) that.pushRQId = app.HTTP.post(app.URL.userinfo_url, { iv: res2.iv, encryptedData: res2.encryptedData, appid: app.URL.app_id, m: \'mywalk\', city: app.globalData.city, formid: formid }, (res) => { // console.log(res); return let arr_top3 = []; if (res.walkrank.length > 0) { arr_top3 = res.walkrank.splice(0, 3) } wx.setStorageSync(\'user_info\', res.user) that.setData({ walk_step: res.step, walk_sum: res.stepsum, walk_sumk: (res.stepsum * 0.75 * 0.001).toFixed(1), walk_km: (res.step * 0.75 * 0.001).toFixed(1), walk_top3: arr_top3, walk_rank: res.walkrank, userscore: res.user.score }) wx.showToast({ title: \'同步成功\', }) }) }, fail: function(res) { wx.showModal({ title: \'提示\', content: \'请关注“微信运动”公众号后重试\', showCancel: false, confirmText: \'知道了\' }) } }) } } }) }, //选择背景色 changeBg: function(e) { var that = this let p = e.currentTarget.dataset that.data.pageNav[p.index][\'color\'] // console.log(that.data.pageNav[p.index][\'color\']) that.setData({ color: that.data.pageNav[p.index][\'color\'], img: that.data.pageNav[p.index][\'img\'], iocn: that.data.pageNav[p.index][\'iocn\'], active: p.index }) that.canvasImg() }, canvasImg() { let that = this; var ress = wx.getSystemInfoSync() var rpx = ress.windowWidth / 375 that.setData({ rpx: ress.windowWidth / 375 }) const ctx = wx.createCanvasContext(\'myCanvas\'); ctx.setFillStyle(\'#fff\'); //为创建的canvans上下文添充颜色 如果没有设置 fillStyle，默认颜色为 black。 ctx.fillRect(0, 0, 335 * rpx, 580 * rpx) // ctx.setFillStyle(\'#d5313a\'); //为创建的canvans上下文添充颜色 如果没有设置 fillStyle，默认颜色为 black。 // ctx.fillRect(20 * rpx, 100 * rpx, 295 * rpx, 350 * rpx) ctx.drawImage(that.data.headimgurls, 0 * rpx, 0 * rpx, 335 * rpx, 335 * rpx); //ctx.drawImage(that.data.bgWhite, 20 * rpx, 400 * rpx, 295 * rpx, 180 * rpx); ctx.save(); // 先保存状态 已便于画完圆再用 ctx.beginPath(); //开始绘制 //先画个圆 ctx.arc(38 * rpx, 374 * rpx, 25 * rpx, 0, Math.PI * 2, false); //false代表顺时针 图片的位置加半径 ctx.setStrokeStyle(\'#fff\') ctx.stroke(); ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 ctx.drawImage(that.data.headimgurl, 13 * rpx, 348 * rpx, 50 * rpx, 50 * rpx); // 推进去图片 ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下文即状态 可以继续绘制 ctx.setFillStyle("#999"); ctx.setFontSize(14 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(that.data.user.nickname+\'向您推荐了一个好东西!\', 76 * rpx, 380 * rpx); ctx.setFillStyle("#3D3D3D"); ctx.setFontSize(14 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(\'今天我走了\', 13 * rpx, 430 * rpx); ctx.setFillStyle("#f03725"); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.setFontSize(18 * rpx); ctx.fillText(that.data.users.walkstep+\'\', 82 * rpx, 430 * rpx); ctx.setFillStyle("#3D3D3D"); ctx.setFontSize(14 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(\'步,\', (that.data.users.walkstep.toString().length*11+80) * rpx, 430 * rpx); ctx.setFillStyle("#3D3D3D"); ctx.setFontSize(14 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(\'共走了\', (that.data.users.walkstep.toString().length*11+110) * rpx, 430 * rpx); ctx.setFillStyle("#f03725"); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.setFontSize(18 * rpx); ctx.fillText(that.data.walk_km+\'\', (that.data.users.walksteps.toString().length*11+118+that.data.walk_sumk.toString().length*11) * rpx, 430 * rpx); ctx.setFillStyle("#3D3D3D"); ctx.setFontSize(14 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(\'公里\', (that.data.users.walksteps.toString().length*11+110+that.data.walk_sumk.toString().length*11*2) * rpx, 430 * rpx); ctx.setFillStyle("#3D3D3D"); ctx.setFontSize(14 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(\'总里程距离\', 13 * rpx, 460 * rpx); ctx.setFillStyle("#f03725"); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.setFontSize(18 * rpx); ctx.fillText(that.data.users.walksteps+\'\', 82 * rpx, 460 * rpx); ctx.setFillStyle("#3D3D3D"); ctx.setFontSize(14 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(\'步,\', (that.data.users.walksteps.toString().length*11+80) * rpx, 460 * rpx); ctx.setFillStyle("#3D3D3D"); ctx.setFontSize(14 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(\'总共打卡\', (that.data.users.walksteps.toString().length*11+110) * rpx, 460 * rpx); ctx.setFillStyle("#f03725"); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.setFontSize(18 * rpx); ctx.fillText(that.data.signnum+\'\', (that.data.users.walksteps.toString().length*11+155+that.data.signnum.toString().length*11) * rpx, 460 * rpx); ctx.setFillStyle("#3D3D3D"); ctx.setFontSize(14 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(\'次\', (that.data.users.walksteps.toString().length*11+112+that.data.walk_sumk.toString().length*11*2) * rpx,460 * rpx); ctx.setFillStyle(\'#f5f5f5\') ctx.fillRect(13* rpx, 480 * rpx, 310 * rpx, 90 * rpx) ctx.drawImage(that.data.code,26 * rpx, 496 * rpx, 60 * rpx, 60 * rpx); ctx.setFillStyle("#333"); ctx.setFontSize(12 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(that.data.user.nickname, 100 * rpx, 526 * rpx); ctx.drawImage("/image/add.png", 140 * rpx, 516 * rpx, 12 * rpx, 12 * rpx) ctx.setFillStyle("#333"); ctx.setFontSize(12 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(that.data.user.cityname, 156 * rpx, 526 * rpx); ctx.setFillStyle("#333"); ctx.setFontSize(12 * rpx); //字大小 ctx.setTextAlign(\'left\'); //是否居中显示，参考点画布中线 ctx.fillText(\'平台担保交易,一键提现到账\', 100 * rpx, 546 * rpx); ctx.draw(); }, saveImg() { let that = this; var res = wx.getSystemInfoSync() var rpx = res.windowWidth / 375 that.setData({ rpx: res.windowWidth / 375 }) wx.canvasToTempFilePath({ x: 0, y: 0, width: 335 * rpx, //画布宽高 height: 580 * rpx, destWidth: 1005 * rpx, //画布宽高*dpr 以iphone6为准 destHeight: 1740 * rpx, //放大2倍以上，解决保存的图片模糊的问题 canvasId: \'myCanvas\', success: function (res) { console.log(res.tempFilePath) //生成的临时图片路径 wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success: function (res) { console.log(res); wx.showToast({ title: \'保存成功\', }) }, fail: function () { console.log(\'a\') } }) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this._getUserinfo(); }, _getUserinfo: function () { let that = this app.HTTP.post(app.URL.userinfo_url, { m: \'homeShare\', city: app.globalData.city }, (info) => { wx.setStorageSync(\'user_info\', info.userinfo) that.setData({ signnum: info.signnum, walk_step: parseInt(info.walkstep), walk_sum: info.walksteps, walk_sumk: (info.walksteps * 0.75 * 0.001).toFixed(1), walk_km: (parseInt(info.walkstep) * 0.75 * 0.001).toFixed(1), users: info, user: info.userinfo, userImg: info.share_imgs }) wx.downloadFile({ url: info.userinfo.headimgurl, success: function (res2) { that.setData({ headimgurl: res2.tempFilePath }); let _suid = `user_id=${that.data.user.uid}`; let _page = "pages/newPage/idx/index"; // that._getFxcode(_page, _suid); //that.canvasImg(); } }) wx.downloadFile({ url: info.share_imgs[0].img, success: function (res2) { that.setData({ headimgurls: res2.tempFilePath }); } }) }) }, _getFxcode: function (_page, _scene) { let that = this app.HTTP.post(app.URL.hao_bao_home, { //m: "getQrcode", page: _page, param: _scene, }, (res) => { wx.downloadFile({ url: res.url, success: function (res2) { that.setData({ code: res2.tempFilePath }); that.canvasImg(); } }) }); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
以上是关于微信小程序，当字数不确定时的右移的主要内容，如果未能解决你的问题，请参考以下文章