码迷,mamicode.com
首页 > 微信 > 详细

微信小程序优化

时间:2021-06-02 20:52:46      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:程序优化   ons   mini   需要   excludes   提示   开发   ini   MinIP   

小程序优化

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

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

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

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

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

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

生成:

? 工具可以为当前正在预览的页面生成骨架屏代码。工具入口位于模拟器面板右下角三点处。点击生成后会在当前页面文件夹中生成两个文件page.skeleton.wxmlpage.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等忽视或隐藏部分页面元素,以获取更优的展示效果。

微信小程序优化

标签:程序优化   ons   mini   需要   excludes   提示   开发   ini   MinIP   

原文地址:https://www.cnblogs.com/dubayaoyao/p/14839792.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!