微信小程序优化

小程序优化

1、调试器 Audits 评分报告定位问题

? 打开调试器 Audits 面板，点击”开始“按钮，然后自行操作小程序界面，运行过的页面就会被“体验评分”检测到。运行完后，会生成评分报告。未通过项可以定位到文件中，并给出优化建议。可根据优化建议对相应功能进行优化。

? 也可在项目配置文件中配置“自动运行评分体验”。该功能会在开发调试小程序时，实时检查，一旦发现体验分数低于 70 分时，系统会在 console 面板打印一个 warning 信息提示开发者，此时开发者可以切到 Audits 面板查看详情。（不建议，可能会导致开发者工具频繁闪退）

评分规则：https://developers.weixin.qq.com/miniprogram/dev/framework/audits/scoring.html

2、首屏渲染慢时先展示骨架屏

? 骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。
微信小程序中可以使用开发者工具直接生成骨架屏，步骤如下：

生成：

? 工具可以为当前正在预览的页面生成骨架屏代码。工具入口位于模拟器面板右下角三点处。点击生成后会在当前页面文件夹中生成两个文件page.skeleton.wxml 和 page.skeleton.wxss 两个文件，分别为骨架屏代码的模板和样式。

引入：

<!-- pages/index/index.wxml 引入模板 -->
<import src="index.skeleton.wxml"/>

/* pages/index/index.wxss 中引入样式 */
@import "index.skeleton.wxss";

使用：

<template is="skeleton" wx:if="{{loading}}"/>

配置：

? 可以在project.config.json 增加字段 skeleton-config 进行骨架屏配置。可根据需要设置文字、图片、按钮的颜色和形状，同时可根据 excludes、remove、hide等忽视或隐藏部分页面元素，以获取更优的展示效果。