转项目管理也有大半年了，最近自己玩了一下weex，下面开始入坑：
网上有大把的资料，是关于weex集成的，又因为阿里对这块支持不是太友好（简直就是坑），所以自己找了蛮久，这篇文章写的还是蛮好的：https://www.cnblogs.com/winsoncheung/p/6547923.html，大家自己去看，这里不再说了。
由于上面的文章只是简单介绍weex的集成，但我想做到的是应用到实际的开发场景，那就需要自己实现vue部分，下面开始了：
新建一份.vue的文件，文件内容就是需要渲染的东西，也是weex的关键所在，其中代码有：
// { "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] = {
/******/ i: moduleId,
/******/ l: false,
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded
/******/ module.l = 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;
/******/
/******/ // define getter function for harmony exports
/******/ __webpack_require__.d = function(exports, name, getter) {
/******/ if(!__webpack_require__.o(exports, name)) {
/******/ Object.defineProperty(exports, name, {
/******/ configurable: false,
/******/ enumerable: true,
/******/ get: getter
/******/ });
/******/ }
/******/ };
/******/
/******/ // getDefaultExport function for compatibility with non-harmony modules
/******/ __webpack_require__.n = function(module) {
/******/ var getter = module && module.__esModule ?
/******/ function getDefault() { return module['default']; } :
/******/ function getModuleExports() { return module; };
/******/ __webpack_require__.d(getter, 'a', getter);
/******/ return getter;
/******/ };
/******/
/******/ // Object.prototype.hasOwnProperty.call
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
/******/
/******/ // __webpack_public_path__
/******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports
/******/ return __webpack_require__(__webpack_require__.s = 0);
/******/ })
/************************************************************************/
/******/ ([
/* 0 */
/***/ (function(module, exports, __webpack_require__) {
var __weex_template__ = __webpack_require__(1)
var __weex_style__ = __webpack_require__(2)
__weex_define__('@weex-component/6761b76edebbd1f5abd8db25ae605b6d', [], function(__weex_require__, __weex_exports__, __weex_module__) {
__weex_module__.exports.template = __weex_template__
__weex_module__.exports.style = __weex_style__
})
__weex_bootstrap__('@weex-component/6761b76edebbd1f5abd8db25ae605b6d',undefined,undefined)
/***/ }),
/* 1 */
/***/ (function(module, exports) {
module.exports = {
"type": "div",
"classList": [
"wrapper"
],
"children": [
{
"type": "div",
"classList": [
"graph"
],
"children": [
{
"type": "div",
"classList": [
"circle",
"red"
]
},
{
"type": "div",
"classList": [
"circle",
"green"
]
},
{
"type": "div",
"classList": [
"circle",
"blue"
]
}
]
}
]
}
/***/ }),
/* 2 */
/***/ (function(module, exports) {
module.exports = {
"wrapper": {
"justifyContent": "center",
"alignItems": "center"
},
"graph": {
"position": "relative",
"width": "700px",
"height": "700px"
},
"circle": {
"position": "absolute",
"width": "500px",
"height": "500px",
"borderWidth": "4px",
"borderStyle": "solid",
"borderRadius": "250px"
},
"red": {
"top": 0,
"left": "100px",
"backgroundColor": "rgba(255,88,88,0.5)",
"borderColor": "rgba(255,88,88,0.7)"
},
"green": {
"left": 0,
"bottom": 0,
"backgroundColor": "rgba(106,230,106,0.5)",
"borderColor": "rgba(59,195,59,0.7)"
},
"blue": {
"right": 0,
"bottom": 0,
"backgroundColor": "rgba(53,143,255,0.5)",
"borderColor": "rgba(53,143,255,0.7)"
}
}
/***/ })
/******/ ]);
之后，我们需要把vue文件转化成js文件供weex去解析，渲染，因为官方文档不会及时更新，使用weex xx.we -o xx.js 并不生效，其中还包括init命令，具体操作为：
we/vue 转换成 js文件的终端命令
weex compile we js //会将we文件夹下的所有we文件转换到js文件夹下
weex compile dir/xxx.we js //会将dir文件夹下的xxx.we文件转换为js文件存到js文件夹下
weex compile dir/xxx.vue js //会将dir文件夹下的xxx.vue文件转换为js文件存到js文件夹下
下面开始测试：
提供两个场景：
1.本地js文件
关键代码为：
NSString*path=[NSStringstringWithFormat:@"file://%@/js/%@",[NSBundlemainBundle].bundlePath,xx.js];
jsUrl=[NSURLURLWithString:path];
[_instance renderWithURL: jsUrl];
2.远程js文件
NSString *path=@"http://192.168.232.13:8080/examples/js/xx.js";
jsUrl=[NSURLURLWithString:path];
[_instance renderWithURL: jsUrl];
工程跑起来，大功告成！！！