理解小程序

发布时间:2019-07-02 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了理解小程序脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

小程序坚持着 “无需下载、触手可及、用完即走”的设计理念和价值观,帮助用户缩短完成任务的时间。下面从以下几点进行总结。
总结是参考三清水老师的小册子,推荐大家去购买。写的很棒。

1. 小程序能做什么,不能做什么?

clipboard.png

2. 小程序的执行环境

微信小程序是在微信的上下文中运行的,而不是在浏览器中运行的,所以浏览器特有的window对象、BOM和DOM等相关的API都不能使用。
同时,跟浏览器相关的操作,Cookie、Ajax请求(XMLHttPRequest)、DOM选择器、DOM事件、路由history、缓存、设备信息、位置等都不存在。
但是,微信小程序为我们提供了一套自己的API。

3. 小程序的布局信息


微信小程序中使用rpx作为长度单位,可以根据屏幕度进行自适应。
rpx是以小程序容器宽度 === 设备宽度 == 屏幕宽度 === 750rpx来做定义的。
如在 iphone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

官方iPhone手机尺寸对照表

clipboard.png

建议: 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准

4. 微信小程序与H5对比

在微信小程序中,一切皆组件(视图组件)。

理解小程序

  • 运行环境
    普通H5都是执行在浏览器的宿主环境,浏览器提供window、document等BOM对象;但是小程序是运行在微信上下文中的,没有BOM和DOM。因此在小程序中不能使用BOM 和DOM 提供的接口
  • 路由
    H5是通过URL进行访问的,小程序没有对外暴漏统一的URL路径进行访问。小程序是通过信道服务进行通信和会话管理,所以它不支持Cookie存储,访问资使用 wx.request 而不是 ajax 的 xMLhttprequet API,小程序的 wx.request 请求不存在跨域的问题

理解小程序

理解小程序

注意:
不要尝试修改页面栈,会导致路由以及页面状态错误
不要在 App.onLaunch 的时候调用 getcurrentPages(),此时 page 还没有生成

理解小程序

  • 模块化
    微信小程序在JS模块化上支持CommonJs,通过require加载,跟node.js类似。
  • 样式
    微信小程序的页面样式完全继承了CSS语法,支持FLEX布局
  • 框架
    微信小程序的整体框采用面向状态编程方式状态管理API来看采用类似redux的设计方式;
    单项数据绑定方式,当view在action操作后,只能通过action的业务处理来更新view。

5.小程序框架

理解小程序

微信小程序分为视图层和逻辑层,视图层在webview中渲染,主要负责页面的渲染工作,其中视图可以有多个,目前最多10个;
逻辑层在jscore中进行渲染,负责逻辑处理、全局状态管理、请求和接口调用,逻辑层全局只有一个(实际通过X5内核,另起一个JScore线程)。
微信小程序的视图层和逻辑层通过微信的JSbridge来实现通信。
逻辑层数据变化通过JSBridge通知视图层,视图层进行更新处理。视图层触发事件通过JSBridge将事件通知到逻辑层,逻辑层进行处理;
JSBridge提供的方法有invoke(调用native)、publish(消息分发)和subscribe。
因为在一个小程序中可以打开多个视图层(webview),要保证从逻辑层发送的数据可以准确送到具体的某个webview中,
需要通过每webview 唯一标识符webviewID来实现。发送event的时候携带webviewID,然后逻辑层处理完对应的逻辑,
如果需要下发数据,则通过webviewID找到对应的webview。

6.小程序生命周期

小程序在启动时,会同时启动两个线程,一个负责页面渲染的webview,一个负责逻辑jscore。
逻辑层初始化后会将初始化数据(app.js中的global)通过JSBridge传递给渲染层进行渲染,渲染层webview渲染完页面之后又会跟逻辑层通信。

7.小程序WXML怎么转成HTML

WXML写完之后经过编译工具WCC转成可执行的JS。wcc和wcsc是小程序的wxml和wxss的编译工具,是二进制文件。
这个JS会接受一个path,将path的页面转换成一个virtual DOM。
这个virtual DOM 结构里面就会找到以 wx-*开头的tag,有了这个VDOM结构,就可以使用对应的tag创建HTML片段了。

理解小程序


以上内容主要是参看三清水老师的小册子写的。觉得写的不错,大家也可以去购买一起学习交流谢谢。


脚本宝典总结

以上是脚本宝典为你收集整理的理解小程序全部内容,希望文章能够帮你解决理解小程序所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。