小程序性能

1. 大厂的小程序高性能之路
2. 小程序工程化探索

背景

在h5开发中可用的css适配单位有 em/百分比/rem/vw/vh/vmin/vmax，小程序提供了 rpx: 可以根据屏幕宽度进行自适应，规定屏幕宽为750rpx。

日常小程序开发中，一般设计图尺寸为 750 * 1334 px，则在小程序中一般 1px 直接写为 1rpx ，当小程序为竖屏（"pageOrientation": "portrait" 默认为竖屏）时，根据 rpx 可以直接还原UI图，但是当小程序为横屏（"pageOrientation": "landscape"）时，根据 rpx 适配就明显比较大，不符合UI图，因为 rpx 是根据屏幕宽度适配的。

在小程序后台 -》开发管理 -》运维中心 -》 错误日志 中可以看到小程序运行中的报错信息，但是代码都是压缩混淆的，那就需要如何去定位，下面说明说如使用微信开发者工具 Source Map。

1. 下载微信开发者工具

微信开发者工具

2. 下载sourceMap文件

uni-app钉钉小程序兼容性总结

本总结基于最开始使用 uni-app 开发的微信小程序，后续又需要开发钉钉小程序。

首先钉钉小程序需要自定义条件编译平台，在 package.json 文件中增加 uni-app 扩展节点，如下：

{
  ...
  "uni-app": {
    "scripts": {
      "mp-dingtalk": { 
        "title":"钉钉小程序", 
        "env": { 
          "UNI_PLATFORM": "mp-alipay" 
        },
        "define": { 
          "MP-DINGTALK": true 
        }
      }
    }
  }
  ...
}

小程序可以在 pages.json 中使用 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。

关于 tabBar 的配置可以查看 https://uniapp.dcloud.io/collocation/pages?id=tabbar 。但我们有时候在某个 tab 展示角标，比如微信第一个 tab 的未读消息提示，第三个 tab 的朋友圈未读消息，这些信息是不能通过 pages.json 中的 tabBar 来配置的，而是使用如下API进行设置：

最近开发项目中使用 uni-app 开发了 微信小程序，整个体验下来还算流畅，下面做一些总结：

HBuilderX安装

HBuilderX安装的时候选择标准版，不要下载APP开发版，至于uni-app编辑都可以在标准版里面通过插件安装或者是直接通过vue-cli命令行创建项目，另外就我个人使用之后，APP开发版编译小程序的时候，有时候会导致编译出来的小程序页面空白（只剩下<page></page>）。

微信开发者工具

HBuilderX运行/发布微信小程序在编译完成之后会尝试打开微信开发者工具，实际上就是用命令行控制微信开发者工具（命令行 V2），这个需要在开发者工具的设置 -> 安全设置中开启服务端口。