一、文件类型

四种文件类型

  • WXML
    UI 页面结构
  • wxss
    样式文件
  • js
    逻辑处理，网络请求

  • json
    小程序设置，页面注册，页面标题，tabbar

    主要文件

  • app.json
    入口文件，
    配置文件入口，页面注册，网络设置，小程序的 window 背景，

    1. {
    2. "page": {},
    3. "window":{},
    4. "tabBar":{}
    5. }

  • app.js

  • app.wxss

    二、原理

    微信小程序采用 JavaScript、WXML、WXSS 三种技术进行开发,本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口微信的架构，是数据驱动的架构模式，它的UI 和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现。
    小程序分为两个部分webview和appService 。其中 webview 主要用来展现 UI ，appService 有来处理业务逻辑、数据及接口调用。它们在两个进程中运行，通过系统层 JSBridge 实现通信，实现 UI 的渲染、事件的处理

    三、小程序页面间有哪些传递数据的方法

    使用全局变量实现数据传递

    1. App({
    2. globaData: {
    3.   msg: 'hello',
    4. },
    5. })
    getApp() 拿到存储的信息

    url 参数

    1. wx.navigateTo({
    2. url: '../pageD/pageD?name=raymond&gender=male',
    3. })
    在目标页面的 onLoad 生命周期函数的参数 options 中拿到。

    四、提高小程序的应用速度

    启动加载优化

    在小程序启动时，微信会在背后完成：下载小程序代码包，加载小程序代码包，初始化小程序首页。
    初始化小程序环境是微信环境做的工作，我们只需要控制代码包的大小，和通过一些相关的缓存策略控制，和资源控制。逻辑控制，分包加载控制来进行启动加载优化。
    勾选开发者工具中，上传是压缩代码（若使用wepy高级版本，自带压缩）精简代码；
    去掉不必要的wxml结构和未使用的wxss定义；
    减少在代码包中直接嵌入的资源文件，（比如全国地区库，微信有自带的，在没有必要的时候，不要使用自己的库）；
    及时清理无用的资源（js文件、图片、demo页面等）压缩图片，使用合适的图片格式，减少本地图片数量等；
    如果小程序比较复杂，优化后的代码总量仍可能比较大，此时可以采用分包加载的方式进行优化，分包加载初始化时，只加载首页相关、高频访问的资源，其他的按需加载；
    提前做好异步请求，页面最好在 onLoad 时异步请求数据，不要在onReady时请求；
    做好缓存数据策略，请求时先展示缓存内容，让页面尽快展示，请求到最新的数据之后在刷新避免白屏，使用骨架屏等。

    数据通信优化

    为了提高数据更新的性能，开发者在这行 setData 调用时，最好遵循以下原则：
    不要过于频繁的调用 setData ，应考虑将多次 setData 合并成一次setData 调用；
    数据通信的性能和数据量正相关，因而如果有一些数据字段不在界面中展示且数据结构比较复杂活包含长字符串，则不应使用setData来设置这些数据；
    与界面无关的数据最好不要设置在data 中，可以考虑设置在 page 对象的其他字段下。
    example：
    1. Page({
    2. onShow: function() {
    3.   // 不要频繁调用setData
    4.   this.setData({ a: 1 })
    5.   this.setData({ b: 2 })
    6.   // 绝大多数时候可优化为
    7.   this.setData({ a: 1, b: 2 })
    8.   // 不要设置不在界面渲染时使用的数据，并将界面无关的数据放在data外
    9.   this.setData({
    10.     myData: {
    11.       a: '这个字符串在WXML中用到了',
    12.       b: '这个字符串未在WXML中用到，而且它很长…………………………'
    13.     }
    14.   })
    15.   // 可以优化为
    16.   this.setData({
    17.     'myData.a': '这个字符串在WXML中用到了'
    18.   })
    19.   this._myData = {
    20.     b: '这个字符串未在WXML中用到，而且它很长…………………………'
    21.   }
    22. }
    23. })

    事件通信优化

    视图层会接受用户事件，如点击事件、触摸事件等。当一个用户事件被触发且有相关的事件监听器需要被触发时，视图层会将信息反馈给逻辑层。这个反馈是异步的，会产生延迟，降低延迟的
    方法有两个：
    去掉不必要的事件绑定（WXML中的bind和catch），从而减少通信的数据量和次数；
    事件绑定时需要传输target和currentTarget的dataset，因而不要在节点的data前缀属性中放置过大的数据。

    渲染优化

    页面方法onPageScroll使用， 每次页面滚动都会触发，避免在里面写过于复杂的逻辑 ，特别是一些执行重渲染页面的逻辑）在进行视图重渲染的时候，会进行当前节点树与新节点树的比较，去掉不必要设置的数据、减少setData的数据量也有助于提升这一个步骤的性能。