VS code angularjs swiper electron ubuntu下從原始配置到electron調試

 

git 各類操做: https://blog.csdn.net/weixin_36934930/article/details/80988907
安裝git
sudo apt-get install git
git config --global user.name "ASxx" 
git config --global user.email "123456789@qq.com"

1》 git branch ericbranch，在當前分支也就是Dev分支上建立了一個名爲ericbranch的新分支。
2》 git checkout ericbranch 命令來切換到咱們新建立的ericbranch的新分支上。
3》 git commit -a -m 「massage」 命令在新的分支上進行代碼提交 -m 參數表示能夠直接輸入後面的「message」，若是不加 -m參數，那麼是不能直接輸入message的，而是會調用一個編輯器通常是vim來讓你輸入這個message，-a參數能夠將全部已跟蹤文件中的執行修改或刪除操做的文件都提交到本地倉庫，即便它們沒有通過git add添加到暫存區，注意
新加的文件（即沒有被git系統管理的文件）是不能被提交到本地倉庫的。建議通常不要使用-a參數，正常的提交仍是使用git add先將要改動的文件添加到暫存區，再用git commit 提交到本地版本庫。
4》 git查看遠程倉庫地址命令 git remote -v

git 切換遠程分支
http://zhidao.baidu.com/link?url=cuqJsL9skJJn5c556zXfP1dgCAOUK37CDXkNIw_sS0YKmvoROTI0HP7-PbKjgs6Lv4XrGleG2fjg5AaNgASlxgmt00c7rsC5gpPryKR_D_G

git clone只能clone遠程庫的master分支，沒法clone全部分支，解決辦法以下：
1. 找一個乾淨目錄，假設是git_work
2. cd git_work
3. git clone http://myrepo.xxx.com/project/.git ,這樣在git_work目錄下獲得一個project子目錄
4. cd project
5. git branch -a，列出全部分支名稱以下：
remotes/origin/dev
remotes/origin/release
6. git checkout -b dev origin/dev，做用是checkout遠程的dev分支，在本地起名爲dev分支，並切換到本地的dev分支
7. git checkout -b release origin/release，做用參見上一步解釋
8. git checkout dev，切換回dev分支，並開始開發。

 

 

1. install VSCode  

搜索插件，安裝 Angular Language Service 
C/C++
TSLint
GitLens — Git supercharged

2. install nodeJS  
/*

github nvm

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.34.0/install.sh | bash
nvm ls-remote
nvm install 10.15.1

*/
 
3. npm i -g @angular/cli (OR  cnpm i -g @angular/cli  [npm install -g cnpm --registry=https://registry.npm.taobao.org])
4. npm i -g electron (OR  cnpm i -g electron)
5. ng new kioskpoc --style=scss
6. cd kioskpoc
7. npm i{

npm install
　　會下載dependencies和devDependencies中的模塊，當使用npm install –production或者註明NODE_ENV變量值爲production時，只會下載dependencies中的模塊
npm install --save
　　安裝到node_modules目錄中，保存在package.json中dependencies字段下，安裝生產環境依賴的模塊，即項目運行時的模塊，例如react，react-dom,jQuery等類庫或者框架
npm install --save-dev
　　安裝到node_modules目錄中，保存在package.json中devDependencies字段下，安裝開發環境依賴的模塊，即項目開發時的模塊，例如babel（轉碼器，能夠將ES6代碼轉爲ES5代碼）等一些工具，只需在開發環境是用到。

npm i module_name  -S  = >  npm install module_name --save    寫入到 dependencies 對象
npm i module_name  -D  => npm install module_name --save-dev   寫入到 devDependencies 對象

}
8. npm i -D electron electron-reload
9. 在src/index.html中修改<base href="/">爲<base href="./">
10. 修改package.json  "build": "ng build --output-path dist/"
11. npm run build

ng build（僅編譯）或 ng serve（編譯並啓動本地服務器） 即時編譯 (JIT)
ng build --aot ng serve --aot 預先（AOT）編譯
帶有 --prod 標誌的 ng build 命令 (ng build --prod) 會默認使用 AOT 編譯。

12. 新建 index.js
13. electron ./
 
/* index.js

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var electron_1 = require("electron");
var path = require("path");
var url = require("url");
//import * as events from 'events';
var win, serve, emitterA;
var args = process.argv.slice(1);
serve = args.some(function (val) { return val === '--serve'; });
// var addon = require('bindings')('addon');
//   addon(function(msg){
//     console.log(msg); // 'hello world'
//   });
function createWindow() {
    var electronScreen = electron_1.screen;
    var size = electronScreen.getPrimaryDisplay().workAreaSize;
    // Create the browser window.
    win = new electron_1.BrowserWindow({
        x: 0,
        y: 0,
        width: size.width,
        height: size.height,
        //autoHideMenuBar: false,
        fullscreen: false
    });
    if (serve) {
        require('electron-reload')(__dirname, {
            electron: require(__dirname + "/node_modules/electron")
        });
        win.loadURL('http://localhost:4200');
    }
    else {
        win.loadURL(url.format({
            pathname: path.join(__dirname, 'dist/index.html'),
            protocol: 'file:',
            slashes: true
        }));
    }
    win.webContents.openDevTools();
    // Emitted when the window is closed.
    win.on('closed', function () {
        // Dereference the window object, usually you would store window
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null;
    });
    win.on("show", function () {
    });
    win.on("will-move", function () {
    });
    // ipcMain.on('pong', (event, data)=>{
    //   console.log(data);
    // });
}
try {
    // This method will be called when Electron has finished
    // initialization and is ready to create browser windows.
    // Some APIs can only be used after this event occurs.
    electron_1.app.on('ready', createWindow);
    // Quit when all windows are closed.
    electron_1.app.on('window-all-closed', function () {
        // On OS X it is common for applications and their menu bar
        // to stay active until the user quits explicitly with Cmd + Q
        if (process.platform !== 'darwin') {
            electron_1.app.quit();
        }
    });
    electron_1.app.on('activate', function () {
        // On OS X it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (win === null) {
            createWindow();
        }
    });
}
catch (e) {
    // Catch Error
    // throw e;
}
//# sourceMappingURL=main.js.map

*/
 index.ts

import { app, BrowserWindow, screen } from 'electron';
import * as path from 'path';
import * as url from 'url';

let win, serve;
const args = process.argv.slice(1);
serve = args.some(val => val === '--serve');

function createWindow() {

  const electronScreen = screen;
  const size = electronScreen.getPrimaryDisplay().workAreaSize;

  // Create the browser window.
  win = new BrowserWindow({
    x: 0,
    y: 0,
    width: size.width,
    height: size.height,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  if (serve) {
    require('electron-reload')(__dirname, {
      electron: require(`${__dirname}/node_modules/electron`)
    });
    win.loadURL('http://localhost:4200');
  } else {
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  }

  if (serve) {
    win.webContents.openDevTools();
  }

  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store window
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null;
  });

}

try {

  // This method will be called when Electron has finished
  // initialization and is ready to create browser windows.
  // Some APIs can only be used after this event occurs.
  app.on('ready', createWindow);

  // Quit when all windows are closed.
  app.on('window-all-closed', () => {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
      app.quit();
    }
  });

  app.on('activate', () => {
    // On OS X it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
      createWindow();
    }
  });

} catch (e) {
  // Catch Error
  // throw e;
}

 
/***** 建立路由 *****/
14. ng generate component test test1
 
 
15.ng generate module app-routing --flat --module=app
/*
import {NgModule} from '@angular/core'
import {Routes, RouterModule} from '@angular/router'
 
import {LoginComponent} from './login/login.component'
import {MainComponent} from './main/main.component'
 
export const appRoutes: Routes = [
   {path: '', component: LoginComponent},
   {path: 'login', component: LoginComponent},
   {path: 'main', component: MainComponent}
]
 
@NgModule({
   imports: [RouterModule.forRoot(appRoutes)],
   exports: [RouterModule]
})
export class AppRoutingModule {
}
*/
16.  app.component.html中添加
/*
    <a routerLink="/test">test</a>
    <a routerLink="/test1">test1</a>
    <router-outlet></router-outlet>
*/
/***** 建立路由END *****/
 
/***** 添加swiper *****/
17. npm install swiper
18. npm link
19. npm link ngx-swiper-wrapper
20. npm install ngx-swiper-wrapper --save
21. app.module.ts 新增
import { SwiperModule } from 'ngx-swiper-wrapper';
imports 中新增 SwiperModule
22. test1.component.ts 新增
/*
import { SwiperComponent, SwiperConfigInterface, SwiperDirective } from 'ngx-swiper-wrapper';
public config: SwiperConfigInterface = {
    direction: 'horizontal',
    scrollbar: false,
    autoHeight: true,
    slidesPerView: 4
  };
 
public pools = [
    'WIN',
    'PLA',
    'QPL',
    'QQP',
    'W-P',
    'QTT',
    'CWA',
    'PLA',
    'QPL',
    'QQP',
    'W-P',
    'QTT',
    'CWA'
  ];
*/
23. test1.component.html 新增
/*
<swiper [config]="config" id="poolsContainer">
  <button *ngFor="let pool of pools">
    {{pool}}
  </button>
</swiper>
*/d
/***** 添加swiperEND *****/


/***** 添加rxjs *****/
24. npm install rxjs
 
 
 
/*****END *****/

/***** 添加服務  *****/

1. ng generate service pool  添加數據及方法


2. (test1.component.ts 中)  import { PoolService } from '../pool.service'

3.  調用服務

  constructor(private poolServic:PoolService) { }

  ngOnInit() {
     this.pools = this.poolServic.getHeroes();
  }

 /***** END *****/

 
/***** electron調試 *****/
1.使用vscode打開electron項目
2.點擊debug 添加配置
3.點擊「添加配置」：
4.打開launch.json點擊右下角的添加配置，添加「electron main」
{ 例如
    "type": "node",
    "request": "launch",
    "name": "Electron Main",
    "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
    "program": "${workspaceFolder}/main.js",
    "protocol": "inspector" //添加默認的協議是legacy，這個協議致使不進入斷點
}
注意：」protocol」: 「legacy」 //添加默認的協議是legacy，這個協議致使不進入斷點，改成：「inspector」

注意：咱們須要修改index.html文件中的<base href="/">替換成<base href="./">

5.在主進程（main.js）添加斷點，點擊「啓動」或者F5進行測試：
/***** electron調試END *****/
 
 
 
 /***** nodejs CALL  SO 文件  *****/

1.

//////add.c
#include <stdio.h>
int add(int a,int b) {
 return a+b;
}

2.add.c目錄下 gcc -fPIC -shared  -o libdemo.so add.c

3. 新建js文件

'use strict' /**
 * 短信下發服務模塊
 * 因爲項目是使用node 5.0+，因此安裝node-ffi模塊須要依賴gcc 4.8+以上版本
 */
var ffi = require('ffi'); // int send_msg(char * phone, char * content) 
var libm = ffi.Library('/home/hkjc/Desktop/test1/libdemo', { 
    'add': ['int', ['int', 'int']] 
}); 
console.log(libm.add(3,7));

4. //ffi安裝
 sudo apt-get install git
 npm install ffi@gavignus/node-ffi#torycl/forceset-fix --save

5. debug調試

6. node-ffi使用指南   https://www.imooc.com/article/46931
 /***** END *****/

  /***** GCC G++版本  *****/

sudo apt-get install g++-4.8

sudo update-alternatives --install /usr/bin/g++ g++ /usr/bin/g++-4.8 100

sudo apt-get install gcc-4.8

sudo update-alternatives --install /usr/bin/gcc gcc /usr/bin/gcc-4.8 100

（ffi 調用接口不方便，addon經過編譯C++的方式能夠方便的編寫調用C++SO代碼,查看 nan 示例能夠幫助編寫複雜的cpp文件。）

//node-gyp 相關 

　　npm install -g node-gyp
　　node-gyp configure //查找binding.gyp並進行 編譯 在 build/ 目錄下生成一個 Makefile 文件（在 Unix 平臺上）或 vcxproj 文件（在 Windows 上）。
　　node-gyp build 命令生成編譯後的 addon.node 的文件。 它會被放進 build/Release/ 目錄

　(node-gyp 手冊 https://blog.csdn.net/caoshiying/article/details/80868280 gyp編寫: https://blog.csdn.net/qq295445028/article/details/7859103 )

 

 /***** END *****/