基于js的开发wp8界面_移动开发_编程开发_程序员俱乐部

一般开发wp8应用我们都用xaml，但是xaml里面的各种效果都不如用html+css+js实现起来方便 

所以就有了用js来开发wp8 界面的想法 

1. 在新建项目选择windows Phone HTML5 应用程序(或者你随便新建一个空项目)
2. 只要在最外面的布局GRid里面添加一个<phone:WebBrowser x:Name="Browser"/> 控件即可

后端调用js的方法为WebBrowser 控件里面的 InvokeScript方法 里面有2个参数  第一个为方法名 第二个为方法的参数（非必填）

class="Apple-tab-span" style="white-space:pre"> ps:方法名即页面存在js的方法  ，参数就是要调用的js的参数 

前段调用c#的方法为js里面的 window.external.notify方法 只有一个参数

ps:监听 WebBrowser 的事件ScriptNotify ，值在 NotifyEventArgs对象下的 Value

 

既然是c#和js交互那么参照网络数据包 必须要有一个中间件来通讯

不知道大家有没有除了$符号，还有没有其他符号做全局的变量

  
    /// <summary>
    /// 中间件
    /// </summary>
    public class MiddleWare
    {
        /// <summary>
        /// 方法名
        /// </summary>
        public string funName { get; set; }
        /// <summary>
        /// 参数
        /// </summary>
        public string args { get; set; }
        /// <summary>
        /// js方法
        /// </summary>
        public string callback { get; set; }
    }

 

 1   Object.prototype.extend = function () {

 2   var arg = arguments[0];
 3     var that = this;
 4     for (var i in that) {
 5         that[i] = arg[i] || that[i];
 6     }
 7     return that;
 8 };
 9 (function (a) {
10     function jquery() {
11         /*调用后端的方法
12             funName 后端的方法名
13             args  参数
14             callBack  回掉方法*/
15         this.Invoke = function (funName, args, callBack) {
16             var arg = arguments;
17             var _middleWare = {
18                 funName: '',
19                 args: '',
20                 callBack: ''
21             }.extend({
22                 funName: arg[0],
23                 args: arg[1],
24                 callBack: arg[2]
25             });
26             window.external.notify(JSON.stringify(_middleWare))
27         }
28     };
29     a["$"] = a["$"] || new jquery();
30 })(window)

在接收后台接收参数用Json.NET的类库来json序列化  

 先声明一个静态类

 1     
 2 public delegate void invokeScript(string scriptName, params string[] args);
 3     public class TicketApp
 4     {
 5         private static TicketApp instance;
 6         private TicketApp() { }
 7         public static TicketApp Instance
 8         {
 9             get { if (instance == null) { instance = new TicketApp(); } return instance; }
10         }
11 
12         public event invokeScript InvokeScriptEvent;
13 
14 
15         private void ScriptAction(string scriptName, params string[] args)
16         {
17             if (this.InvokeScriptEvent != null)
18             {
19                 this.InvokeScriptEvent(scriptName, args);
20             }
21         }
22 
23         public void Invoke(string jsonStr)
24         {
25             if (!string.IsNullOrWhiteSpace(jsonStr))
26             {
27                 var middleWare = JsonConvert.DeserializeObject<MiddleWare>(jsonStr);
28                 ScriptAction(middleWare.callback, new string[] { "2" }); //用于测试
29             }
30         }
31 }

然后在页面绑定上去

        // 构造函数
        public MainPage()
        {

            InitializeComponent();
            Browser.ScriptNotify += Browser_ScriptNotify;
            TicketApp.Instance.InvokeScriptEvent += Instance_InvokeScriptEvent;
        }

        void Instance_InvokeScriptEvent(string scriptName, params string[] args)
        {
            Browser.InvokeScript(scriptName, args);
        }

        void Browser_ScriptNotify(object sender, NotifyEventArgs e)
        {
            TicketApp.Instance.Invoke(e.Value);
        }

在页面上面写js为

   $.Invoke('', '', 'show');
        function show(a) {
            alert(a)
        }

这样基本功能就实现啦  ，就可以实现前后端的互调啦

 因为前面写了 ScriptAction(middleWare.callback, new string[] { "2" }); 传的参数为2  所以提示为2

 调用后台方法我不打算用switch case 写起来会很麻烦 打算根据字符串用反射来调用方法 ，大家有什么好的方法告诉我呗

 

大家有什么意见请尽情吐槽