小程序知识梳理

LIKETHIS
135 阅读8分钟

概念： 以微信客户端作为宿主环境，其暴露出来的一套网页工具开发包（JS-SDK），使得开发者可以在上层使用微信的原生能力所开发的应用程序。

优势

  1. 具有的快速加载和快速渲染能力
  2. 具有配套的云能力、运维能力和数据汇总能力，让开发者专注于业务逻辑的开发
  3. 可以获取到微信用户和微信群的一些信息，使得小程序的开放能力变得更加强大

代码组成

JSON配置

作用：小程序进行静态配置，在运行之前就决定了小程序的一些表现

WXML模板

  1. 小程序框架设计的一套标签语言，用于构建页面结构。创建文件时扩展名为.wxml。规则和html一样。
  2. 通过双花括号表示变量<text>当前时间：{{time}}</text>
  3. 在模板中属性值的大小是敏感的，name和Name是两个不同的变量。属性值也可以是变量
  4. 模板语法中可以编写逻辑判断与表达式：<text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>
  5. 使用wx:if/wx:elif/wx:else来控制逻辑判断
  6. 使用wx:for绑定一个数组进行列表渲染，当前项下默认的下标名为index，默认的当前项为item
  • 使用wx:for-index="idx"修改当前元素的下标名
  • 使用wx:for-item="itemName"修改当前元的变量名
  • 如果列表项是动态的，而我们又希望在变更时保留每一项的状态，则需要为其添加wx:key属性，这样在数据改变触发渲染层重新渲染的时候，框架会确保他们重新排序而不是重新创建。从而提高效率。
  1. template模板，使用name属性作为模板的名字。然后在里面定义代码片段
  • <template name="msgItem"> // 这里是需要定义的代码片段 </template>
  • 在使用的时候使用is属性指定模板，data属性置顶模板需要的数据
    <template is="msgItem" data="{{...item}}"/>
  1. 文件引用，有两种引用方式
  • import
  1. 在index.wxml的模板中引入其它模板，语法：<import src="other.wxml"/>
  2. 使用这种方式就可以使用other.wxml中所定义的模板（如第7点中定义）
  3. import引入有作用域的概念，只能引入目标文件中模板的定义，并不支持递归引入
  • include
  1. 在index.wxml中引入其他模板，语法：<include src="header.wxml"/>
  2. 可以将目标文件除了<template/><wxs/>外的整个文件引在当前位置

WSSS样式

  1. 概念：是一套用于小程序的样式语言，用来描述wxml文件

  2. 项目样式

a. 公共样式

  • 根目录中的app.wxss会被注入到小程序的每一个页面
  • app.json中的windows选项可以设置公共样式

b. 页面样式

  • 在json文件中注入过的页面的同级位置的.wxss文件就是该页面对应的样式

c. 其他样式

  • 在小程序中，我们依然可以实现样式的引用，语法：@import ‘./文件路径’。它不会产生多余的文件请求，因为它最终会被编译打包到目标文件中。
  1. 尺寸单位 在WXSS中，引入了rpx尺寸单位。目的是，适配不同宽度的屏幕。小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。

JS脚本

  1. 小程序中的js脚本是由ECMAScript、小程序的框架、小程序的API组成的
  2. 小程序的JS脚本可以运行在IOS、Andriod、小程序IDE3个平台之上。但由于一些平台的版本并没有完全兼容到ECMAScript标准，可能会出现一些运行时的错误。所我们在开发的时候需要在小程序IDE上勾语法转码工具。 3.小程序当中的每一个JS文件可作为模块，通过module.exports或者exports对外暴接口，可以在需要的模块通过require()引入模块
  3. 脚本的执行顺序从app.js的引用顺序开始，执行完了app.js的文件，再按照app.json中定义的pages的顺序执行 5.由于每个js文件都是一个模块，所以我们需要获取以及修改globl变量的话需要使用全局函数getApp()

宿主环境

渲染层与逻辑层

  1. wxml和wxss工作在渲染层，js脚本工作在逻辑层。逻辑层通过js脚本中的Page实例的setData()方法传递数据到渲染层。 Page({onLoad: function () {this.setData({ msg: 'Hello World' })}})

  2. 渲染层页面使用了WebView进行渲染，逻辑层采用 JsCore线程运行js脚本。一个小程序通常拥有多个页面，所以对应也存在多个WebView线程。渲染层与逻辑层之间的通信是通过微信客户端做中转。逻辑层发送的网络请求也是经由微信客户端转发给第三方服务器

  3. 数据驱动。模板渲染的过程为wxml->js对象->Dom树。如果要更新视图只需要在js对象这一步进行差异对比，然后更新视图即可。

程序与页面

程序： 宿主环境提供了 App() 构造器用来注册一个程序App，App() 构造器必须写在项目根目录的app.js里，App实例是单例对象，在其他JS脚本中可以使用宿主环境提供的 getApp() 来获取程序实例。

App({  
onLaunch: function(options) {}, // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）  
onShow: function(options) {}, // 当小程序启动，或从后台进入前台显示，会触发 onShow  
onHide: function() {}, // 当小程序从前台进入后台，会触发 onHide  
onError: function(msg) {}, // 当小程序发生脚本错误，或者 API 调用失败时，会触发 onError 并带上错误信息  
globalData: 'I am global data' // 其它页面通过getApp()来获取这个数据  
})

在微信客户端中打开小程序有很多途径：从群聊会话里打开，从小程序列表中打开，通过微信扫一扫二维码打开，从另外一个小程序打开当前小程序等，针对不同途径的打开方式，小程序有时需要做不同的业务处理，所以微信客户端会把打开方式带给onLaunch和onShow的调用参数options

页面： 由界面、配置和逻辑组成

  1. 一个页面的文件需要放置在同一个目录下，其中WXML文件和JS文件是必须存在的，JSON和WXSS文件是可选的。
  2. 页面路径需要在小程序代码根目录app.json中的pages字段声明，否则这个页面不会被注册到宿主环境中
  3. 页面构造器Page()
Page({  
data: { text: "This is page data." }, // 页面的初始数据  
onLoad: function(options) { }, // 监听页面加载  
onReady: function() { }, // 监听页面初次渲染完成  
onShow: function() { }, // 监听页面显示，触发事件早于onReady  
onHide: function() { }, // 监听页面隐藏  
onUnload: function() { }, // 监听页面卸载  
onPullDownRefresh: function() { }, // 监听用户下拉动作  
onReachBottom: function() { }, // 页面上拉触底事件的处理函数  
onShareAppMessage: function () { }, // 用户点击右上角转发  
onPageScroll: function() { } // 页面滚动触发事件的处理函数  
})
  1. data参数是页面第一次渲染时从逻辑层传递到渲染层的数据。设置时需要注意几点：
  • 直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
  • 由于setData是需要两个线程的一些通信消耗，为了提高性能，每次设置的数据不应超过1024kB。
  • 不要把data中的任意一项的value设为undefined，否则可能会有引起一些不可预料的bug。
  • 每次只设置需要改变的最小单位数据原则就可以提高小程序的渲染性能。

API

  1. wx是小程序的宿主环境所提供的全局对象，几乎所有的小程序API都挂在底下（网络、媒体、文件、数据缓存、位置、设备、界面、界面节点信息还有一些特殊的开放接口）如：wx.navigateTo。
  2. wx.on* 开头的 API 是监听某个事件发生的API接口，接受一个Callback 函数作为参数。当该事件触发时，会调用 Callback 函数。
  3. 未特殊约定，多数 API 接口为异步接口 ，都接受一个Object作为参数。
  4. API的Object参数一般由success、fail、complete三个回调来接收接口调用结果
  5. wx.get* 开头的API是获取宿主环境数据的接口。
  6. wx.set* 开头的API是写入数据到宿主环境的接口。

事件

概念：“用户在渲染层的行为反馈”以及“组件的部分状态反馈”称作渲染层传递给逻辑层的“事件”

事件类型:touchstart、touchmove、touchcancel、touchend、tap、longpress、longtap、transitionend、animationstart、animationiteration、animationend

事件对象：当事件回调触发的时候，收到的对象.

事件对象属性：type、timeStamp、target、currentTarget、detail、touches、changedTouches

事件捕获以及事件冒泡

  • bind:事件名称，代表事件冒泡阶段
  • capture-bind:事件名称，代表事件捕获阶段
  • capture-catch:将中断捕获阶段和取消冒泡阶段
avatar
文章
阅读
粉丝