Weex環(huán)境搭建(weexpack篇)

一、安裝node.js

點擊鏈接 http://nodejs.cn/download/ 選擇你需要安裝的版本（windows ，mac，linux 3種系統(tǒng)的版本），下載你需要的版本


點擊安裝包，下一步，下一步，安裝完成即可。
執(zhí)行查看node版本號

node -v

顯示當前node版本號

deiMac:~ li$ node -v
v8.1.0

使用淘寶NPM源

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

二、安裝webpack

//全局安裝
$ cnpm install -g webpack

或者

//安裝到你的項目目錄
$ cd 你的工程目錄
$ cnpm install --save-dev webpack

三、安裝serve

//全局安裝
$ cnpm install -g serve

或者

//安裝到你的項目目錄
$ cd 你的工程目錄
$ cnpm install  serve

四、安裝weexpack

首先，全局安裝 weex-pack 命令：

$ cnpm install -g weexpack

或者 在 clone 的 weexpack 根目錄下執(zhí)行

$ cnpm install
  1. 創(chuàng)建 weexpack 工程
$ weexpack create appName

使用WebStrom打開創(chuàng)建的工程目錄如下



2.進入創(chuàng)建的工程目錄，并且安裝相關依賴

$ cd appName && cnpm install

安裝完第三方依賴，工程目錄添加了node_modules目錄


weex-toolkit和weexpack的區(qū)別

weex-toolkit 初始化的項目是針對開發(fā)單個 Weex 頁面而設計的，也就是說這樣的項目只包括單個頁面開發(fā)需要的東西，比如前端頁面源文件、webpack 配置、npm 腳本等。項目產(chǎn)生的輸出就是一個 JS Bundle 文件，可以自由的進行部署。
weex-pack 是初始化一個完整的 App 工程，包括 Android 和 iOS 的整個 App 起步，前端頁面只是其中的一部分。這樣的項目最終產(chǎn)出是一個 Android App 和一個 iOS App。

五、創(chuàng)建.babelrc文件

將ES6轉成ES5代碼執(zhí)行

{ "presets": ["es2015"] }

六、創(chuàng)建.gitignore文件

配置git不上傳的文件和文件夾

# Weex
## idea && node_modules
.idea/
node_modules/
temp/
## output files
dist/

七、在工程根目錄下創(chuàng)建index.html文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Weex Preview</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no, email=no">
  <link rel="stylesheet" href="./web/assets/style.css">
  <script src="./web/assets/url.js"></script>
  <script src="./web/assets/qrcode.js"></script>
  <script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
  <h1>Weex Preview</h1>
  <div id="app"></div>
  <template id="app-template">
    <div id="app">
      <div class="mock-phone">
        <div class="inner">
          <iframe id="preview" src="./weex.html"></iframe>
        </div>
        <div class="camera"></div>
        <div class="earpiece"></div>
        <div class="home-btn"></div>
      </div>
      <div id="qrcode">
        <h2>QRCode</h2>
        <a :href="val" target="_blank"><canvas ref="canvas" width="200" height="200"></canvas></a>
        <p class="bundle-url"><a :href="val" target="_blank">{{val}}</a></p>
      </div>
    </div>
  </template>
  <script>
    console.log('QR CODE URL: ' + url)
    new Vue({
      el: '#app',
      template: '#app-template',
      data: { val: url },
      mounted: function () {
        var qrcodedraw = new QRCodeLib.QRCodeDraw()
        qrcodedraw.draw(this.$refs.canvas, this.val, function () {})
      }
    })
  </script>
</body>
</html>

八、在工程目錄下創(chuàng)建weex.html文件

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>weex-vue-demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-touch-fullscreen" content="yes">
  <meta name="format-detection" content="telephone=no, email=no">
  <style>body::before { content: "1"; height: 1px; overflow: hidden; color: transparent; display: block; }</style>
  <script src="./assets/phantom-limb.js"></script>
  <script src="./node_modules/vue/dist/vue.runtime.js"></script>
  <script src="./node_modules/weex-vue-render/dist/index.js"></script>
</head>
<body>
  <div id="root"></div>
  <script src="./dist/web/index.web.js"></script>
</body>
</html>

最終的工程目錄


九、修改web/assets/url.js文件

修改前

var protocol = location.protocol + '//';
var hostname = typeof CURRENT_IP === 'string' ? window.CURRENT_IP : location.hostname;
var port = location.port ? ':' + location.port : '';
var url = protocol + hostname + port + location.pathname.replace(/\/web\/index\.html$/, '/').replace(/\/$/, '/dist/app.weex.js');

修改后

var protocol = location.protocol + '//';
var hostname = typeof CURRENT_IP === 'string' ? window.CURRENT_IP : location.hostname;
var port = location.port ? ':' + location.port : '';
var url = protocol + hostname + port + location.pathname.replace(/\/index\.html$/, '/').replace(/\/$/, '/dist/native/index.js')

十、修改package.json文件

修改"dev"配置前

 "scripts": {
        "build": "webpack",
        "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
        "dev": "weex-builder src dist -w",
        "serve": "webpack-dev-server --config webpack.dev.js -p --open"
    }

修改"dev"配置后

"scripts": {
    "build": "webpack",
    "build_plugin": "webpack --config ./tools/webpack.config.plugin.js --color",
    "dev": "webpack --watch & serve -p 12590",
    "serve": "webpack-dev-server --config webpack.dev.js -p --open"
  }

十一、修改webpack.config.js文件
將webConfig打包到dist/web文件夾下

 output: {
    path: pathTo.join(__dirname, 'dist', 'web'),
    filename: '[name].web.js',
  }

將weexConfig打包到dist/native文件夾下

 output: {
    path: pathTo.join(__dirname, 'dist', 'native'),
    filename: '[name].js',
  }

十二、運行打包測試

cnpm run dev

打開瀏覽器 http://xxx.xxx.xxx.xxx:12590


appstore下載 weex playground 點擊左上角掃碼功能，掃網(wǎng)站上的二維碼


現(xiàn)在可以開始coding調(diào)試啦

項目工程鏈接:https://git.oschina.net/lyjappleclub/myweex.git

進入工程目錄下載第三方依賴

cnpm install

開啟調(diào)試

cnpm run dev
最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容