UNI-APP实践题记录最近需要改造一个原vuejs技术栈的移动端业务的小程序。基于成本和时间的考虑，选择了uni-app，直接从一开始就把旧代码搬进了新项目。在逐步开发的过程中，遇到了一些问题，所以会整理记录下来。当然，这些问题可能只是在我们项目的特定场景和情况下才会出现。仅供参考，提供思路。语法问题WXML编译后提示badattrs因为template中写了一个short-circuit操作，v-if="false&&item.count>1"（之前添加这个short-circuit操作主要是为了防止product被改回来）。解决方法：删除短路操作相关的代码v-show判断问题满足数据表达式条件后，v-show显示的结果不正确。v-show="count>0"，当count>0时，仍然不显示v-show对应的el。解决方案：将v-show改为v-ifcustomconfigurationcustombuildconfiguration我们需要将小程序中使用的图片和字体构建到cdn服务中，而不是打包在小程序代码中，所以需要修改构建工作流程。在官方文档中，支持vue.config.js配置一些webpack工作流。对于图片、字体等，默认是对小于40KB的文件进行base64。因为在vue-cli中，字体、图片等都使用了url-loader，所以为了将图片、字体构建到cdn中，需要在vue.config.js中配置url-loader，url-loaderfallback到file-装载机。先看下完整配置//vue.config.js'usestrict'constpath=require('path')constisWin=/^win/.test(process.platform)constisProd=process.env.NODE_ENV==='production'constnormalizePath=(path)=>(isWin?path.replace(/\\/g,'/'):path)constextConfig=require('./src/ext.json')functionresolve(dir){returnpath.join(__dirname,dir)}//配置H5跨域constdevServer={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)=>{constnewArgs=Object.assign({},args,{//配置转换规则，-1表示任何大小的资源都不会转换成base64limit:-1,//这个很重要，publicPath配置到url-loader不会生效，必须配置在回退并传递给文件加载器fallback:{loader:'file-loader',options:{publicPath(url,resourcePath,context){return(extConfig.ext.publicPath+normalizePath(path.relative(process.env.UNI_INPUT_DIR,资源路径)))},emitFile:false,},},})returnnewArgs}).end().end().rule('fonts').use('url-loader').tap((args)=>{constnewArgs=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,},},})returnnewArgs})}},devServer:{disableHostCheck:true,代理:{'/api':devServer,},},}另外uni-app中的路径别名默认是@指向src目录。如果配置了其他自定义别名，如上述配置中的@c，编译时将无法正确识别@c引用的资源。性能优化相关的uni-app会将组件的data属性转化为小程序的data。vue中任何修改数据的操作，最终都会触发小程序的setData。众所周知，setData是小程序性能优化的一个重点。与模板无关的数据尽量不要放在data中，否则任何修改操作都会引起setData，影响性能。尽量不要触发setData上面代码中，a和b最终都会触发setData，而且触发了两次。对于这个Simpledata可能还好，如果是复杂的JSON对象，setData可能会造成性能问题。使用临时变量存储数据，最后再次修改数据。
