小程序踩坑

1.wepy框架下的wpy文件在vscode编辑器下每一行都报错，在vscode里设置搜索vetur，将勾选的去掉

2.小程序的wxss无法解析background：url（'本地图片'），，例如弹窗关闭图标，也就是wepy等框架无法用这样

3.canvas生成图片

①文字换行：通过技术来使文字换行

wordsWrap (ctx, name, nameWidth, maxWidth, startX, srartY, wordsHight) {
      let lineWidth = 0
      let lastSubStrIndex = 0
      for (let i = 0; i < name.length; i++) {
        lineWidth += ctx.measureText(name[i]).width
        if (lineWidth > maxWidth) {
          ctx.fillText(name.substring(lastSubStrIndex, i), startX, srartY)
          srartY += wordsHight
          lineWidth = 0
          lastSubStrIndex = i
        }
        if (i == name.length - 1) {
          ctx.fillText(name.substring(lastSubStrIndex, i + 1), startX, srartY)
        }
      }
    },

②图片内字体模糊：

③绘制网络图片：wx.downloadFile(OBJECT)和wx.getImageInfo(OBJECT)，把图片下载下来存为临时路径再绘制图片

createdCode () {
      const ctx = wx.createCanvasContext('shareCanvas')
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const time = year + '.' + month + '.' + day
      ctx.setFillStyle('#fff')
      ctx.drawImage(this.bgSrc, 0, 0, 670 * this.dpr, 400 * this.dpr)
      if (this.tempPath) {
        ctx.drawImage(this.tempPath, 470 * this.dpr, 60 * this.dpr, 136 * this.dpr, 136 * this.dpr)
      }
      ctx.font = `normal bold ${Math.floor(32 * this.dpr)}px PingFangSC-Medium, PingFang SC`
      ctx.setTextBaseline('middle')
      ctx.fillText(this.name, 60 * this.dpr, 60 * this.dpr, 100)
      ctx.font = `normal ${Math.floor(24 * this.dpr)}px PingFangSC-Medium, PingFang SC`
      ctx.fillText(this.job, 180 * this.dpr, 60 * this.dpr, 100)
      ctx.fillText(this.company, 60 * this.dpr, 122 * this.dpr, 180)
      ctx.fillText(`+86-${this.phone}`, 60 * this.dpr, 200 * this.dpr, 180)
      ctx.fillText(this.email, 60 * this.dpr, 250 * this.dpr, 180)
      this.wordsWrap(ctx, this.address, ctx.measureText(this.address).width, 270, 60 * this.dpr, 300 * this.dpr, 17)
      ctx.draw(false, () => {
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 670 * this.dpr,
          height: 400 * this.dpr,
          // destWidth: 670*this.dpr,
          // destHeight: 400*this.dpr,
          fileType: 'png',
          quality: 1,
          canvasId: 'shareCanvas',
          success: function (res) {
            if (!res.tempFilePath) {
              wx.showModal({
                title: '提示',
                content: '图片绘制中，请稍后重试',
                showCancel: false
              })
            }
            wx.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: (res) => {
                showToast('名片保存成功', 'success')
              },
              fail: (res) => {
                showToast('名片保存失败')
              }
            })
          }
        })
      })
    },

4、wepy使用$emit('xxx', a, b),父组件用@xxx="xxx(arguments)"接受多个参数

5、wepy配置

const path = require('path');
var prod = process.env.NODE_ENV === 'production';
var debug = process.env.NODE_ENV === 'debug';
// 【config】配置Less自动添加浏览器前缀-1  需要安装less-plugin-autoprefix
const LessPluginAutoPrefix = require('less-plugin-autoprefix')

module.exports = {
  wpyExt: '.wpy',
  eslint: true,
  cliLogs: !prod,
  build: {},
  resolve: {
    alias: {'@': path.join(__dirname, 'src')},
    aliasFields: ['wepy', 'weapp'],
    modules: ['node_modules']
  },
  compilers: {
    less: {
      compress: prod,
      // 【config】配置Less自动添加浏览器前缀-2
      plugins: [new LessPluginAutoPrefix({browsers: ['Android >= 2.3', 'Chrome > 20', 'iOS >= 6']})]
    },
    babel: {
      sourceMap: true,
      presets: ['env'],
      plugins: [
        'transform-class-properties',
        'transform-decorators-legacy',
        'transform-object-rest-spread',
        'transform-export-extensions',
      ]
    }
  },
  plugins: {},
  appConfig: {
    noPromiseAPI: ['createSelectorQuery'],
    // 【config】配置启动地址
    rootURL: prod ? '线上地址' : debug ? 'mock地址' : '本地测试地址'
  }
}
if (prod) {
  // 压缩sass
  // module.exports.compilers['sass'] = {outputStyle: 'compressed'}
  // 压缩js
  module.exports.plugins = {
    uglifyjs: {
      filter: /\.js$/,
      config: {
        compress: {
          // 打包后自动去除所有log debugger
          drop_console: true,
          drop_debugger: true
        }
      }
    },
    imagemin: {
      filter: /\.(jpg|png|jpeg)$/,
      config: {
        jpg: {quality: 80},
        png: {quality: 80}
      }
    }
  }
}

6、小程序原生开发样式vscode可以使用easy less，安装之后在首选项里面设置“less.compiler”:{"outExt": ".wxss"}，保存之后会 自动生成对应的wxss文件

7、小程序使用vant tabs组件选中下划线位置异常

解决方法：this.$wx.selectComponent('#tabs').resize()，再不行的话就用v-if控制

8、小程序滚动到底部

wx.createSelectorQuery().select('#j_page').boundingClientRect(function(rect){
       // 使页面滚动到底部
      wx.pageScrollTo({
        scrollTop: rect.bottom + 5000
      })
    }).exec()

9、小程序原生button的圆角去除：button::after{border-radius:0;}

10、小程序根据环境自动选择接口地址：wx.getAccountInfoSync

11、显示或者隐藏原生的tabbar

// 隐藏tabbar
 wx.hideTabBar({
    fail: function() {
      setTimeout(function() { // 做了延时重试一次，作为保底。
        wx.hideTabBar()
      }, 500)
    }
  })

// 显示tabbar
wx.showTabBar({
    fail: function() {
      setTimeout(function() { // 做了个延时重试一次，作为保底。
        wx.showTabBar()
      }, 500)
    }
  })