专栏首页javascript趣味编程2.4 电脑/手机客户端开发简介

2.4 电脑/手机客户端开发简介

想开发手机app?不会开发PC客户端?不存在!会写网页几步就能实现将网页转化为PC或手机客户端。

我们可以借助node.js的开源库electron开发桌面客户端。node.js是什么?就是类似于浏览器的一个javascript运行环境,可以脱离浏览器运行js程序。

打开网页就可以直接运行H5程序,为什么要开发桌面程序呢?因为桌面程序能够访问硬件,例如我们需要读取电脑串口数据并绘图,这时H5网页程序就无能为力了。

第一步就是安装node.js运行时了,到官方网站https://nodejs.org找到对应操作系统的版本并安装,打开界面如下:

大部分操作基本都是命令行,接下来的步骤(需要在命令行输入命令并执行)如下:

  • 全局安装electron(这个工具用于开发桌面程序,支持Win/macOS/*inx主流操作系统):
npm install --g electron-prebuilt 
  • 在某空文件夹内新建package.json文件(配置程序):
{
  "name": "appDemo",
  "version": "0.1.0",
  "main": "./main.js",
  "scripts": {
    "start": "electron ."
  },}
  • 当前目录安装electron并添加依赖项(需要cd到当前目录):
 npm install --save-dev electron-prebuilt

执行后,package.json文件变成(里面的main.js文件就是程序主文件):

{
  "name": "appDemo",
  "version": "0.1.0",
  "main": "./main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron-prebuilt": "^1.4.13"
  }
}
  • 编写逻辑代码main.js:
const electron = require('electron');const app = electron.app;const url = require('url');const path = require('path');mainWindow=null;function createWindow() {
  mainWindow = new electron.BrowserWindow({
    width: 800,
    height: 600
  });
 
  mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, 'index.html'),
    protocol: 'file:',
    slashes: true
  }));

  mainWindow.on('closed', () => {
    mainWindow = null;
  });}app.on('ready', createWindow);
  • 简易界面index.html(这个网页只有一行字)
<h1>Hello World!</h1>
  • 程序运行和打包

客户端输入命令:electron . (这里有一个点),然后就可以观察到运行的程序(也就是你写的那个index.html网页)了,相当于你写了一个浏览器,但这个浏览器你自己可以随意添加功能。

如果需要打包程序还需要安装electron-packager:

install --save-dev electron-packager

打包后的程序就可以脱离开发环境,拷贝到其它PC上也可以运行了。

electron具有“一次开发,各主流操作系统都能运行的特点”,开发效率和跨平台特性有优势。本节内容只给出了PC客户端开发的基本步骤,有兴趣的读者可以自行查找教程。同样可以使用cordova开发手机客户端,由于和本教程关联度不大,就不再赘述了。

本文分享自微信公众号 - 传输过程数值模拟学习笔记(SongSimStudio)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-08-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 2.4 电脑/手机客户端开发简介

        想开发手机app?不会开发PC客户端?不存在!会写网页几步就能实现将网页转化为PC或手机客户端。

    周星星9527
  • 2.5 node.js回首望

    node.js是什么?上一小节2.4说过了,也就是一个可以脱离浏览器独立的javascript的运行时(runtime)。nodejs之父Ryan Dahl...

    周星星9527
  • Rhino.Python脚本创建球体和圆柱

    周星星9527
  • 2.4 电脑/手机客户端开发简介

        想开发手机app?不会开发PC客户端?不存在!会写网页几步就能实现将网页转化为PC或手机客户端。

    周星星9527
  • Electron打包应用

    剑行者
  • Electron 打包时下载 xxx-electron-v1.6.8-<arch>-x64.zip 文件出错

    kongxx
  • CQRS框架:AxonFramework 之 Hello World

    Command Query Responsibility Segregation,CQRS 这个架构好象最近博客园里讨论得比较多,有几篇园友的文章很有深度,推荐...

    菩提树下的杨过
  • systemtap实现查找unused dentry对应文件小工具

    工具代码中在遍历访问d_lru链表时安全起见本来应该是要加内核dcache_lru_lock锁保护的,但是由于内核未将该锁导出给模块使用,所以代码实现的时候无法...

    chudihuang
  • Ambrosus-老虎不发威,你可别把它当病猫

    导语:Ambrosus发文总结2017年。 正文:Ambrosus十大主题故事 2017年是Ambrosus梦幻般的一年。我们想分享我们过去一年主要发展的十大故...

    企鹅号小编
  • 踩坑了,JDK8 中 HashMap 依然会产生死循环问题!

    来源:blog.csdn.net/qq_33330687/article/details/101479385

    芋道源码

扫码关注云+社区

领取腾讯云代金券