• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号
登陆 注册

微信小程序，当字数不确定时的右移

原作者: [db:作者] 来自: [db:来源] 收藏 邀请 
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 () {

  }
})

鲜花
握手
雷人
路过
鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
More+
上一篇：
摆脱手机、即用即走，全球首款运行微信小程序的机器人来了 ...发布时间：2022-07-18
下一篇：
Android如何测试微信小游戏&amp;小程序？发布时间：2022-07-18
热门推荐
More+
热门话题
More+
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服（服务时间 9:00～18:00）

在线QQ客服
地址：深圳市南山区西丽大学城创智工业园
电邮：jeky_zhao#qq.com
移动电话：139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap