将网站打包成app

归功于近几年CPU速度的提升,web打包成的app流畅度已经和原生app没有多大区别。对于个人而言,用web写UI界面是最好的选择,一方面只需一套代码就可以跑遍所有平台,另一方面web端有各种各样的库,写出好看的界面比原生app容易太多了。

如果有大量数据需要处理,担心web app的性能,可以用其他语言另开一个进程,数据处理完之后再通过websocket交给web显示就好了。

对于桌面端可以使用electron打包,对于移动端可以使用flutter进行打包。他们其实就是一个nodejs的package,对于web开发者来说用起来很方便。

下面以electron举例,将我的博客打包成一个app。

首先创建一个index.js文件:

const { app, BrowserWindow } = require('electron')


app.whenReady().then(() => {
  const win = new BrowserWindow({
    width: 1200,
    height: 800
  })

  win.loadURL('https://fivecakes.com')
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

然后创建package.json:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "electron .",
    "pack": "electron-builder --dir",
    "dist": "cross-env CSC_IDENTITY_AUTO_DISCOVERY=false electron-builder"
  },
  "devDependencies": {
    "cross-env": "^7.0.3",
    "electron": "^13.1.1",
    "electron-builder": "^22.10.5"
  }
}

安装依赖,并打包称app:

yarn
yarn dist

运行效果
image

posted @ 2021-06-06 14:35:41
评论加载中...

发表评论