Weex 入門新手安裝問題 -IOS
之前在網(wǎng)上找了很多很多文檔，包括官方的文檔都寫的不是很詳細(xì) 而且隨著版本更迭 之前寫的文章很多都不能用 這個(gè)蠻多坑的 尤其是官方文檔 新手入門級(jí)的文檔 都沒怎么更新過問題還說蠻多的 下面的都是我踩坑過來的 希望給新手一個(gè)入門級(jí)的借鑒 這里暫時(shí)只針對(duì)IOS的問題 Android的方式我還沒去弄過 之后弄了再更新在下面砚嘴。。排版比較一般。多擔(dān)待
第一步新建一個(gè)工程 WeexExample
第二步 Pod init
創(chuàng)建一個(gè)podfile 文件 或者可以通過直接在根目錄下 vim Podfile 都是可以的 建議選擇 pod init 方便很多
復(fù)制源碼
這是舊版的weex源碼 https://github.com/alibaba/weex
現(xiàn)在都?xì)w到apache 下面去了 好像是合作私痹？不是很清楚
這是新版的git 地址 https://github.com/apache/incubator-weex
可以直接git clone https://github.com/apache/incubator-weex.git 下源碼
如果沒有g(shù)it 去安裝git吧～～ 不多說
將下載下來的源碼ios/sdk 復(fù)制到 根目錄下即可
編輯Podfile 如下
pod 里面 加上
pod 'WeexSDK', :path=>'./'
./ 代表當(dāng)前目錄 即和podfile 同一個(gè)目錄 這里需要說明的是 path=>'./' 這個(gè)不是孤獨(dú)的是根據(jù)你項(xiàng)目podfile和sdk的同級(jí)來區(qū)分的 比如 我放到現(xiàn)在的根目錄上一級(jí) 就變成了 path=>'../'
這里需要說明下的是這里有三種方式安裝weexSdk 因?yàn)楸救吮容^喜歡看源碼來學(xué)習(xí) 所以采用的第三種方式
第一種方式 直接Pod
pod 'WeexSDK'
這種方式比較簡(jiǎn)單 但是唯一的問題是 里面的源碼不好跟蹤
在這里不得不吐槽下Weex官方文檔很多都沒有說明捎迫，因?yàn)槲蚁胪ㄟ^源碼去學(xué)習(xí)下它們的框架，不想直接通過的第一種方式去學(xué)習(xí) 因?yàn)槲乙吹嚼锩娴脑创a
官方文檔時(shí)說
copy sdk 源碼 然后通過
pod 'WeexSDK', :path=>'../../'
pod install
會(huì)導(dǎo)致失敗 No podspec found for WeexSDK in ./sdk/
第二種方式 使用 framework
點(diǎn)開sdk 里面的工程 然后編譯一下 拿到products里面的 WeexSDK.framework即可 直接復(fù)制到項(xiàng)目中去 就可以使用這種方式和第一種比較起來都比較簡(jiǎn)單 但是缺點(diǎn)在于不能看到源碼
第三種方式 創(chuàng)建podspec 文件 本地私有庫(kù)
命令如下
pod spec create WeexSDK
1 關(guān)于如何 創(chuàng)建 podspec 可以看看這篇文章 建議新手安裝文章 跟著來一遍 熟悉下 .podspec里面的各種配置 方便理解
http://www.cocoachina.com/ios/20150228/11206.html
2 刪除掉 podspec 不必要的文件 如下所示
第三種方式 復(fù)制SDK源碼
1 第一步 將SDK源碼 這個(gè)可以通過之前下載的官方代碼里面 有個(gè) ios文件夾 直接講sdk復(fù)制到 根目錄下
2 第二步 將官方代碼里面 pre-build/native-bundle-main.js 復(fù)制到 我們根目錄下的sdk/WeexSDK/Resources 這個(gè)為啥要這么做呢 是因?yàn)橹俺鲞^一個(gè)問題 可以搜索 native-bundle-main.js下 之前出過一個(gè)問題 提示我找不到這個(gè)文件 這里不提 這是我的處理方式澳叉，之前我出現(xiàn)過
WXMonitor.m:211, framework loading is failure! ?[;
這里有兩種辦法如果出現(xiàn)了
第一種 pod update 然后在pod install
第二種 這種不推薦 應(yīng)該是本地的pod庫(kù)沒有更新造成的 推薦第一種
第三種方式 修改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
圖片如下
這里吸引注意的是兩個(gè)點(diǎn) s.source_files和s.resources 代表的是pod 里面源文件 對(duì)應(yīng)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這個(gè)從那里來呢 其實(shí)就是從你pod文件里面的 path：'./'路徑而來 這個(gè)應(yīng)該都能理解吧隙咸？
sdk/WeexSDK/Resources/native-bundle-main.js 是和你之前的pod文件 對(duì)應(yīng)的
都準(zhǔn)備好了 Ready Go Go Go~!
pod install
appDelegate 注冊(cè)
初始化 WeexSDK
[WXSDKEngine initSDKEnvironment];
打印日志
[WXLog setLogLevel:WXLogLevelLog];
創(chuàng)建一個(gè)Hello.js 文件
復(fù)制如下代碼 當(dāng)然 你可以通過compile 編譯 但是為了方便可以復(fù)制下面的代碼
在weex 目錄下
npm run build
這里需要說明的一點(diǎn)是 package.json 有對(duì)應(yīng)的配置文件可以找到
其實(shí)就是運(yùn)行的
npm webpack
關(guān)于webpack 看這篇文章 http://www.reibang.com/p/42e11515c10f
Webpack的工作方式是：把你的項(xiàng)目當(dāng)做一個(gè)整體，通過一個(gè)給定的主文件（如：index.js）成洗，Webpack將從這個(gè)文件開始找到你的項(xiàng)目的所有依賴文件五督，使用loaders處理它們，最后打包為一個(gè)瀏覽器可識(shí)別的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)頁(yè)代碼
在sdk同級(jí)的目錄下創(chuàng)建一個(gè) weex文件夾
先執(zhí)行
mkdir weex
cd weex
weex init
依次執(zhí)行
Generate project in current directory?(Y/n): (WeexSourceCode)
打個(gè)y字母即可
會(huì)自動(dòng)創(chuàng)建一系列的文件 如下圖 會(huì)提示你 目錄機(jī)構(gòu)如下
說明下
app.js----程序入口
assets-----工具類文件
build----這個(gè)是ip地址寫入的
index.html---
src---
webpack.config
weex.html
然后
npm install
weex三板斧
npm run dev
npm run build
npm run serve
同時(shí)啟動(dòng)的命令是
npm run build & npm run serve
但是這個(gè)辦法會(huì)比較麻煩
通俗推薦的做法是 設(shè)置腳本 自動(dòng)啟動(dòng)
那么該如何設(shè)置呢 新增一個(gè)文件 通過
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è)可以自行g(shù)oogle 不行的話可以重啟
說明下 npm run build--其實(shí)是通過package.json 里面的 執(zhí)行 webpack
npm run build == webpack
npm run dev == webpack --watch
等 其它類似
那么webpack 其實(shí)會(huì)自動(dòng)找尋 webpack.config.js文件
output是將vue文件編譯成 js文件 會(huì)創(chuàng)建 dist文件夾 然后 會(huì)創(chuàng)建
'[name].weex.js'變成js文件就是 app.weex.js 這也是為啥 之前看到的文章有的是weex.js 配置就在這個(gè)地方
主要說明兩點(diǎn)的是 entry 這個(gè)是程序入口 上面提到過
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')
如何啟動(dòng)呢 可以手動(dòng)通過命令 ./start啟動(dòng) 或者
在工程里面的 配置
將腳本語(yǔ)言加入到 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
將項(xiàng)目里面的 BUNDLE_URL 改成網(wǎng)絡(luò)獲取即可
NSString *BUNDLE_URL = @"http://192.168.1.122:8080/dist/app.weex.js";
應(yīng)該OK了
不出意外的話 可以看到如下界面 圖片不展示的原因是需要擴(kuò)展插件 下一步繼續(xù)擴(kuò)展插件圖片
修改網(wǎng)頁(yè)代碼 實(shí)時(shí)刷新
app端 好像暫時(shí)不支持網(wǎng)頁(yè)刷新 每次都有build 然后serve 這個(gè)比較麻煩
總結(jié)
我上面所述都只是一小部分 配置起來很多尤其是對(duì)于我作為IOS開發(fā) 沒有前端開發(fā)經(jīng)驗(yàn)的我來說還說很多要學(xué)習(xí) webpack,babel,npm,weex,等就可以繞暈不少人 希望給后面想學(xué)習(xí)的人燒踩坑 碼字不易 輕拍
