UNI-APP 实际问题记录

最近须要将一个原来vuejs 技术栈的 挪动端业务革新小程序，基于老本和工夫的思考，抉择了 uni-app ，一开始间接将旧代码迁入到新的工程里。在逐渐开发过程中，遇到了一些问题，整顿记录一下，当然这些问题可能只是在咱们我的项目特定场景、特定状况下呈现的，仅供参考，提供一个思路。

语法问题

  • 编译后，WXML提醒 bad attrs

    在于template中写了个短路运算，v-if="false && item.count > 1" (之前次要是为了避免产品又要改回来，加了短路运算)。

    解决方案：删除短路运算相干代码

  • v-show 判断问题

    v-show 在数据表达式条件成立后，体现后果谬误。 v-show="count > 0", 当count > 0的时候，v-show对应的el 仍旧没有显示进去。

    解决方案： v-show 改为 v-if

自定义配置

  • 自定义构建配置

    咱们须要将小程序中用到的图片、字体构建到cdn 服务中，而不是打包在小程序代码中，所以须要批改构建工作流。

    在官网文档中，反对 vue.config.js来配置一些 webpack 工作流。

    对于图片、字体等默认是会对小于40KB进行base64。

    因为vue-cli 中，字体、图片等用的是 url-loader，所以为了将图片、字体构建到cdn种，须要在 vue.config.js 中配置 url-loader， url-loader fallback 到 file-loader。

    先看下残缺配置

// vue.config.js'use strict'const path = require('path')const isWin = /^win/.test(process.platform)const isProd = process.env.NODE_ENV === 'production'const normalizePath = (path) => (isWin ? path.replace(/\\/g, '/') : path)const extConfig = require('./src/ext.json')function resolve(dir) {  return path.join(__dirname, dir)}// 配置H5 跨域const devServer = {  target: 'your.domain.com',  // 重要  changeOrigin: true,  pathRewrite: { '^/': '' },  // 重要  secure: false,  prependPath: true,  onProxyReq: function (proxyReq, req, res) {  },}module.exports = {  // 门路别名  chainWebpack: (config) => {    /* .resolve.alias      .set('@', resolve('src'))      .set('@p', resolve('src/pages'))      .set('@c', resolve('src/components'))      .set('@a', resolve('src/assets'))      .set('@utils', resolve('src/utils'))      .end()      .extensions.add('.js')      .add('.vue')      .add('.scss')      .end()      .end() */    config.module      .rule('vue')      .test([/\.vue$/, /\.nvue$/])      .use('vue-loader')      .tap((options) =>        Object.assign({}, options, {              // 配置 小程序image标签的src 也进行资源门路转换          transformAssetUrls: {            image: 'src',          },        }),      )      .end()    if (isProd) {      config.module        .rule('images') //.test(/\.(png|jpe?g|gif|svg)(\?.*)?$/)        .use('url-loader')        .tap((args) => {          const newArgs = Object.assign({}, args, {            // 配置转换规则，-1 示意任何大小的资源都不进行base64转换            limit: -1,            // 这里重要，publicPath 配置给url-loader 会不失效，必须配置到fallback里传递给file-loader            fallback: {              loader: 'file-loader',              options: {                publicPath(url, resourcePath, context) {                  return (                    extConfig.ext.publicPath +                    normalizePath(path.relative(process.env.UNI_INPUT_DIR, resourcePath))                  )                },                emitFile: false,              },            },          })          return newArgs        })        .end()        .end()        .rule('fonts')        .use('url-loader')        .tap((args) => {          const newArgs = Object.assign({}, args, {            limit: -1,            fallback: {              loader: 'file-loader',              options: {                publicPath(url, resourcePath, context) {                  return (                    extConfig.ext.publicPath +                    normalizePath(path.relative(process.env.UNI_INPUT_DIR, resourcePath))                  )                },                emitFile: false,              },            },          })          return newArgs        })    }  },  devServer: {    disableHostCheck: true,    proxy: {      '/api': devServer,    },  },}

另外，uni-app 中 门路别名默认 @ 指向 src目录，如果配置了其余自定义别名，比方下面配置中的 @c会导致编译的时候无奈正确辨认 @c 援用的资源。

性能优化相干

uni-app 会将 component 的 data 属性转化为小程序的 data， vue中任何批改 data的操作都会最终触发小程序的 setData，家喻户晓， setData 是小程序性能优化一个重点。

  1. 与template 无关的数据尽量不要放到 data里，否则任何批改的操作都会导致 setData，从而影响性能。

  2. 尽量不要频繁的触发setData

    <script>   data() {    return {      name: ['YoRoling']    }  },  methods: {    getName() {      if (a) {        // 触发setData        this.name.push('a')      }      if (b) {        // 触发setData             this.name.push('b')      }    }  }</script>

    下面的代码，a和b 都会导致最终触发 setData，而且是触发两次，对于这种简略的数据可能还好，如果是一个简单的JSON 对象，setData 可能就会引起性能问题。

    应用长期变量存储数据，最初再一次性批改 data。