记录一下开发中遇到的小程序问题

问题目录

1. CanvasContext.fillText自动换行
2. 当某个页面关闭时返回首页或某个特定页面
3. text自动换行
4. 文字过长省略号显示
5. 分享相关
6. view宽度自适应
7. for循环列表改变list中某个值

CanvasContext.fillText自动换行

    var bookName = '很长很长的一个标题很长很长的一个标题很长很长的一个标题很长很长的一个标题'
    var chr = bookName.split(""); //将一个字符串分割成字符串数组
    var temp = "";
    var row = [];
    ctx.setFontSize(18)//设置字体大小
    ctx.setFillStyle("#000")//设置字体颜色
    for (var a = 0; a < chr.length; a++) {
      /**注意，这个130是你自己定义的文字最大宽度，与下面fillText中最后一个参数一致*/
      if (ctx.measureText(temp).width < 130) {
        temp += chr[a];
      } else {
        a--; //这里添加了a-- 是为了防止字符丢失
        row.push(temp);
        temp = "";
      }
    }
    row.push(temp);

    //如果数组长度大于2 则截取前两个
    if (row.length > 2) {
      var rowCut = row.slice(0, 2);
      var rowPart = rowCut[1];
      var test = "";
      var empty = [];
      for (var a = 0; a < rowPart.length; a++) {
        //这里的120可以自己定义，一般来说是定义的宽度-10
        if (ctx.measureText(test).width < 120) {
          test += rowPart[a];
        } else {
          break;
        }
      }
      empty.push(test);
      var group = empty[0] + "..." //这里只显示两行，超出的用...表示
      rowCut.splice(1, 1, group);
      row = rowCut;
    }
    for (var b = 0; b < row.length; b++) {
      ctx.fillText(row[b],30, 30  + b * 20, 130);
    }

当某个页面关闭时返回首页或某个特定页面

比如首页-->B-->C，C想返回的时候直接回到首页，我们可以在C界面中的onUnload方法中实现一个回到首页方法即可

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
    wx.switchTab({
      url: '../home/home'
    })
  },

text自动换行

text{
word-break: keep-all;//去除中文后面空的占位
word-wrap: break-word;//换行的

文字过长省略号显示

单行的情况

.text-ellipsis-oneline {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

多行的情况，webkit-line-clamp是限制的行数

.text-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; 
  overflow: hidden;
  text-overflow: ellipsis;
}

分享

官方推荐的是使用button让用户自己触发分享事件，开发中可能要判断分享是来自自己定义的按钮还是右上角的转发按钮，所以我们要做一个区分，另外用户是分享到群还是个人也要我们区分，所以在下面直接给出代码。

1. 首先我们要在wxml中定义button

<button open-type='share'>分享</button>

2. 在js中定义onShareAppMessage(Object)方法

   
   

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }else if(res.from === 'menu'){
      //来自右上角的转发
    }
    return {
      title: '自定义转发标题',
      path: '/page/user?id=123',
      imageUrl:'../../res/img.png',
      success(res){
          if (res.hasOwnProperty('shareTickets')) {
              //分享到群
          } else {
              // 分享到个人
          }      
      }
    }
  }
})

view宽度自适应

给view标签添加一个属性
width:fit-content

for循环列表改变list中某个值

  for (var i = 0; i < list.length; i++) {
      var item = list[i]
      this.setData({
        ['list[' + i + ']']: {
          ...item,
          otherData,
        }
      })
  }

暂时就想到这么多，想到了在写。。。