微信小程序技术解析-优快云博客

1. 发展史

从未暴露出来的 WeixinJSBrige 到封装WeixinJSBrige得到的对大众开放的 js-sdk，

为了解决页面开始打开白屏问题，以及大量加载css和js导致的交互效果延迟问题，开发出了小程序。

2. 特点

渲染线程和脚本线程分别运行，脚本线程运行不会对渲染造成阻塞，脚本线程（逻辑层）运行在jscore 中，不同于网页运行在浏览器中，所以他缺乏浏览器对象，并且缺少相应的DOM API和BOM API（window.history, location.href,window.open, window.screen ....）

3. 运行环境

4. 生命周期

微信客户端打开小程序之前，会下载代码包到本地。

在打开的不是独立分包页面的情况下（分包或者主包），会先app和首页的代码装载，然后调用app.js里面的onLaunch回调（只会调用一次）

如下三个文件，默认一打开小程序会进入index页面

<!-- app.js -->
App({
  data: {
    date: '1',
  },
  onLaunch: function () {
    console.log(" app onLaunch " + this.data.date)
  },
  onShow () {
    console.log(" app onShow")
  },
  onHide() {
    console.log(" app onHide")
  },
  onError () {
  }
})

<!-- index.js -->

Page({
  data: {
    motto: 'Hello World'
  }
  onLoad: function () {
    console.log(" index onLoad " + this.data.motto)
  },
  onShow () {
    console.log(" index onshow")
  },
  onReady () {
    console.log(" index onReady")
  },
  onHide () {
    console.log(" index onHide")
  },
  onUnload () {
    console.log(" index onUnload")
  },
  gotolog () {
    wx.navigateTo({
      url: '/pages/logs/logs',
    })
  }
})

<!-- log.js -->

Page({
  data: {
    log: ''
  },
  onLoad: function () {
    console.log(" log onLoad")
  },
  onShow() {
    console.log(" log onshow")
  },
  onReady() {
    console.log(" log onReady")
  },
  onHide() {
    console.log(" log onHide")
  },
  onUnload() {
    console.log(" log onUnload")
  },
  navigateto () {
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
  relaunctto () {
    wx.redirectTo({
      url: '/pages/index/index',
    })
  }
})

// 用户第一次进入小程序，或者很长一段时间（多久？）内不使用小程序后重新进入，打印结果如下

// app onLaunch
// app onShow
// index onLoad
// index onShow
// index onReady
从index navigateto 进入 log页面， 打印
// index onHide
// log onLoad
// log onShow
// log onReady
从log 页面 navigateTo 进入 index页面， 打印
// log onHide
// index onLoad
// index onShow
// index onReady

// app onLaunch
// app onShow
// index onLoad
// index onShow
// index onReady
从index navigateto 进入 log页面， 打印
// index onHide
// log onLoad
// log onShow
// log onReady
从log 页面 navigateBack 进入 index页面， 打印
// log onHide
// index onShow

// app onLaunch
// app onShow
// index onLoad
// index onShow
// index onReady
从index navigateto 进入 log页面， 打印
// index onHide
// log onLoad
// log onShow
// log onReady
从log 页面 redirectTo 进入 index页面， 打印
// log onUnload 当前页面出栈，新页面入栈，所以会调用log的unload
// index onLoad
// index onShow
// index onReady

// app onLaunch
// app onShow
// index onLoad
// index onShow
// index onReady
从index navigateto 进入 log页面， 打印
// index onHide
// log onLoad
// log onShow
// log onReady
从log 页面 relaunchto 进入 index页面， 打印
// log onUnload
// index onUnload 因为relaunch会使得所有页面都出栈，所以在这里所有的页面都会onUnload（除了app.js）
// index onLoad
// index onShow
// index onReady

当用户退出小程序的时候，小程序只是进入后台运行，只有当小程序进入后台一定时间(目前是5分钟)，或者系统资源占用过高，才会被真正的销毁。

热启动：假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；
冷启动：用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动，即冷启动。

// app onLaunch
// app onShow
// index onLoad
// index onShow
// index onReady
从index navigateto 进入 log页面， 打印
// index onHide
// log onLoad
// log onShow
// log onReady
从log 页面 退出小程序
// log onHide
// app onHide

//退出小程序后再次打开（log页面），打印如下

// app onShow
// log onShow

5. 目录构成

目录中主要文件类型有下面四种

1. .json后缀的配置文件

- app.json: 小程序的全局配置, 可以对小程序的页面路径，界面表现（nav背景色等）, 网络超时时间，底部tab等进行设置

-- subpages 分包

-- 配置的tabbar必须分在主包里面，设置了独立分包的包，进入独立分包页面的时候，不需要下载主包

- project.config.json 开发者工具的配置（编译模式列表等）

2. .wxml的模板文件:

- 不用再让 JS 直接操控 DOM，JS 只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系

3. .js的脚本逻辑文件

4. .wxss的样式文件： app.wxss 作为全局样式

6. 框架

逻辑层：JS

视图层： WXML 和 WXSS

页面路由管理

7. template的使用跟组件的区别

template只可以传值展示，不能与调用者进行通信？

8. 引入文件方式： import / include引入wxml 和 @import引入wxss和js

import可以引入template, 但是import不具备递归属性，无法import引用文件中的import

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- index.html -->

<import src="item.wxml"/>

<template is="item" data="{{text: 'forbar'}}"/>

include可以将目标文件中除了<template/><wxs/>的整段代码引入

<!-- index.wxml -->
<include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>
<template name ="header">
 <view>headerTemplate</view>
</template>

<!-- footer.wxml -->
<view> footer </view>

@import './test_0.wxss' 

//使用此方法引入，会多一条test_0.wxss文件的引入，并不会嵌入到每个调用它的文件中
// 但在最终的打包文件中，会被打包进每个调用它的文件中

9. 编译原理

10. 页面栈

转载于:https://my.oschina.net/u/4085373/blog/3034698