最新踩坑记录canvas使用drawImage报的错

image.png

• 这个主要是在最新的api中canvas是使用wx.createSelectorQuery获取的节点，当生成图片的时候，不能使用wx.canvasToTempFilePath这个api，需要使用canvas.createImage()这个api创建图片，在图片的onload中使用ctx.drawImage第一个参数记得是当前创建的图片标签，不是图片的路径，否则就会提示上面的报错

  
  
  image.png

1、写class中的三木运算符的时候不要进行换行，否则编辑器报错

2、在小程序中使用flex进行布局，在ios手机上，也就是ipone等机型，底部会有问题，我们需要加一个代码padding-bottom: env(safe-area-inset-bottom);（可以加到当前整个大的盒子中就可以）（可以百度这一句代码，详细的看看）将底部的安全距离进行流出来，还有有时候底部固定，中间进行overflow:auto；flex:1;的时候，底部的高度会没有了，这个时候第一种就是将高度加多一点，第二种就是外部不加高度，使用子元素的高度加margin或者是padding进行顶一下

• 不加底部安全距离的

  
  
  image.png

• 加了底部安全距离的

  
  
  image.png

3、自定义的底部弹窗，点击阴影和关闭按钮进行隐藏，但是点击其他的空白区域也会触发冒泡事件，直接给白色的部分，大的盒子加上catchtap，这个点击事件可以什么也不做，这样的话，再点击其他的空白区域就不会进行触发冒泡事件了

image.png

image.png

image.png

4、 当我们使用点击按钮或者是三个点进行分享，由于在生命周期中，没有成功，失败的回调函数，我们不知道用户有没有点击分享出去，点击分享，在进行取消，也是会被认为是分享成功的，可以使用wx.showShareMenu这个解决，不过这个目前是测试版本，只支持安卓手机，所以会有点问题

5、微信小程序中input框禁止输入表情符号

• 注：在小米手机的输入法上，表情会带一个空格，会有点问题

//禁止input框中输入表情符号
  const emoji = function(data){//data就是input框中的value值
    let reg = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi ;
    if(data.match(reg)){
      data = data.replace(reg,'');
    }
    return data;
  }

6、websocket的注意事项（可以查看我的这篇文章）

7、在小程序中使用web-view的注意事项

• 首先需要创建一个页面进行使用web-view

<web-view src="https://www.baidu.com"></web-view>

• 还有登录微信公众平台，开发管理---->开发设置中将我们的业务域名进行配置，注意是https的别加错了
• 注意：如果你的h5页面更新的很频繁，那么你直接使用时间戳的形式（加载h5页面的时候会很慢），如果长时间才进行更新一次，可以直接将随机数进行写死就可以出来了

<web-view src="https://www.baidu.com/help.html?p=123'}}"></web-view>
<!-- <web-view src="https://www.baidu.com/help.html?p=timestamp'}}"></web-view> -->

• 每次更新h5后，因为有缓存的原因，我们要将随机数进行修改，这样的话，页面就会是你修改后的了
• 我之前看好像还需要下载证书啥的需要进行验证，这个的话，你可以百度下哈，这里直说修改h5后，页面没有进行更新怎么解决的

小程序跳转到其他的小程序，接收到的参数，一般会在app.js中的onLaunch和onShow中都可以接收到

• 在这里说得是要在onShow中进行接收，原因：在onlaunch中首次可以接收到，当用户点击A小程序跳转到B小程序，第一次参数是没有问题的，用户关闭B小程序，在次点击A小程序跳转到B小程序，（多次重复这个操作），就会导致我们参数接收的出现问题

小程序获取用户的运动步数的问题

• 使用wx.getSetting可以获取用户有没有进行授权，在使用wx.authorize进行获取的某一个权限进行弹框，提示用户进行授权，也可以使用需要授权的api，也会进行弹框提示的

• 注意：

  • 1、这里当弹框授权后，需要用户进行授权，用户点了拒绝之后，不可以再次调用授权的api进行弹框提示用户授权（此时会直接默认是拒绝的状态），我们可以进行提示用户，并且使用wx.openSetting直接打开设置的页面，让用户进行手动的授权

  • 2、获取微信运动步数的时候，使用api获取的是三十天内的，也可以获取到用户当天的步数，但是需要用户先点击进入微信运动，在点击进入小程序，这样我们拿到的数据就是最新的了，不然就需要等待微信的刷新机制进行刷新后，我们才能获取到用户最新的步数（这样的话，会有延迟，数据不是最新的问题，目前没有好的解决办法）

 wx.getWeRunData({//获取微信用户运动步数的api
      success:res=>{
        console.log(res);
      },
      fail:msg=>{//用户拒绝后的处理
        console.log('用户拒绝');
        console.log(msg);
        wx.showModal({
          title:'需要授权才可以',
          success:res=>{
            if(res.confirm){
              wx.openSetting({//直接打开到设置页面，让用户自己手动的进行授权
                success (res) {
                  console.log(res.authSetting['scope.werun']);//返回true，说明用户授权了，返回false，说明用户没有或者是关闭了，需要进行提示
                }
              })
            }
          }
        })
      }
    })
=================使用wx.getSetting获取用户是否授权===============
 wx.getSetting({
      success(res) {
        console.log('---------sasa-----------');
        console.log(res.authSetting['scope.werun']);
        if (!res.authSetting['scope.werun']) {
          wx.authorize({
            scope: 'scope.werun',
            success () {
              console.log('111');
            },
            fail:_msg=>{
              // console.log((_msg));
            }
          })
        }
      },
      fail:msg=>{
        console.log('错误');
        console.log(msg);
      },
      complete:_s=>{
        console.log(_s);
      }
    })

小程序中使用canvas，获取不到node，这个我们要将canvas写成是单标签就可以了(或者你直接将我的这段代码直接进行cv就可以了)

<view class="wrap">
  <canvas type="2d" id="canvas" style="width: 100%; height: 100%;" />
</view>

onReady: function () {
  // 使用 wx.createContext 获取绘图上下文 context
  const query = wx.createSelectorQuery()
    query.select('#canvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        console.log(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
        ctx.scale(dpr, dpr)

        ctx.fillRect(0, 0, 100, 100)
      })
  },

微信小程序中使用uCharts

• 根据项目的需求，选用了uCharts中的刻度表的功能，uCharts是使用uniapp编写的插件，可以在全端使用，但是我当时看了好几遍的文档，还是没有看出来，在gitee上的项目实例中是可以显示的，但是我想要其他的功能，不知道怎么整，最后只能根据项目实例中的UNIAPP，直接复制进行简单的一些修改就行，他有个小程序扫码体验，里面的每个功能都会显示在那个页面下，根据这个进行查找就可以了，根据你的项目需求，或许还需要进行简单的修改下源码

  
  
  image.png

• 第一种是uCharts中提供的，进行简单的修改了下源码

• 第二个是百度就有的，进行简单的修改了下

• 图片中的红色部分是项目中要有个图片，这里就简单的用了一个图片进行展示了

• 这个的源码的话，就放到我的gitee上的仓库了，有需要的小伙伴可以看看，这个是测试所以写的没怎么进行优化，可以凑活看哈https://gitee.com/fen-xin/progress-bar.git

微信小程序中生成小程序码，长按手机不展示识别二维码的情况

• 由于生成小程序码是通过后台请求微信返回的一个图片路径，然后使用canvas进行画上去的，并生成图片，此时长按点击没有显示识别二维码，解决：1、可能是生成的小程序码是个透明的，然后canvas中底部的背景不是白色的，所以导致的

在小程序中生成条形码

• 一定要使用wxapp-barcode这个插件，使用wxbarcode这个插件生成的条形码不会被识别，切记！！！
• 使用方法，首先下载安装(将文件提取放到小程序的文件夹中)

npm i wxapp-barcode

• 下载下来的文件中有demo，作者写的案例，不会的可以看看那个

  
  
  image.png

使用scroll-view的上拉加载及页面本身的下拉刷新的问题

• 当我们下拉刷新时，清空当前数据，加载后重新赋值，为了让页面回到顶部，此时，你会发现接口被调用了两遍
• 触发下拉刷新的方法后，他加载的数据要是有10条，那么满足scroll-view的上拉加载的条件，此时，又会触发一次

• 解决方法： 我们可以不让当前的数据为空，加载后，让scroll-view的有个scroll-top为0 ，就可以滚动到顶部了

  
  
  image.png

• data 中进行声明

  
  
  image.png

• 数据加载出来之后，进行重新赋值

  
  
  image.png

在微信小程序中使用搜索功能，点击历史记录要进行排序，将当前点击的放到第一位

• 思路：
  • 1、当我们进行搜索的时候，要进行去重，还有进行默认不排序，历史记录进行存储
  • 2、点击历史记录的时候，进行排序，存储历史记录进行覆盖
  • 3、每次进入当前的搜索页面的 时候，在onshow中进行获取历史记录的存储数据，进行排序，赋值

image.png

image.png

image.png

在微信小程序中，需要一直进行页面的跳转，但是navigateTo只能嵌套10层

• 使用getCurrentPages() 可以获取当前的页数，当超过几页之后进行关闭当前页面，在进行跳转

image.png

image.png

(要想实现canvas签名可使用mini-smooth-signature这个插件)

• 使用canvas最新的api进行绘制，需要获取canvas的节点信息，返回null的问题
• 首先要有type和id，id不是canvas-id看清楚哦
• 要有默认的高度和宽度，初始化的时候，可以将高度进行重新赋值

<canvas type="2d" id="signature1" style="width:{{width1}}px;height:{{height1}}px;"></canvas>
data: {
    width1: 320,
    height1: 200,
  },

后续碰到其他的问题，会进行及时更新的，小伙伴们也可以将你遇到的问题进行留言，让我们一起完善这篇文章，加油！！！