现代Web开发与应用课件 第五章-Web前端框架.ppt

示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示https://blocklycodelabs.dev/codelabs/getting-started/index.html?index=..%2F..index#0*************************示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*示例在VSCode中用FiveServer打开演示*工具库框架GoogleBlockly二次开发(CodeLab)运行生成的代码步骤：装载相应按钮的工作空间内容根据该工作空间内容生成代码运行该代码：简单实用eval()，生产环境中，参考以下网址：/NeilFraser/JS-Interpreterjavascript.javascriptGenerator.workspaceToCode.工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发使用BlockFactory和BlockExporter创建自定义块使用WorkspaceFactory构建工具箱和默认工作空间使用WorkspaceFactory配置工作空间说明文档：/blockly/guides/create-custom-blocks/blockly-developer-tools?hl=zh-cn工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发在线网址：/static/demos/blockfactory/index.html?hl=zh-cn工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发设定新块的颜色工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发设定新块的输入：：valueinput（值输入）、statementinput（声明输入）、dummyinput（模拟输入）等工具库框架GoogleBlockly使用BlocklyDeveloperTools进行二次开发使用值输入和声明输入，可以很容易地设计出编程中常用的条件语句和循环语句。移动Web移动产品的三种实现方式NativeApp?丰富的用户体验?平台指向性久经考验的移动应用开发途径WebApp更快的开发周期跨平台运行实时更新HybridApp与应用类似的使用体验利用设备自身功能多平台支持能力移动Web以Web技术为重的混合框架用户界面和控制逻辑以Web技术为主；平台SDK提供的WebView框架负责和底层交互，以及布局PhoneGap；Cordova；IonicHybridApp以原生技术为主的混合框架使用特定的技术如ReactNative或Flutter，这些技术允许开发者使用JavaScript（ReactNative）或Dart（Flutter）编写应用，但最终应用是直接编译成原生代码执行的。移动Web移动web开发框架移动Web开发移动WebPhoneGap（cordova）系统架构提供了使用JavaScript调用Native功能移动Web前端移动框架Ionic移动平台前端UI框架，封装了Angular，使用标准的CSS，JS,