微信小程序架构图与开发_微信小程序框架图-程序员宅基地

技术标签: 前端  小程序  

双线程模型

双线程模型引入的原因:

​网页开发渲染线程和脚本线程是互斥的,这也是为什么长时间的脚本运行可能会导致页面失去响应,而在小程序中,二者是分开的,分别运行在不同的线程中。


真实运行环境

传统Webview和小程序的异同

与传统Web开发上的异同


1)标签名字有点不一样

 用wxml和wxss表示页面而不是html和css,之所以有了这样的替换,是因为腾讯

把开发HTML 的时候,经常会用到的标签(divpspan...)进行了组合封装

变成了小程序里面的WXML标签(viewbuttontext 等等)。封装之后不仅能提高我们的开发效率,还能使得腾讯上不同小程序风格上大体一直,不至于过于灵活,差异过大。

2)

多了一些 wx:if 这样的属性以及 { { }} 这样的表达式

在网页的一般开发流程中,我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树),以引起界面的一些变化响应用户的行为。例如,用户点击某个按钮的时候,JS 会记录一些状态到 JS 变量里边,同时通过 DOM API 操控 DOM 的属性或者行为,进而引起界面一些变化。当项目越来越大的时候,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOMJS 只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。

小程序的框架也是用到了这个思路,如果你需要把一个 Hello World 的字符串显示在界面上。

WXML 是这么写 :

<text>{
   {msg}}</text>

JS 只需要管理状态即可:

this.setData({ msg: "Hello World" })

通过 { { }} 的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/elsefor等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。

更详细的文档可以参考 WXML

参考自:

微信小程序原理分析和多端小程序架构原理(应该是全网最全了) | 悬笔e绝的个人博客前言互联网生态演进:超级 APP + 小程序成为「轻应用时代」下的新生态。 一方面微信、支付宝等各家小程序平台遍地开花,另一方面移动开发插件化技术逐渐没落,移动应用构建的方式在悄悄的发生变化。对于企业应用形态而言,也在逐步发生变化,超级 APP(移动门户)+ 轻应用是一种新的流行趋势。微信、支付宝是互联网生态下的“移动门户”,手机银行是金融典型的 ToC “移动门户”。小程序方式构建应用是大趋势,https://www.xuanbiyijue.com/2021/03/13/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%8E%9F%E7%90%86%E5%88%86%E6%9E%90%EF%BC%88%E5%BA%94%E8%AF%A5%E6%98%AF%E5%85%A8%E7%BD%91%E6%9C%80%E5%85%A8%E4%BA%86%EF%BC%89/

小程序代码构成 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/quickstart/code.html#WXML-%E6%A8%A1%E6%9D%BF

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/u010087338/article/details/120862438

智能推荐

【解决】1251--Client does not support authentication protocol requested by server 的解决办法_1251-client does not support authentication protoc-程序员宅基地

文章浏览阅读3k次。出现错误:报错(客户端不支持),Navicat版本过低,这儿解决办法分为两种,第一种,升级客户端;第二种,降低服务器端;在镜像拉取的时候,不知道各位注意到没有,镜像的TAG为latest,关于最新版的MySQL才出来没多久,也作了比较多的优化和新能提升,当然就不在这人阐述了,如果对新的版本了解不多的,建议就不要强撑了(会踩到很多坑),所以这儿就建议使用在生产环境中还是选择5.x的吧。(这儿只是建议)拉取5.x的MySQL镜像,如下图:正常启动镜像,如下图:在Navicat客户端中进行连接测试_1251-client does not support authentication protocol requested by server; consid

padding用法-程序员宅基地

文章浏览阅读755次。<html> <head> <title></title> <style> span{ background-color: rgb(76, 236, 71); } i{/*padding是内边距,向内扩展,与margin正好相反*/ background-color: rg._padding用法

Python --Pycharm + Anaconda 的Python3.7遇到“ImportError: DLL load failed: 找不到指定的模块”解决办法_python anaconda ddl load failed-程序员宅基地

文章浏览阅读4.1k次,点赞3次,收藏10次。问题描述python3.7 在Pycharm + Anaconda 不能用,装了包还报错:ImportError: DLL load failed: 找不到指定的模块,把python降到3.6, 然后python3.6 在Pycharm + Anaconda 就没问题了,但是心里总有疙瘩难以解开,后面找到了解决python3.7的问题,将解决办法记录一下解决办法1添加三个path路径(均在A..._python anaconda ddl load failed

【Python】OS 模块简介_os模块-程序员宅基地

文章浏览阅读4.5k次。本文简单介绍了 Python 中的 OS 模块以及其中的一些常用方法。_os模块

(手写)可去重离散化序列_手写离散化-程序员宅基地

文章浏览阅读214次。(手写)可去重离散化序列所谓离散化,就是求一个序列每个数是序列中的第几大/小的,可以为主席树等权值线段树等节省空间(比如数的最大值为1e9,你就要存1e9那么大,但离散化后只用存数的个数那么多)真心看不懂哪些大佬们如何用STL写离散化我手写了一个,保证:如果同样大的名次相同,从小到大类型1:运动员是排序(自己口胡的名字)*即设有k个比他大,他就是k+1名比如:1、3、5、5、7排序后..._手写离散化

计算机发展的几个重要事件,15件在计算机发展史中具有里程碑意义的事件-程序员宅基地

文章浏览阅读3.2k次。共15张图片,发表于2010-01-28 09:52:05据《时代》报道从1946年第一台电子计算机问世到苹果即将发布万众期待的平板电脑,现代电子计算机技术获得了长足的发展,这些发展均离不开人类科技知识的积累,离不开众多热衷于此并呕心沥血。1946年,第一台电子计算机“埃尼阿克”问世。第一台电子计算机叫“埃尼阿克”(ENIAC),它于1946年2月15日在美国宾夕法尼亚大学宣告诞生。承担开发任务的..._我国计算机发展的重要事件

随便推点

如何替换Citrix XenDesktop中使用的vCenter server地址-程序员宅基地

文章浏览阅读477次。一、问题描述:客户重装Vcenter之后(Hostname与之前保持一致)出现如下报错:1.计算机目录显示无法联系到vCenter server2.VM电源状态未知3.测试connection出现如下错误:Attempting to connect to the VCenter server failed due to a certificate error. Check ..._citrix vcenter替换

Android Studio Lint 工具看完这一篇还不够-程序员宅基地

文章浏览阅读6.5k次,点赞12次,收藏24次。前言以前对下面的问题,我的态度是,不报错就是没问题,报错就用快捷键,根据Android Studio提示修复问题,从来不去问个为什么?现在代码洁癖症越来越严重的我,忍不住想看清什么东西在搞鬼。认真看完本文,一定可以学到最新的知识。就算看不下去,也要点个赞收藏,绝对不亏。本文并不是吐槽Lint的不好,而是在学习Lint过程碰到问题,心态是奔溃的,以及解决每个问题带来的喜感。不知道大家有没有注意..._android studio lint

CDH激活分发parcel时因为意外错误卡住不能修改问题解决方案_cdh parcel激活一直卡住-程序员宅基地

文章浏览阅读2.7k次。问题背景:今天因为业务需求需要在CDH集群上安装StreamSets,结果因为权限的原因,之前我把这个parcel文件的权限变更为cloudera-scm,结果后面遇到这个问题了,问了之前部署CDH的人才知道他那时候用的权限是Root用户,所以现在卡在这里,也没有地方可以直接暂停:然后我点进去看详细的信息:可以看到cluster2-1这个结点因为权限的问题,导致不能激活。解决方案:Cloudera并没有在控制台开发Cancel或者回滚的入口,此时服务状态就是卡住页面无法操作。通过_cdh parcel激活一直卡住

TinyRayTracer 用256行C++代码构建一个可理解的光线追踪器(1)_understandable raytracing in 256 lines of bare c++-程序员宅基地

文章浏览阅读1.6k次,点赞7次,收藏13次。网上有大量的光线追踪相关的文章,然而问题在于几乎所有的这些文章都在展示那些成熟的非常难以理解程序。举个例子,非常著名的 明信片光线追踪器 挑战。这段简洁的程序令人印象深刻,但却很难让人理解它是怎么工作的。我想详细地教你怎样实现,而不是向你展示我能完成图像渲染。_understandable raytracing in 256 lines of bare c++

C#实现多个子窗体切换效果_c#多窗体管理-程序员宅基地

文章浏览阅读3.1w次,点赞142次,收藏472次。Hello,大家好!我是灰小猿!今天来和大家分享一下在C#的winform开发中如何实现借助一个主窗体来实现内部多个子窗体的切换效果。多窗体切换首先来看一下主窗体中多个小窗体切换的效果:多窗体切换的原理:多窗体切换的原理其实是借助一个panel容器,在该容器中显示相同大小的窗口,接下来大灰狼和大家分享一下建立多窗口切换的步骤:1、新建一个主窗体并在其中放置适当的控件,包括进行切换的按钮和显示窗体的panel容器,在这里要注意:将要显示的子窗体就是在该panel容器中显..._c#多窗体管理

【Pycharm学习】Pycharm中输出问题,Pycharm运行程序时在Python console窗口中输出_在pycharm 软件内,输出歌曲信息在控制台打印-程序员宅基地

文章浏览阅读4.1k次,点赞3次,收藏7次。问题描述pycharm是一款很好用的IDE,但是有一些细节问题需要我们注意。作者就层遇到很多坑最近遇到的一个问题就是输出问题,虽然不影响输出结果但就是看起来不顺眼,现在我将问题,描述如下这就是遇到的问题输出不在正常的run中,直接输出到控制台了也不知道怎么搞的,查阅相关资料后下面说一下解决方案直接上图:1、点击框出来的这里进去页面2、最后一步把这个框起来的对号去掉就好了。..._在pycharm 软件内,输出歌曲信息在控制台打印