小程序的view模块和service模块怎么构成


本文小编为大家详细介绍“小程序的view模块和service模块怎么构成”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序的view模块和service模块怎么构成”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。打开微信 web 开发者工具,然后输入 openVendor() 便会打开 WeappVendor这个目录,这里包含了 view 模块和 service 模块使用的几个核心文件:wcc 可执行程序,用于将 wxml 转为 view 模块使用的 js 代码,使用方式为wcc xxx.wxmlwcsc 可执行程序,用于将 wxss 转为 view 模块使用的 css 代码,使用方式为 wcsc xxx.wxssWAService.js 提供 service 模块大部分功能,下面会有详细介绍WAWebview.js 提供 view 模块大部分功能,下面会有详细介绍view 页面详解view 页面的 template 如下:其中 会在 dev 模式开启后被替换为一个时间锚点,例如: 会被 WAWebview.js 内代码替换 到 之间暂时没有被使用到 会被 wcc 命令生成后的 js 代码替换除了上面这些,页面上还会被插入页面和应用的 style 标签,如:这里的 wxss 文件包含的是原始 wxss 文件转换后的 css以及生成 DOM 的启动脚本:WAWebview.js 文件中的各个模块(行号为 jsbeautify 之后代码行号,开发者工具版本:092300):1-77 行: WeixinJSBridge 对象兼容层,这个大概只会在调试时用到,因为开发时和运行时页面都会被后台以注入的方式添加 WeixinJSBridge 这个对象。我们可以通过这段代码看到它暴露的方法: invoke invokeCallbackHandleron publish subscribe subscribe subscribeHandler。78-235 行:Reporter 对象,它的作用就是发送错误和性能统计数据给后台236-596 行:wx 对象,页面的核心之一,一方面封装 WeixinJSBridge 的 invokeMethod 方位为易于调用的形式(例如 redirectTo, navigateTo等),另一方面封装 WeixinJSBridge 回调方法,调用者可以使用wx.onAppDataChange(callback) 添加数据变更的回调函数,***提供wx免费云主机域名.publishPageEvent 发送页面事件到后台607-1267 行:wxparser 对象,提供 dom 到 wx element 对象之间的映射操作,提供元素操作管理和事件管理功能1268-1285 行:转发 window 上的 animation 和 transition 相关的动画事件到 exparser1286-1313 行:订阅并转发 WeixinJSBridge 提供的全局事件到 exparser1324-1345 行:转发 window 上的 error 以及各种表单事件到 exparser1347-3744 行:使用 exparser.registerBehavior 和exparser.registerElement 方法注册各种以 wx- 做为标签开头的元素到 exparser3744-4498 行:virtual dom 渲染算法实现,提供 diff apply render 等方法,该模块接口基本与 virtual-dom 一致,这里特别的地方在于它所 diff 和生成的并不是原生 DOM,而是各种模拟了 DOM 接口的 wx element 对象4599-4510 行:插入默认样式到页面从页面 data 到 dom 的主要流程如下:上面的 DataStore 对象提供合并和获取当前页面 data 对象的功能,其实现如下:可以看到,每次 data 变化之后,小程序就会开始整个页面的 diff patch 过程。对于原生实现的组件, exparser 会在监视到数据变化后发送对应事件到 WeixinJSBridge。service 页面详解service 页面会被被拼接为以下的样子:除了配置和开发者编写的页面、app.js,页面还在加载了 asdebug.js 和 WAService.js 两个文件。asdebug.js 文件位于 nwjs 项目目录下,路径为app/dist/weapp/appservice/asdebug.js。 它包含了两个部分,一个是 WeixinJSBridge 针对 service 模块的实现,另一块是一些方便命令使用的接口, 例如:help() 会告诉你一些可用的函数:该文件只会在开发者工具内被引入,如果小程序在微信内运行,应该会由微信底层提供 WeixinJSBridge。WAService 负责 service 模块的一些核心逻辑,它包含以下部分 (行号为 jsbeautify 之后代码行号,开发者工具版本:092300):1-78 行: 跟 WAWebview.js 一样的 WeixinJSBridge 兼容模块79-245 行: 跟 WAWebview.js 一样的 Reporter 模块246-1664 行:比 WAWebview.js 中 wx 功能更为丰富 wx 接口模块1665-2304 行:appServiceEngine 模块,提供 Page,App,GetApp 接口2305-2360 行: 为 window 对象添加 AMD 接口 require define现在的 WAService 还有有很多地方依赖 window 对象,所以很有可能它在微信中和开发者工具内一样,依然运行于 webview 标签之内。读到这里,这篇“小程序的view模块和service模块怎么构成”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注百云主机行业资讯频道。

相关推荐: 怎么保证RabbitMQ全链路数据100%不丢失

这篇文章主要介绍了怎么保证RabbitMQ全链路数据100%不丢失的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么保证RabbitMQ全链路数据100%不丢失文章都会有所收获,下面我们一起来看看吧。正在学RabbitMQ,特此记…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 07/31 11:16
下一篇 07/31 11:16

相关推荐