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

技术标签: 前端  小程序  

双线程模型

双线程模型引入的原因:

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


真实运行环境

传统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

智能推荐

Python中什么是异常,Python中有哪些异常_python 异常-程序员宅基地

文章浏览阅读4.6k次。如前面所述,虽然Python代码通过了解释,但是在执行时仍有可能触发错误,而这类的错误就称为异常。大部分异常会导致程序无法继续执行。一旦程序运行后发现有异常,Python会直接显示异常的信息,通常包括:异常出现的地方、异常的类型和内容。如下:我们可以看到上述示例中的异常类型依次是:ZeroDivisionError, NameError 和 TypeError。_python 异常

linux删除第二列为空_shell去掉文件中空行(空白行)的方法详解-程序员宅基地

文章浏览阅读1.3k次。本文详细介绍了使用shell去除文件中的空行的方法,学习下sed、awk、shell文件检测的方法,有需要的朋友可以作个参考。本节内容:shell去掉文件中空行1,shell 去掉文件中的空行cat filename | sed -e '/^$/d' > filename2,保留最新的9个文件,其它的文件删除的命令语句ls -t | awk '{if(NR>9){print $0}}'..._去除linux行第二个字符是空格

Python基础——从csv文件中读取数据,提取数据的方法_python从csv提取特定数据-程序员宅基地

文章浏览阅读10w+次,点赞258次,收藏1.7k次。数据保存在csv文件中1.从csv文件中读取数据参数header=None的有无(1)没有header=None——直接将csv表中的第一行当作表头# 读取数据import pandas as pddata = pd.read_csv("data1.csv")print(data)打印结果为:(2)有header=None——自动添加第一行当作表头# 读取数据impor..._python从csv提取特定数据

适用于 iOS 的 10 个最佳数据恢复工具分享_奇客数据恢复ios版-程序员宅基地

文章浏览阅读1.1k次,点赞8次,收藏3次。在当今的数字时代,我们的移动设备占据了我们生活的很大一部分。从令人难忘的照片和视频到重要的文档和消息,我们的 iOS 设备存储了大量我们无法承受丢失的数据。然而,事故时有发生,无论是由于软件故障、无意删除,甚至是硬件损坏,丢失数据都可能令人痛苦。值得庆幸的是,许多数据恢复工具是专门为 iOS 设备设计的。这些工具是检索丢失或删除的文件的最佳选择。_奇客数据恢复ios版

51单片机c语言脉冲计数实验报告,单片机计数器实验报告.doc-程序员宅基地

文章浏览阅读2.2k次。单片机计数器实验报告单片机计数器实验报告计数器实验报告㈠ 实验目的学习单片机内部定时/计数器的使用和编程方法;进一步掌握中断处理程序的编程方法。㈡ 实验器材G6W仿真器一台MCS—51实验板一台PC机一台电源 一台信号发生器一台㈢ 实验内容及要求8051内部定时计数器,按计数器模式和方式1工作,对P3.4(T0)引脚进行计数,使用8051的T1作定时器,50ms中断..._脉冲计数器实验报告

微信小程序swiper高度自适应,swiper的子元素高度不固定怎么做_微信小程序swiper高度不固定,允许上下滑动-程序员宅基地

文章浏览阅读1.3k次。微信小程序自动的swiper大家都知道默认高度是150px,如果需要去修改高度,我在网上看到的方式都是用js去动态算高度,今天给大家提供一种新的思路 使用 swiper+scroll-view css使用display:flex 父元素dingy flex:1废话不多说 直接上代码 :wxml:<!--pages/talentedPeople/talentS..._微信小程序swiper高度不固定,允许上下滑动

随便推点

Superset安装过程_superset 安装 from wtforms.ext.sqlalchemy.fields imp-程序员宅基地

文章浏览阅读318次。今天准备帮朋友试一下Superset,记录下安装过程准备工作:1、使用vitualenvwrapper创建一个新的虚拟环境2、在MySQL中新建一个数据库supersetdb安装过程:1、# Install superset 安装Superset,此过程会安装Flask等必要的包pip install apache-superset -i https://pypi.douban..._superset 安装 from wtforms.ext.sqlalchemy.fields import queryselectfield mod

暑期RHCSA 2022.07.19_sysmgrs-程序员宅基地

文章浏览阅读119次。1.linux中用户的类型 linux中用户组的类型 linux中存储用户信息的文件是哪个?且其中的字段是什么意思 linux中存储组信息的文件是哪个?且其中的字段是什么意思?2.创建下列用户、组和组成员资格:(1)创建名为 sysmgrs 的组(2)创建用户 natasha 同时指定sysmgrs作为natasha的附加组(3)创建用户 harry 同时指定 sysmgrs作为harry的附加组(4)创建用户 sarah 指定shell类型为/sbin/fals..._sysmgrs

国培计算机音乐教学设计作业,2017国培计划教学设计-程序员宅基地

文章浏览阅读277次。2017国培计划教学设计教学工作任重而道远,面对国培教学内容,希望与挑战并存。下面是学习啦小编为大家整理的2017国培计划教学设计,供大家阅读!2017国培计划教学设计篇1一、指导思想以“提高教学质量”为核心,以“新课程有效教学”为抓手,以校本研修提高教师专业素质为突破口,以远教资源应用为主渠道,以高效课堂为重点,深入开展教学研究,树立“以学生发展为本”的教育思想,不断更新教学观念,改变教师的教学..._音乐提交一份使用信息技术进行教育教学的教学设计,该设计中包括主题、教学对象及

php服务端处理IOS自动续费_php 苹果续费退款回调处理-程序员宅基地

文章浏览阅读1.1k次。公司做的app需要做IAP订阅支付,自己做完总结一下,希望对小伙伴们有帮助我就很欣慰了。代码写的不好 不要喷我。首先讲一下我的业务逻辑:先上图下面详细讲一下,作为服务端具体要做些什么,并贴上对应的代码:第一步:通过客户端传过来的recept(票据)进行生成订单的操作【注意这里需要验证订单是否已存在】,订单生成返回客户端相关信息; public function pay() { $uid = $this->request->header('uid'); _php 苹果续费退款回调处理

广东印发知识产权人才“十四五”规划_优化知识产权人才激励制度-程序员宅基地

文章浏览阅读337次。近日,广东印发知识产权人才“十四五”规划,全面加强广东知识产权人才队伍建设,完善知识产权人才结构,拓宽知识产权人才培养渠道,健全知识产权人才评价激励和流动配置机制,优化知识产权人才工作环境,为广东高质量发展提供坚实的知识产权人才支撑。  《规划》紧抓“双区”建设和两个合作区建设重大历史机遇,牢固确立人才是第一资源理念,紧紧围绕建设知识产权强国先行示范省需求,健全知识产权人才评价激励和流动配置机制,优化知识产权人才工作环境,结合广东经济社会发展实际,着眼知识产权与科技创新、产业发展、商贸融合的发展趋势,将_优化知识产权人才激励制度

JQuery EasyUI Tree-程序员宅基地

文章浏览阅读508次。TreeTree的定义树(tree)定义在 ul 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 li 元素。<ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> <span>Sub..._jquery easyui tree