Use node-webkit to develop PC clients

2013 Introduction

Node-webkit is a magical Desktop client project. Just like the project name, this project is composed of node and webkit. In short, that is, you can use HTML 5 and node for Desktop client development, and the client also supports running in windows, MAC, and LINUX. next, we will use a simple example to show the charm of node-webkit.

Create a project. This example is based on Grunt.

If you have used grunt, it is very easy to create a node-webkit. I have already written a node-webkitgrunt-initAs for how to install this template, it is the same as the official tutorial. If you are a windows User

Md % USERPROFILE %. grunt-init \ node-webkit
Git clone git@github.com: youxiachai/grunt-init-node-webkit.git % USERPROFILE %. grunt-init \ node-webkit

Linux or mac

Git clone git@github.com: youxiachai/grunt-init-node-webkit.git ~ /. Grunt-init/node-webkit

You only need to use

grunt-init node-webit

You can complete the creation.

12	├─app.nw└─test

App. the nw directory is the project folder of the pc client to be written. It is very easy to run the node-webkit project. You only need to configure the runtime environment of node-webkit to environment variables and then run

nw app.nwYou can run it. 650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" nodewebkit1 "border =" 0 "alt =" nodewebkit1 "src =" http://www.bkjia.com/uploads/allimg/131228/1136041T4-0.jpg "width =" 244 "height =" 168 "/>

PS: If you don't want to touch grunt, but I suggest learning grunt, you can go to the https://github.com/rogerwang/node-webkit#quick-start to learn how to start a node-webkit application.

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" oscloud 1 "border =" 0 "alt =" oscloud 1 "src =" http://www.bkjia.com/uploads/allimg/131228/1136043V0-1.jpg "width =" 244 "height =" 210 "/>

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" osc00002 "border =" 0 "alt =" osc00002 "src =" http://www.bkjia.com/uploads/allimg/131228/113604L46-2.jpg "width =" 244 "height =" 204 "/>

This is the so-called win 8 client .... the frame that the interface uses is this goods: the time of http://aozora.github.io/bootmetro/ 90% is adjusted interface... it hurts ...... not even a win8-style progress .. it makes me very sad .. it may also be the reason for alpha. however, the final effect is still ugly, so let's get together ....

Development

Develop pc client language support based on node-webkitc/c++,html5,css3,js,node apiNow, let's use html 5 + css3 to write a pc client.node-webkitIn essence, it is a browser that can run node. Therefore, we can use web development techniques to develop pc clients without any problems.

First, opentoolbar, Inpackage.jsonFile containstoolbar, SettrueAs shown in:

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" toolbar "border =" 0 "alt =" toolbar "src =" http://www.bkjia.com/uploads/allimg/131228/11360411R-3.jpg "width =" 244 "height =" 18 "/>

Click the button of the three horizontal lines and a chrome debugging window will pop up.

650) this. width = 650; "style =" border-right-0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px "title =" console "border =" 0 "alt =" console "src =" http://www.bkjia.com/uploads/allimg/131228/113604L16-4.jpg "width =" 244 "height =" 183 "/>

During the development, after modifying the file, you do not need to re-run the program to view the result. You can click the refresh button on the left to view the modified running result.node-webkitIs it convenient to develop the client!

Then, to develop an oschina pc client, you only need to know the relevant api. You can get the relevant api from the android client source code...app/model/oschinaApi.jsFile.

Node-webkit has been removed from related security restrictions. Therefore, if you use node-webkit to develop pc clients, requests sent using webkit are not subject to same-source restrictions. using node-webkit to develop some restful applications is very comfortable, as long as there is a good interface. aboutnode-webkitAnd the rest is web development.node-webkitIn the specified range ..

Open-source projects used

Interface:

Http://aozora.github.io/bootmetro/

Https://github.com/cubiq/iscroll

Template engine:

Https://github.com/visionmedia/ejs

Project address

Github:

Https://github.com/youxiachai/osChinaDesktopClient

Git @ osc:

Http://git.oschina.net/youxiachai/oschinadesktopclient

Program running: Go between windows usersapp.nwRun nw.exe in the directory.

Cd app. nw
Nw.exe

Linux or mac users delete files except index.html, package. json, and app, and thennode-webkitConfigure the running environment to run in Environment Variables

Nw app. nw