本文用于总结微信小程序的开发文档。它主要记录概念性或可理解的事物。对于那些硬编码,就不做太多总结了。
一、微信小程序介绍
小程序是一种连接用户和服务的全新方式。在微信中易于获取和传播,用户体验极佳。
二、微信网页资源离线存储是面向网页开发者的基于微信的网页加速解决方案。
通过使用微信离线存储开发微信小程序论文,网页开发者可以利用微信提供的资源存储能力,直接从微信本地加载网页资源,而不是从服务器拉取网页资源,从而减少网页加载时间,为微信用户提供更优质的网页浏览体验。每个公众号下的所有Web Apps总共可以缓存最多5M的资源。
三、小程序与普通网页开发的区别小程序的主要开发语言是,小程序的开发与普通网页的开发非常相似。
网页开发渲染线程和脚本线程是互斥的,这也是为什么长期脚本运行可能会导致页面变得无响应的原因,而在小程序中,两者是分开的,运行在不同的线程中。 Web 开发人员可以使用各种浏览器公开的 DOM API 进行 DOM 选择和操作。小程序的逻辑层和渲染层是分开的。逻辑层运行在 中,没有完整的浏览器对象,因此缺少相关的 DOM API 和 BOM API。这种差异导致前端开发中一些微信不知道的库,比如,,等,无法在小程序中运行。 四、小程序的JSON配置
JSON 是一种数据格式,而不是一种编程语言。在小程序中,JSON扮演着静态配置的角色。
项目的根目录有一个app.json和..json
每个页面目录都有对应的page.json
app.json是当前小程序的全局配置,包括小程序的所有页面路径、界面性能、网络超时、底部标签等。 ..json,您在工具上所做的任何配置都将写入此文件。重装工具或换电脑工作时,只需要加载同项目的代码包,开发者工具会自动为你恢复,届时你开发项目时的个性化配置会包含一系列编辑器的颜色、上传代码时的自动压缩等选项。 page.json 允许开发者独立定义每个页面的一些属性,比如顶部颜色、是否允许下拉刷新等。五、MVVM开发方法
MVVM开发模式(如Vue),提倡渲染与逻辑分离。简单来说就是不要让 JS 直接操作 DOM。 JS 只需要管理状态,然后用模板语法来描述状态和接口结构的关系。
小程序的框架也采用了这种思路。
六、托管环境
我们把微信客户端提供给小程序的环境称为宿主环境。借助宿主环境提供的能力,小程序可以完成很多普通网页无法实现的功能。
七、渲染层和逻辑层
小程序的运行环境分为渲染层和逻辑层。 WXML模板和WXSS样式在渲染层,JS脚本在逻辑层。
渲染层是页面框架和样式,逻辑层是动态交互js。
小程序的渲染层和逻辑层分别由两个线程管理:渲染层的界面使用 ;逻辑层使用线程来运行 JS 脚本。一个小程序有多个接口,所以渲染层有多个线程。这两个线程之间的通信会通过微信客户端进行中继(下图将用来指微信客户端),逻辑层通过发送网络请求,小程序的通信模型如下图所示。
八、微信客户端会在打开小程序前将小程序的整个代码包下载到本地。 九、小程序启动后,会执行app.js中定义的App实例的回调十、页面配置加载顺序
微信客户端会先根据.json配置生成一个界面,然后客户端会加载页面的WXML结构和WXSS样式。最后,客户端将加载 .js。可以看到.js文件是一个页面构造器,Page页面构造器,这个构造器生成一个页面。生成页面时,小程序框架会将数据数据和 .wxml 一起渲染以生成最终结构。界面渲染完成后,页面实例会收到回调。
十个一、
微信现已开启小程序内搜索。开发者可以通过.json配置配置自己的小程序页面是否允许微信索引,或者管理后台页面包含开关。当开发者允许微信索引时,微信会以爬虫的形式对小程序的页面内容进行索引。当用户的搜索词触发索引时,小程序的页面可能会显示在搜索结果中。爬虫访问小程序中的页面时,会携带具体的user-:和场景值:1129。需要注意的是,如果小程序爬虫找到的页面数据与真实用户的呈现不一致,页面不会包含在索引中。
十个二、逻辑层应用程序
小程序开发框架的逻辑层利用引擎为小程序提供开发者代码的运行环境和微信小程序独有的功能。逻辑层处理数据并发送给视图层,并接受视图层的事件反馈。
所有开发者编写的代码最终都会打包成一个文件,在小程序启动时运行,直到小程序被销毁。这个行为类似,所以逻辑层也叫App。
在 的基础上,我们增加了一些方便小程序开发的功能:
为程序注册和页面注册添加App和Page方法。添加 和 方法,分别获取 App 实例和当前页面栈。提供丰富的API,如微信用户数据、扫一扫、支付等微信专属能力。提供模块化,每个页面都有独立的作用域。
注意:小程序框架的逻辑层不运行在浏览器中,所以不能使用web中的一些能力,比如,等。
10三、APP.js中的生命周期函数(小程序的生命周期回调)
错误监控、页面无监控、系统主题变化监控功能都在APP功能中。
App() 必须在 app.js 中调用,必须调用且只能调用一次。否则会产生不可预见的后果。
整个小程序只有一个App实例,所有页面共享。开发者可以通过该方法获取全局唯一的App实例,获取App上的数据,或者调用开发者在App上注册的函数。
十个四、页面构造函数
对于小程序中的每个页面,都需要在页面对应的js文件中注册,指定页面的初始数据、生命周期回调、事件处理函数等。可以使用Page( ) .
( ) 页面加载时触发。一个页面只会被调用一次,打开当前页面的路径中的参数可以在参数中获取。
() 当页面显示/切换到前台时触发。
() 当页面的第一次渲染完成时触发。一个页面只会被调用一次,表明该页面已准备好与视图层交互。
() 当页面隐藏/切入背景时触发。
() 页面卸载时触发。
页面页面的生命周期:
10五、在页面还没有生成的时候,不要在App.中调用()。十个 六、() 构造函数
页面构造器适用于简单页面。但是对于复杂的页面,页面构建器可能无法正常工作。
此时,您可以使用构造函数来构造页面。构造函数的主要区别在于方法需要放在里面:{}。
可以引用十七、页。可用于让多个页面具有相同的数据字段和方法。十个八、页面路由
小程序中所有页面的路由由框架管理。该框架以页面堆栈的形式维护所有当前页面。开发者可以使用()函数获取当前页面栈。
十九、模块化

您可以使用 .导出公共模板函数或数据。
第二个十、小程序API
小程序开发框架提供丰富的微信原生API,可以轻松调用微信提供的能力,如获取用户信息、本地存储、支付功能等。通常分为以下几种:
事件监控API,以on开头的API用于监控事件是否被触发。这种类型的 API 接受回调函数作为参数。当事件触发时,会调用回调函数,并将相关数据作为参数传入。 同步API,以Sync结尾的API都是同步API。同步API的执行结果可以直接通过函数的返回值获取,执行失败会抛出异常。异步API,大部分API都是异步API,此类API接口通常接受类型参数并有回调函数
二十一、查看层视图
框架的视图层用WXML和WXSS编写,由组件展示。
将逻辑层的数据反应成一个视图,同时将视图层的事件发送给逻辑层。
WXML()用于描述页面的结构。
WXS( ) 是一套针对小程序的脚本语言。结合WXML,可以构建页面的结构。
WXSS( ) 用于描述页面的样式。
() 是视图的基本单元。
二十二、WXS
WXS()是一套针对小程序的脚本语言,结合WXML,可以构建页面的结构。
注意
WXS 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。 WXS 是与 不同的语言,有自己的语法,与 . WXS的运行环境与其他代码隔离,在其他文件中定义的函数不能在WXS中调用,也不能调用小程序提供的API。 WXS 函数不能用作组件的事件回调。
由于运行环境的不同,小程序中的WXS会比iOS设备上的代码快2~20倍。两种设备的运行效率没有差异。
总结一下:wxs是一种类似于jsp或PHP的脚本语言,是独立的,是来自js的两个概念。他基于一个封装的想法。最后涉及到接口导出的问题。
wxs和js中的函数是独立的。如果要使用wxs对js中的数据进行操作,只能通过微信小程序绑定{{}},如{{m1.()}},其中m1为名称,函数在调用了m1,但是应用了微信小程序的绑定函数,绑定了js文件中的数组,然后传入m1。
二十三、活动详情
活动类别:
事件分为冒泡事件和非冒泡事件:
冒泡事件:当触发组件上的事件时,将事件传递给父节点。非冒泡事件:当组件上的事件被触发时,该事件不会传递到父节点。
绑定事件会导致事件冒泡。
绑定事件不会导致事件冒泡。
mut-bind 绑定事件是互斥事件。在向上冒泡的过程中,如果遇到其他的mut-,其他的mut-bind函数不会被触发,但是bind绑定函数和函数仍然会被触发。
(源节点)和(当前节点)是有区别的。点击视图时,接收到的事件对象 和 都是 ,接收到的事件对象是 ,也就是 。
四、data-* 一些自定义数据可以附加到组件节点上。这样就可以在事件中获取这些自定义节点数据,对事件进行逻辑处理。二十 五、当一个动作需要及时响应,而常规的从视图层到逻辑层再回到视图层的逻辑耗时较长,可以使用WXS来响应事件,让事件处理只是在视图层处理,从而加快了响应时间。二十 六、双向绑定
普通单向绑定,数据数据变化,页面值变化,但页面值变化,数据数据不变。
双向绑定,数据数据与页面值同步,但双向绑定目前只支持单字段绑定,没有数据路径
二十个七、组件
注意:所有组件和属性都是小写的
二十八、屏幕旋转在移动端使小程序中的页面支持屏幕旋转的方法是:在app.json部分设置"":"auto",或者在app.json中配置"" page json file ": "auto" 。让小程序支持 iPad 屏幕旋转的方法是在 app.json 中添加 "": true 。二十个九、媒体查询(相当于条件样式)
三十、页面大小变化事件,可以使用页面的监控。显示区域的大小信息会在回调函数中返回。
三十一、基于安全考虑,小程序不支持动态执行JS代码,即:不支持使用eval执行JS代码使用new创建函数三十二、小程序前/后台状态切换
小程序启动后,界面显示给用户,小程序处于前台状态。
当用户点击右上角的胶囊按钮关闭小程序,或者按下设备的home键离开微信时,小程序并没有完全停止运行,而是进入后台状态,小程序可以仍然运行一小段时间。
当用户再次进入微信或再次打开小程序时,小程序会再次从后台进入前台。但是,如果用户长时间不进入小程序,或者系统资源紧张,则可能会导致小程序被破坏,即小程序的运行完全终止。
三十三、小程序冷/热启动冷启动:如果用户第一次打开小程序,或者小程序销毁后再次打开小程序,需要重新加载小程序启动,也就是冷启动。热启动:如果用户已经打开了某个小程序,然后在一定时间内再次打开该小程序,此时小程序并没有被销毁,只是从后台状态进入前台状态。这个过程称为热启动。三十 四、小程序的更新机制
未启动时更新
开发者在管理后台发布新版本小程序后,如果用户有本地历史版本的小程序,此时可能仍会打开旧版本。微信客户端会多次检查本地缓存的小程序是否有更新版本,如果有,会默默更新到新版本。一般来说,开发者在后台发布新版本后,并不能立即影响到所有现有网络用户,但最坏的情况是,新版本信息会在发布后24小时内分发给用户。用户下次打开时,会在打开前更新最新版本。
启动时更新
小程序每次冷启动时都会检查是否有更新版本。如果发现新版本,会异步下载新版本的代码包,并与客户端本地包同时启动,即新版本的小程序程序需要等待下一次冷在应用之前开始。
如果您需要立即应用最新版本,您可以使用 wx.用于此的 API。