小程序

指南

小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

小程序发展历史

当微信中的 WebView 逐渐成为移动 Web 的一个重要入口时，微信就有相关的 JS API 了。利用微信的开发工具包称之未JS-SDK,开发的微信原生的一些功能，让开发者可以使用微信原生能力。

使用移动网页遇到的体验不良的问题

用户在访问网页的时候，在浏览器开始显示之前都会有一个白屏的过程，在移动端，受限于设备性能和网络速度，白屏会更加明显。

解决办法

微信 Web 资源离线存储，增强版的JS-SDK（没有最终对外开放）。

治标不治本

在内部测试中，我们发现离线存储能够解决一些问题，但对于一些复杂的页面依然会有白屏问题，例如页面加载了大量的 CSS 或者是 JavaScript 文件。除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在两个方面：页面切换的生硬和点击的迟滞感。

小程序诞生起因

快速的加载
更强大的能力
原生的体验
易用且安全的微信数据开放
高效和简单的开发

小程序与普通网页的区别

网页开发

渲染线程和脚本线程是互斥的(通俗来说JS报错就会中断整个页面)
面对环境PC- IE Chrome 等浏览器, 移动web- Safari Chrome , iOS Android 的webView

小程序

逻辑层与渲染层是分开的，逻辑运行在JSCore中，没有浏览器缺少DOM BOM
面对iOS Android 2个操作系统

小程序逻辑层与渲染层

程序与页面

微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行:

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

一个App 实例定义在 app.js ,全部页面共享
Page 是一个页面构造器，这个构造器就生成了一个页面

Page({
  data: { // 参与页面渲染的数据
    logs: []
  },
  onLoad: function () {
    // 页面渲染后 执行
  }
})

在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结

组件

<map bindmarkertap="markertap" longitude="广州经度" latitude="广州纬度"></map>

API

为开发者提供微信的能力，例如用户信息，微信支付等。
微信扫一扫：

wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})

Tips

页面路由

栈的形式维护了当前的所有页面
navigateTo

打开新页面
只能打开非 tabBar 页面
当前页面触发 onHide 生命周期，其余的都是 onUnload

navigateBack

页面返回
路由目标页面 onShow 其余 onLoad onShow

redirectTo

页面重定向

switchTab

tab切换
只能打开 tabBar 页面

reLaunch

页面重载

#### WXS响应事件逻辑层跟渲染层的独立，导致频繁的交互表现会不友好。
WXS运行在视图层，把逻辑放到WXS中去响应。（只支持内置事件）

小程序学习（一）

小程序

指南