理解小程序

dmlllll 发布于2019-08-23 12:11 / 1334人阅读

摘要：小程序的布局信息微信小程序中使用作为长度单位，可以根据屏幕宽度进行自适应。运行环境普通都是执行在浏览器的宿主环境，浏览器提供等对象但是小程序是运行在微信上下文中的，没有和。

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

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

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手机尺寸对照表格

建议：开发微信小程序时设计师可以用 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片段了。

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

云服务器 GPU云服务器小程序小程序小程序附近小程序门店小程序小程序小程序打开小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98064.html

深入理解小程序中的数据——小程序探索

摘要：传输时间与数据量大体上呈现正相关关系，传输过大的数据将使这一时间显著增加。小程序不管从组件化开发调试发布灰度回滚上报统计监控和最近的云能力都非常完善，小程序的工程化简直就是前端的典范。研究背景上一篇文章了解了小程序的生命周期，接下来研究一下数据通信，我觉得清楚了生命周期和数据通信，就能对整个程序有一定的把控能力，定位问题和解决问题的能力将大幅提高我刚开始撸小程序的时候，觉得看看文...

Jochen 2019-08-23 14:56 评论0 收藏0
大龄业余程序员要搞个django小程序--08--深入理解小程序登陆状态的维护

摘要：由于微信小程序没有一套身份验证管理的框架，只提供等几个，所以对于我这种初学者来说，小程序登陆状态管理就显得很麻烦。按照个人的理解，需要携带。总之，和只要其中之一不存在，都要把登陆状态标记为未登陆。不然用户不清楚不确定是否登陆成功。 ...

zsy888 2021-09-26 09:55 评论0 收藏0
微信小程序wepy框架详解（一）

摘要：微信小程序的一种框架简述由于项目原因，我于两个多月前转到微信端用进行开发。事件发起组件的所有祖先组件会依次接收到事件。注意，如果用了自定义事件，则中对应的监听函数不会再执行。 wepy——微信小程序的一种框架简述由于项目原因，我于两个多月前转到微信端用wepy进行开发。wepy开发风格接近于 Vue.js，支持组件 Props 传值，自定义事件、组件分布式复用Mixin、Redux...

maochunguang 2019-08-23 12:37 评论0 收藏0