zoukankan      html  css  js  c++  java
  • 微信小程序优化

    小程序优化

    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等忽视或隐藏部分页面元素,以获取更优的展示效果。

  • 相关阅读:
    web复制到剪切板js
    thinkphp 级联菜单实现
    一次$.getJSON不执行的记录
    php实现ppt转图片,php调用com组件问题
    模拟生成一天温度数据,精确到秒
    ffmpeg推rtmp流到crtmpserver直播
    博客新窝CSDN站
    Android开源框架Afinal第二篇——庖丁解牛,深入调查
    Android开源框架Afinal第一篇——揭开圣女的面纱
    AndroidのListView之加载说
  • 原文地址:https://www.cnblogs.com/dubayaoyao/p/14839792.html
Copyright © 2011-2022 走看看