首页 > 编程知识 正文

小程序开发教程全集免费,微信小程序前后端开发教程

时间:2023-05-04 22:36:33 阅读:172115 作者:2923

jqdyc 《微信小程序全栈开发实战》 (第一章)多线程执行机制小程序的特征和开发能力小程序的特征开发能力开发小程序的常规流程执行机制小程序的多线程视图如何实现持续更新

双线运行机制

逻辑层和视图层通过微信的底层weixinJSBridge进行通信。 applet代码中使用的setData是一个名为evaluateJavascript的函数,用于更改视图绑定的数据,并在底层对应执行。当视图层的交互被触发,信息从视图层像逻辑层一样传递时该函数的参数时文本,每次调用都需要进行原始类型-文本-原始类型的一系列转换,而且由于是单通道,不存在C、Golang这样的并发线程的特征,所以效果非常差。

小程序特征和开发能力小程序特征

小程序开发能力

出于安全原因,小程序不支持动态执行JS代码。 这意味着:

不支持在eval中执行JS代码

不支持使用new Function创建函数

小程序开发的一般流程

小程序的运行机制微信小程序相当于在特定机制下运行的Hybird技术。

小程序的启动机制

热启动:用户已经打开过某个小程序,在一定时间内重新打开。 小程序只是从后台冷启动到前台。 小程序首次打开,或者在微信销毁后重新打开。 此时,小程序需要重新加载并启动

注意:新版本什么时候可以应用? 小程序在冷引导时检查是否有更新的代码包,异步下载新的代码包,并同时在客户端本地代码包中启动。 此外,在下一次冷启动之前,新版本的小程序不可用。 如果想马上使用新版本,可以通过wx.getUpdateManager处理。

对于小程序销毁:如果在后台连续短时间(通常为五分钟左右)、短时间(通常为五秒)收到内存警告,用户将收到警告)运行内存不足。 请重新打开小程序。 这对用户非常不友好。 可以使用wx.onMemoryWarning进行内存监听。 ) ) ) ) ) )

视图层和逻辑层通过weixinJSBridge和native的基础进行通信。 在event和data的交互处理中,逻辑层向视图层通知变化,触发视图层的更新,将视图层被触发的事件通知给逻辑层进行业务逻辑的处理。

简单地说,视图的持续更新是如何实现的,这一问题是通过setdata来实现的,让我们看一下js代码在hybird中的执行方式:

执行setdata请求更新的数据时,首先将这些数据转换为字符串,然后将字符串和代码连接到javascript脚本中,最后将连接的内容传递给evaluateJvascript本机方法。

applet还优化了虚拟dom来更新视图,因此数据到视图层的更新不会实时进行。

使用setData可能会发生什么问题,因为视图线程和逻辑线程分为两个线程,两个线程由先行的setData驱动的数据交换由weixinJsBridge中继,所以其中这是因为视图层正在尝试渲染,并且来自逻辑层的更新请求被阻止。 如果此块超过200毫秒,视图渲染将生成wrdfk。

wrdfk不仅与更新频率有关,还与更新的数据量有关。 使用setData更新大列表数据或更新大size图像时,也容易发生wrdfk。

在ios系统中,小程序页面由多个WKWebView组成,如果系统内存紧张,进一步的WKWebView会被回收到系统中。 这意味着一旦打开小程序的页面就不能后退。

微信为什么WXS语言wxs(weixinscript )是小程序的脚本语言,可以和WXML合作构建页面的结构呢?

WXS是与JavaScript不同的语言,有自己的语法,与JavaScript不一致。

WXS与运行时的基库版本无关,可以在所有版本的applet中运行。

请看wxs的示例:

ws module=' foo ' varsome _ msg=' hello world '; module.exports={ msg : some _ msg,}/wxsview{{foo.msg}/viewwechat团队声称wxs在小程序上运行速度比js快1-20倍。 这是因为wxs也是js代码,但在小程序中不起作用

由于小程序的多线程体系结构在数据更新方面存在瓶颈,微信团队编写了wsx视图脚本。 虽然有很多优点,但也有非常多缺点:

与wsx运行时环境在其他js代码中隔离,并且不能调用其他js代码提供的函数或wechat提供的以wx开头的api接口

-wsx函数不能用作视图模板中的事件回调句柄。 定义的函数无法作为事件句柄绑定到组件。 wsx在ios上比js快1-20倍,但在Android上两者是没有任何区别的视图线程

wcc是wxml编译器,用于将wxml代码编译为js代码。wcsc是wxss编译器,负责将wxss代码编译为js代码。小程序的视图层是在polymer框架基础之上基于web component标准实现的。
在编译完成之后会在内存中创建一个虚拟的dom,使用虚拟dom是为了实现视图的渲染效率。相较而言,vue也是在web component之上实现了虚拟dom,vue将模板中的每个节点都解析为web component一个node节点,即使是一个简单的变量文本的绑定,也解析为一个独立的节点。这样在数据更新的时候,更新的是节点的文本,这些与小程序一致。
比vue更进一步的是小程序除了一般视图组件,还有原生组件,小程序将视图组件放在下面,将解析之后的原生组件放在一般组件的上面。我们在开发时要注意这一点,原生组件永远放在一般组件之上。

逻辑线程

小程序页面启动时,首先触发的是onLoad和onShow事件。当视图初始化加载完成之后,notify通知逻辑线程组件已经准备好,接着逻辑线程将初始化的data数据发给视图线程,由视图线程渲染,视图进入渲染。
完成首次渲染之后,视图通知逻辑线程渲染完成,派发onReady事件,监听到这个事件,说明页面可以交互了,此时视图进行持续渲染状态。在运行过程中,如果用户输入了事件,会触发逻辑线程的事件函数,事件函数执行后可能会向setData发送数据,由视图线程更新。
当用户进入到别的小程序时,当前页面进入后台状态, 此时逻辑线程派发onHide事件,当页面由后台切入到前台时,又会派发onShow事件。如果页面被销毁,就会派发onUnLoad事件。

总结

小程序采用双线程架构,一个负责页面的渲染、一个负责业务逻辑的处理,两个线程通过weixinJsBridge与微信Native底层进行通讯,包括两者这件进行的事件与数据的交换也是通过它完成的。所有平台能力、硬件能力,也是通过weixinJsBridge间接提供的。
由于微信小程序setData在频繁更新和大数据更新上由瓶颈,所以引入了wxs编程语言。一般的处理方式是这样的,从后台接收回来的数据,在页面onLoad之前就塞在Data数据之中,用于视图的初始化渲染,后续的视图交互与更新,如果不与后台有关,就使用 wxs编程语言直接在视图中完成渲染,这样可以提高渲染效率。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。