Weex 入門新手安裝問題 -IOS
之前在網(wǎng)上找了很多很多文檔，包括官方的文檔都寫的不是很詳細 而且隨著版本更迭 之前寫的文章很多都不能用 這個蠻多坑的 尤其是官方文檔 新手入門級的文檔 都沒怎么更新過問題還說蠻多的 下面的都是我踩坑過來的 希望給新手一個入門級的借鑒 這里暫時只針對IOS的問題 Android的方式我還沒去弄過 之后弄了再更新在下面。。排版比較一般。多擔待
第一步新建一個工程 WeexExample
第二步 Pod init
創(chuàng)建一個podfile 文件 或者可以通過直接在根目錄下 vim Podfile 都是可以的 建議選擇 pod init 方便很多
復制源碼
這是舊版的weex源碼 https://github.com/alibaba/weex
現(xiàn)在都歸到apache 下面去了 好像是合作？不是很清楚
這是新版的git 地址 https://github.com/apache/incubator-weex
可以直接git clone https://github.com/apache/incubator-weex.git 下源碼
如果沒有g(shù)it 去安裝git吧～～ 不多說
將下載下來的源碼ios/sdk 復制到 根目錄下即可
編輯Podfile 如下
pod 里面 加上
pod 'WeexSDK', :path=>'./'
./ 代表當前目錄 即和podfile 同一個目錄 這里需要說明的是 path=>'./' 這個不是孤獨的是根據(jù)你項目podfile和sdk的同級來區(qū)分的 比如 我放到現(xiàn)在的根目錄上一級 就變成了 path=>'../'
這里需要說明下的是這里有三種方式安裝weexSdk 因為本人比較喜歡看源碼來學習 所以采用的第三種方式
第一種方式 直接Pod
pod 'WeexSDK'
這種方式比較簡單 但是唯一的問題是 里面的源碼不好跟蹤
在這里不得不吐槽下Weex官方文檔很多都沒有說明，因為我想通過源碼去學習下它們的框架，不想直接通過的第一種方式去學習 因為我要看到里面的源碼
官方文檔時說
copy sdk 源碼 然后通過
pod 'WeexSDK', :path=>'../../'
pod install
會導致失敗 No podspec found for WeexSDK in ./sdk/
第二種方式 使用 framework
點開sdk 里面的工程 然后編譯一下 拿到products里面的 WeexSDK.framework即可 直接復制到項目中去 就可以使用這種方式和第一種比較起來都比較簡單 但是缺點在于不能看到源碼
第三種方式 創(chuàng)建podspec 文件 本地私有庫
命令如下
pod spec create WeexSDK
1 關(guān)于如何 創(chuàng)建 podspec 可以看看這篇文章 建議新手安裝文章 跟著來一遍 熟悉下 .podspec里面的各種配置 方便理解
http://www.cocoachina.com/ios/20150228/11206.html
2 刪除掉 podspec 不必要的文件 如下所示
第三種方式 復制SDK源碼
1 第一步 將SDK源碼 這個可以通過之前下載的官方代碼里面 有個 ios文件夾 直接講sdk復制到 根目錄下
2 第二步 將官方代碼里面 pre-build/native-bundle-main.js 復制到 我們根目錄下的sdk/WeexSDK/Resources 這個為啥要這么做呢 是因為之前出過一個問題 可以搜索 native-bundle-main.js下 之前出過一個問題 提示我找不到這個文件 這里不提 這是我的處理方式，之前我出現(xiàn)過
WXMonitor.m:211, framework loading is failure! ?[;
這里有兩種辦法如果出現(xiàn)了
第一種 pod update 然后在pod install
第二種 這種不推薦 應該是本地的pod庫沒有更新造成的 推薦第一種
第三種方式 修改podspec 文件 這里只留下關(guān)鍵性代碼
但是上面的步驟還不能直接pod 修改文件
Pod::Spec.new do |s|
s.name = "WeexSDK"
s.version = "0.0.1"
s.summary = "A short description of WeexSDK."
s.description = <<-DESC
A framework for building Mobile cross-platform UI
DESC
s.homepage = "http://"
s.license = {
:type => 'Copyright',
:text => <<-LICENSE
WeiHu-INC copyright
LICENSE
}
s.platform = :ios
s.ios.deployment_target = '8.0'
s.source = { :path => '.' }
s.author = { "WeiHu" => "7430328@qq.com" }
s.source = { :path => '.' }
s.source_files = 'sdk/WeexSDK/Sources/**/*.{h,m,mm,c}'
s.resources = 'sdk/WeexSDK/Resources/native-bundle-main.js', 'sdk/WeexSDK/Resources/wx_load_error@3x.png'
s.user_target_xcconfig = { 'FRAMEWORK_SEARCH_PATHS' => "'$(PODS_ROOT)/WeexSDK'" }
s.requires_arc = true
s.prefix_header_file = 'sdk/WeexSDK/Sources/Supporting Files/WeexSDK-Prefix.pch'
s.xcconfig = { "OTHER_LINK_FLAG" => '$(inherited) -ObjC'}
s.frameworks = 'CoreMedia','MediaPlayer','AVFoundation','AVKit','JavaScriptCore', 'GLKit'
s.dependency 'SocketRocket'
s.libraries = "stdc++"
end
圖片如下
這里吸引注意的是兩個點 s.source_files和s.resources 代表的是pod 里面源文件 對應pod里面的
s.source_files = 'sdk/WeexSDK/Sources/**/*.{h,m,mm,c}'
s.resources = 'sdk/WeexSDK/Resources/native-bundle-main.js', 'sdk/WeexSDK/Resources/wx_load_error@3x.png'
s.user_target_xcconfig = { 'FRAMEWORK_SEARCH_PATHS' => "'$(PODS_ROOT)/WeexSDK'" }
s.requires_arc = true
s.prefix_header_file = 'sdk/WeexSDK/Sources/Supporting Files/WeexSDK-Prefix.pch'
那么sdk這個從那里來呢 其實就是從你pod文件里面的 path：'./'路徑而來 這個應該都能理解吧？
sdk/WeexSDK/Resources/native-bundle-main.js 是和你之前的pod文件 對應的
都準備好了 Ready Go Go Go~!
pod install
appDelegate 注冊
初始化 WeexSDK
[WXSDKEngine initSDKEnvironment];
打印日志
[WXLog setLogLevel:WXLogLevelLog];
創(chuàng)建一個Hello.js 文件
復制如下代碼 當然 你可以通過compile 編譯 但是為了方便可以復制下面的代碼
在weex 目錄下
npm run build
這里需要說明的一點是 package.json 有對應的配置文件可以找到
其實就是運行的
npm webpack
關(guān)于webpack 看這篇文章 http://www.itdecent.cn/p/42e11515c10f
Webpack的工作方式是：把你的項目當做一個整體，通過一個給定的主文件（如：index.js），Webpack將從這個文件開始找到你的項目的所有依賴文件，使用loaders處理它們，最后打包為一個瀏覽器可識別的JavaScript文件。
// { "framework": "Vue" }
/******/ (function(modules) { // webpackBootstrap
/******/ // The module cache
/******/ var installedModules = {};
/******/ // The require function
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports;
/******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = {
/******/ exports: {},
/******/ id: moduleId,
/******/ loaded: false
/******/ };
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/ // Flag the module as loaded
/******/ module.loaded = true;
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
/******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules;
/******/ // expose the module cache
/******/ __webpack_require__.c = installedModules;
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/ // Load entry module and return exports
/******/ return __webpack_require__(0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
var __vue_exports__, __vue_options__
var __vue_styles__ = []
/* styles */
__vue_styles__.push(__webpack_require__(1)
)
/* script */
__vue_exports__ = __webpack_require__(2)
/* template */
var __vue_template__ = __webpack_require__(3)
__vue_options__ = __vue_exports__ = __vue_exports__ || {}
if (
typeof __vue_exports__.default === "object" ||
typeof __vue_exports__.default === "function"
) {
if (Object.keys(__vue_exports__).some(function (key) { return key !== "default" && key !== "__esModule" })) {console.error("named exports are not supported in *.vue files.")}
__vue_options__ = __vue_exports__ = __vue_exports__.default
}
if (typeof __vue_options__ === "function") {
__vue_options__ = __vue_options__.options
}
__vue_options__.__file = "/Users/weihu/Documents/WeexDemo/weex/src/foo.vue"
__vue_options__.render = __vue_template__.render
__vue_options__.staticRenderFns = __vue_template__.staticRenderFns
__vue_options__._scopeId = "data-v-6ad6ee12"
__vue_options__.style = __vue_options__.style || {}
__vue_styles__.forEach(function (module) {
for (var name in module) {
__vue_options__.style[name] = module[name]
}
})
if (typeof __register_static_styles__ === "function") {
__register_static_styles__(__vue_options__._scopeId, __vue_styles__)
}
module.exports = __vue_exports__
module.exports.el = 'true'
new Vue(module.exports)
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = {
"wrapper": {
"alignItems": "center",
"marginTop": 120
},
"title": {
"fontSize": 48
},
"logo": {
"width": 360,
"height": 82
}
}
/***/ }),
/* 2 */
/***/ (function(module, exports) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
data: {
logoUrl: 'https://alibaba.github.io/weex/img/weex_logo_blue@3x.png',
target: 'World'
},
methods: {
update: function update(e) {
this.target = 'Weex';
console.log('target:', this.target);
}
}
};
module.exports = exports['default'];
/***/ }),
/* 3 */
/***/ (function(module, exports) {
module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
return _c('div', {
staticClass: ["wrapper"],
on: {
"click": _vm.update
}
}, [_c('image', {
staticClass: ["logo"],
attrs: {
"src": _vm.logoUrl
}
}), _c('text', {
staticClass: ["title"]
}, [_vm._v("Hello " + _vm._s(_vm.target))])])
},staticRenderFns: []}
module.exports.render._withStripped = true
/***/ })
/******/ ]);
viewController 加載本地代碼
這里將demo放到git上 可以去看看我弄的
https://github.com/evernoteHW/WeexSourceCode
然后通過這種方式 我們就可以跟weex的源代碼咯～～
或者 viewController 加載網(wǎng)頁代碼
在sdk同級的目錄下創(chuàng)建一個 weex文件夾
先執(zhí)行
mkdir weex
cd weex
weex init
依次執(zhí)行
Generate project in current directory?(Y/n): (WeexSourceCode)
打個y字母即可
會自動創(chuàng)建一系列的文件 如下圖 會提示你 目錄機構(gòu)如下
說明下
app.js----程序入口
assets-----工具類文件
build----這個是ip地址寫入的
index.html---
src---
webpack.config
weex.html
然后
npm install
weex三板斧
npm run dev
npm run build
npm run serve
同時啟動的命令是
npm run build & npm run serve
但是這個辦法會比較麻煩
通俗推薦的做法是 設置腳本 自動啟動
那么該如何設置呢 新增一個文件 通過
vim start
內(nèi)容如下
#!/bin/bash
# called by native
THIS_DIR=$(dirname "$0")
pushd "$THIS_DIR"
npm run build&
#npm run build:browser
npm run serve
#npm run dev:examples
popd
中間可能有些端口被占用的問題 這個可以自行g(shù)oogle 不行的話可以重啟
說明下 npm run build--其實是通過package.json 里面的 執(zhí)行 webpack
npm run build == webpack
npm run dev == webpack --watch
等 其它類似
那么webpack 其實會自動找尋 webpack.config.js文件
output是將vue文件編譯成 js文件 會創(chuàng)建 dist文件夾 然后 會創(chuàng)建
'[name].weex.js'變成js文件就是 app.weex.js 這也是為啥 之前看到的文章有的是weex.js 配置就在這個地方
主要說明兩點的是 entry 這個是程序入口 上面提到過
entry: {
app: path.resolve('./app.js')
},
output: {
path: 'dist',
},
。。。
var webConfig = getBaseConfig()
webConfig.output.filename = '[name].web.js'
webConfig.module.loaders[1].loaders.push('vue')
var weexConfig = getBaseConfig()
weexConfig.output.filename = '[name].weex.js'
weexConfig.module.loaders[1].loaders.push('weex')
如何啟動呢 可以手動通過命令 ./start啟動 或者
在工程里面的 配置
將腳本語言加入到 start里面去
DEST=$CONFIGURATION_BUILD_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH
if [[ "$CONFIGURATION" = "Debug" && "$PLATFORM_NAME" != "iphonesimulator" ]]; then
ipconfig getifaddr en0 | awk '{printf("%s",$0)}' > "$DEST/localServer-ip.txt"
fi
set -x
if nc -w 5 -z localhost 12580 ; then
echo "Port 12580 already in use, server is running"
else
open -a Terminal "$SRCROOT/weex/start"
fi
將項目里面的 BUNDLE_URL 改成網(wǎng)絡獲取即可
NSString *BUNDLE_URL = @"http://192.168.1.122:8080/dist/app.weex.js";
應該OK了
不出意外的話 可以看到如下界面 圖片不展示的原因是需要擴展插件 下一步繼續(xù)擴展插件圖片
修改網(wǎng)頁代碼 實時刷新
app端 好像暫時不支持網(wǎng)頁刷新 每次都有build 然后serve 這個比較麻煩
總結(jié)
我上面所述都只是一小部分 配置起來很多尤其是對于我作為IOS開發(fā) 沒有前端開發(fā)經(jīng)驗的我來說還說很多要學習 webpack,babel,npm,weex,等就可以繞暈不少人 希望給后面想學習的人燒踩坑 碼字不易 輕拍
