uniapp大项目如何瘦身

前一段时间，接到一个任务，uniapp移动端的应用要在微信小程序上线，看看我们在商店上架的apk应用包30M，这个项目是基于uniapp, uview-ui v1.8.4搭建的。
要知道，微信小程序的要求很多的，后来，一周后，项目顺利上线，那我是怎么做的呢？

微信官方要求

• 整个小程序所有分包大小不超过 20M
• 单个分包/主包大小不能超过 2M
• 用户隐私协议提交 —— 使用了获取用户信息的需要提交，比如获取定位，获取摄像头等

添加配置

• pages.json

"mp-weixin" : {
  "appid" : "wx01a0a0b420ef4c14",
  "setting" : {
    "urlCheck" : false,
    "es6" : true,
    "minified" : true // 重要
  },
  "optimization" : {
    "subPackages" : true // 重要
  },
  "usingComponents" : true, // 重要
  "uniStatistics" : {
    "enable" : false
  },
  "permission" : {
    "scope.userLocation" : {
      "desc" : "您的位置将用于绑定您的区域"
    }
  }
 }

• package.json

  打包命令后添加 –minimize
  推荐使用 yarn dev:mp-weixin

开发者工具配置

分包处理

其实就是把pages里对应的文件夹，拆分到同级文件夹去

https://uniapp.dcloud.io/collocation/pages.html#subpackages

• 引入包

  统一使用@，因为有分包的页面，路径已经变了

  import api from "@/api/index.js";
  import { getDictionary } from "@/common/util.js";

删掉项目多余插件，资源，不使用体积大的插件

• 比如axios，使用自带的uni.request
• 去掉 vue-signature-pad

素材压缩

• 方法1：使用图片压缩工具https://tinify.cn/，压缩图片
• 方法2：可以放到线上的图片尽量放在线上，使用cdn或者放在固定服务器上，最好和域名服务器同域名

开发中注意事项

使用单位rpx

text {
  width: 60rpx;
  height: 34rpx;
  line-height: 34rpx;
  font-size: 20rpx;
  border-radius: 6rpx;
  margin-left: 30rpx;
}

使用弹性布局

推荐阅读文章：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

demo: https://codepen.io/enxaneta/pen/adLPwv

减少使用、不使用内联样式，推荐使用class来写

减少使用uview的u-row, u-col， 推荐使用弹性布局，代码少，嵌套少

navbar 怎么写

首选方案：在使用page.json配置
次方案：自定义，但不要自定义高度和字体大小，会不协调

降低代码量

uview-ui库能满足需求的尽量多使用，不要自己重新写css

页面组件能复用就复用，页面也是如此

新建/编辑/详情应该是同一套代码。页面元素一样的话，一个页面来写的话，后续补充也是比较轻便

页面跳转

encodeURIComponent url比较长有空格有特殊字符可以使用
decodeURIComponent 不写会在小程序中报错，h5、Android不报错

 // 跳转页面
 uni.navigateTo({
   url: "/nursing/orderDetail?kh05=" + encodeURIComponent(JSON.stringify(e))
 });


 // 跳转后页面接收参数
onLoad: function (option) {
   //option为object类型，会序列化上个页面传递的参数
   this.kh05 = JSON.parse(decodeURIComponent(option.kh05)); //打印出上个页面传递的参数。
 },

小程序开发者工具会编译报错

一片红的时候，不要慌，检查下你的page.json不能出现多余的逗号和注释