制作背景

为了参加ImagineCup 2013 世界公民类比赛，我们设计制作了一个可动态扩展的幼教类App。这个App需要能动态加载内容，内容包括带动画可交互的电子书，动画，视频，游戏。

技术支持

2012年10月第一次：因为SVG性能问题，将SVG换为cocos2d-x JSBind，可惜cocos2d-x JSBind不完善，最后换为cocos2d-x html5。11月第二次：cocos2d-x html5性能问题，破产。12月第三次：取消HTML5，转为使用XAML+JS模式。
（微软的WinRT明显就是阉割的WPF，查过动态加载相关的类库，只允许加载安装时已包含的DLL。）

用XAML来做前台页面，性能比HTML的高很多，而且制作十分方便，微软擅长做IDE嘛，Blend配合Adobe的AI出矢量界面、动画十分迅速，我们的美工上手也快。
用JS来做后台逻辑也是很方便的，为了程序流程方便管理后来用状态机做了个程序制作工具。

由于XAML和JS本质上都是文本，所以加密非常容易，Win8Metro做AES加密很容易，可以很好的保护代码。（额...反编译C#代码获取AES密钥不在讨论范围内...）
根据需要另集成了Spritehand.PhysicsHelper.Metro物理引擎。

相关技术传送门

核心原理


XAML与C#代码通信

网上有个Win8Metro的框架，G.Controls其中Interactive部分就可以把WPF中的Behavior、EventTrigger带回来。

至于JS与C#通信那就简单了，WebView本身就有事件支持。

服务端为Asp.Net MVC/WebApi,图片直接Base64存数据库。

（代码没有重构过，比较乱，就不发布了。）

其他


总体开发流程


外壳程序状态机流程图


其中一个游戏的部分状态机流程图


程序逻辑编辑器界面


程序逻辑编辑器界面


HTML5支持WebSocket可以连接UppBox，自写的JS状态机引擎在调试模式下可以把与C#代码交互过程全部传输出来，还可以传输指令，方便调试。


XAML+JS协议文档，大部分命令都支持写在XAML自动触发或JS发送


配套的App测试平台...没什么用的机会了...

Win8 Metro动态加载内容框架的更多相关文章

  1. Scrapy 框架 使用 selenium 爬取动态加载内容

    使用 selenium 爬取动态加载内容 开启中间件 DOWNLOADER_MIDDLEWARES = { 'wangyiPro.middlewares.WangyiproDownloaderMidd ...

  2. 在ASP.NET中动态加载内容（用户控件和模板）

    在ASP.NET中动态加载内容(用户控件和模板) 要点: 1． 使用Page.ParseControl 2． 使用base.LoadControl 第一部分:加载模板 下 面是一个模板“<tab ...

  3. bootstrap模态框modal使用remote动态加载内容，第二次加载显示相同内容解决办法

    bootstrap的modal中,使用remote可以动态加载页面到modal-body中,并弹窗显示 如果提供的是 URL,将利用 jQuery 的 load 方法从此 URL 地址加载要展示的内容 ...

  4. python+selenium+PhantomJS爬取网页动态加载内容

    一般我们使用python的第三方库requests及框架scrapy来爬取网上的资源,但是设计javascript渲染的页面却不能抓取,此时,我们使用web自动化测试化工具Selenium+无界面浏览 ...

  5. bootstrap modal动态加载内容

    $("#test .modal-body").load('test_url?id=' + id,function(){ $("#followStep1").mo ...

  6. layui upload 在JS动态加载内容后, 点击按钮无反应

    /** * 根据用户选择的不同规格选项 * 返回 不同的输入框选项 */ function ajaxGetSpecInput2(spec_arr) { var goods_id = $('#goods ...

  7. APK动态加载框架（DL）解析

    转载请注明出处:http://blog.csdn.net/singwhatiwanna/article/details/39937639 (来自singwhatiwanna的csdn博客) 前言 好久 ...

  8. Android动态加载框架汇总

    几种动态加载的比较 1.Tinker 用途:热修复 GitHub地址:https://github.com/Tencent/tinker/ 使用:http://www.jianshu.com/p/f6 ...

  9. 动态加载框架DL分析

    动态加载框架DL分析 插件化开发,主要解决三个问题1.动态加载未安装的apk,dex,jar等文件2.activity生命周期的问题,还有service3.Android的资源调用的问题 简单说一下怎 ...

随机推荐

  1. nodejs+mysql 断线重连

    var mysql = require('mysql'); var conn; function handleError () { conn = mysql.createConnection({ ho ...

  2. SVN基本指令

    Svn使用: Versions: Cornerstone: 如果命令行不出来,可以设置commonsline Tools 命令行:svn heip 获取服务器端数据 svn checkout 远端ur ...

  3. ListView中的setOnScrollListener

    ListView是Android中最常用的控件之一,随着时代发展,RecyclerView有取代它的趋势,但是在一些老代码中,ListView依然扮演着重要的作用.项目中遇到一个需求,需要监听List ...

  4. [leetcode] 题型整理之cycle

    找到环的起点. 一快一慢相遇初,从头再走再相逢.

  5. 一些关于 checkbox的前台 jquery 操作 记录

    $(function() { //页面载入函数 var partList = jQuery.parseJSON( '${KeyWordsList}'); $.each(partList,functio ...

  6. node - glob模块

    node的glob模块允许你使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件. 这个glob工具基于javascript.它使用了 minimatch 库来进行匹配 ...

  7. 寒冬之下,浩瀚智能开单收银打印扫描POS为何能在批发零售门店商场 车销行业 风靡！：进销存+打印扫描POS机

    是一款适用于商超.餐饮.服装鞋帽.家电专营等等具有零售行业特点的企业,供企业管理人员用于管理.监控本品牌的市场占有率.门店覆盖区域.网点分布合理性等经济地理信息的工具平台. 1,功能一:业务抄单文章来 ...

  8. Redis——学习之路二（初识redis服务器命令）

    上一章我们已经知道了如果启动redis服务器,现在我们来学习一下,以及如何用客户端连接服务器.接下来我们来学习一下查看操作服务器的命令. 服务器命令: 1.info——当前redis服务器信息   s ...

  9. Java 正则表达式匹配模式[贪婪型、勉强型、占有型]

    Greediness(贪婪型):最大匹配 X?.X*.X+.X{n,} 是最大匹配.例如你要用 “<.+>” 去匹配 “a<tr>aava </tr>abb”,也许 ...

  10. mysql存不了中文的解决办法

    driver=com.mysql.jdbc.Driverurl=jdbc:mysql://127.0.0.1:3306/testdb?useUnicode=true&characterEnco ...