PC端的混合開發-CefSharp

移動端的混合開發是火的不要不要的。最近看了一款軟體。採用C#WinForm作為殼，內嵌谷歌瀏覽器的核心。一個標準的混合應用開發模式。

為什麼要這樣做？

其實和移動端的出發點差不多。就是為了web端實現主要業務。而殼主要用來呼叫本地硬體和原生的操作。比如：系統需要整合很多的硬體：小票二維碼印表機，掃描槍等。這樣通過js和c#的互操作，就達到了目的。

當然。要實現這樣的功能。我們還有一種方式，就是開發瀏覽器外掛，這樣就能通過js來呼叫。

好了下面記錄一下，具體的過程：環境是vs2013

1、建立WinForm專案。在NuGet裡面搜尋CefSharp.WinForms. 引入專案


過程可能相當的慢，沒辦法，牆外面的東西都這樣。

另：下載後，會對.net框架有最低，根據提示，安裝相應高版本的.net 框架即可
2、引入後，不能以Any CPU的方式啟動。需要建立X86 或 X64，如下：



3、頁面加入元件


 public MainForm()
        {
            InitializeComponent();
            
            //建立元件，傳遞URL：可以是本地，也可以是遠端地址
            ChromiumWebBrowser browser1 = new ChromiumWebBrowser(@"C:\00-leop\00-工作目錄\2018\201801\TRCNZT\TRCNZT\bin\x86\Debug\T.html")
            {
                Dock = DockStyle.Fill
            };
            this.browser = browser1;
           
            //將元件，新增到頁面上來
            this.MainPanel.Controls.Add(this.browser);
        }
4、C#呼叫js

 private void btnAlert_Click(object sender, EventArgs e)
        {
            this.browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("alert('這是c#呼叫的js,給文字框賦值！')");
            //txtAccount
            this.browser.GetBrowser().MainFrame.ExecuteJavaScriptAsync("document.getElementById('txtAccount').value='在C#裡面給頁面文字框進行賦值'");
        }
5、js呼叫C#
首要要建立被呼叫的C#物件和方法，注意方法名要小寫，大寫的時候，會呼叫失敗！


public class TestAsyncJS
    {
       
        /// <param name="text"></param>
        public void messageBox(string text)
        {
            MessageBox.Show(text);
        }
    }
然後註冊這個類

  //註冊C#物件，用來在js裡面呼叫
            this.browser.RegisterAsyncJsObject("CSharpObj", new TestAsyncJS(), BindingOptions.DefaultBinder);
這樣，就能直接在js頁面，呼叫C#方法
 <script>
        function ForSharp(){
            
            alert("準備呼叫C#的彈窗提示！");
            //註冊的物件名稱
            CSharpObj.messageBox("hello word");
        }
  </script>
較全的程式碼：

 public MainForm()
        {
            InitializeComponent();
            
            //建立元件，傳遞URL：可以是本地，也可以是遠端地址
            ChromiumWebBrowser browser1 = new ChromiumWebBrowser(@"C:\00-leop\00-工作目錄\2018\201801\TRCNZT\TRCNZT\bin\x86\Debug\T.html")
            {
                Dock = DockStyle.Fill
            };
            this.browser = browser1;
           
            //將元件，新增到頁面上來
            this.MainPanel.Controls.Add(this.browser);
 
            this.Text = this.AssemblyTitle;
 
            //註冊C#物件，用來在js裡面呼叫
            this.browser.RegisterAsyncJsObject("CSharpObj", new TestAsyncJS(), BindingOptions.DefaultBinder);
        }