iOS WeexSDK 如何将 Vue 文件绘制成原生UI

废话开篇：现在的跨平台开发尤其是以 vue 语法为主的 uniapp 框架，可以实现 vue 语法直接转换为原生 UI 组件的功能（.nvue 文件），可以理解成 .nvue 文件下的标签与 weex 库的原生注册的 UI 有对应的映射关系，或者说在 weex 库的基础上更丰富了原生 UI 库。下面就简单描述一下，vue 文件如何转化的原生 UI 组件。

一、实现效果

实现目标就是将一个简单的 vue 文件转换到 iOS 模拟器并以原生 UI 进行绘制。

1、单 vue 页面布局文件

<template><div class="weex"><div class="textDiv"><text class="text">{{ content }}</text></div></div>
</template>

<script>
export default {name: 'HelloWorld',data () {return {content: 'my name is weex iOS'}}
}
</script>

<style>
	.weex{
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.textDiv{
		padding-left: 10px;
		padding-top: 10px;
		padding-right: 10px;
		padding-bottom: 10px;
	}
	.text{
		color: black;
		text-align:center;
		font-size:32px;
		background-color: aquamarine;
	}
</style> 

上面是一段再简单不过的 vue 页面布局，它不依赖于任何工程，仅仅为单纯的 UI 页面

2、iOS 模拟器运行效果

看一下 UI 布局

二、创建一个 vue 编译目录

1、说明

vue 编译目录其实就是一个能将 vue 文件转换为最终 weex 能识别的 js 文件的一个目录结构

其中，vue 文件夹里面就是要转换的一个 vue 页面文件，dist 文件里面就是转换完后的输出 js 文件

dist 文件里面的 helloworld.js 就是通过 weex-loader 工具 转换 vue 文件后得到的 js 文件。这个 js 文件记录了 vue 页面的全部内容，并且能够被 weex iOSSDK 识别，最终会通过映射创建 iOS 原生UI组件进行绘制。

2、终端命令

2-1： 新建 iOSWeex 文件夹，在当前目录下进行初始化操作

npm init 创建编译目录

npm init 

没有特别要求一路点击回车即可，最后会创建一个 package.json 文件，打开并修改这个package.json 文件如下所示：

{"name": "iosweex","version": "1.0.0","description": "","main": "index.js","dependencies": {"babel-loader": "^8.0.6","weex-loader": "^0.7.12","webpack": "^2.2.1"},"scripts": {"build": "webpack","test": "echo \"Error: no test specified\" && exit 1"},"author": "","license": "ISC","devDependencies": {"webpack-cli": "^5.0.1"}
} 

这里主要是需要 weex-loader 依赖库，并且添加了脚本 build 命令，其实就是转换 vue 文件并输出 js 文件的操作。

2-2： npm install 加载依赖库

npm install 

运行之后会多出一个 node_modules 文件。

2-3： 创建 webpack.config.js 脚本

输入 touch webpack.config.js 创建该文件

touch webpack.config.js 

修改其内容为如下：

const webpack = require('webpack');
const path = require('path');

module.exports = {entry: './vue/HelloWorld.vue?entry=true',output: {path: path.resolve(__dirname, './dist'),filename: 'helloworld.js'},module: {
	rules: [
	{
	test: /\.vue(\?[^?]+)?$/,
	loaders: ['weex-loader']
	},
	{
	test: /\.js$/,
	loaders: ['babel-loader']
	}
	]
	},
	plugins: [
		new webpack.BannerPlugin({
			raw: true ,
			banner: '// { "framework": "Vue" }\n'
		})
	]
} 

这是需要设置待转换的 vue 文件路径和转化后的 js 文件输出路径，/vue/HelloWorld.vue?entry=true 后面需要紧跟 ?entry=true 否则，转换后无法正常显示。

entry: './vue/HelloWorld.vue?entry=true',output: {path: path.resolve(__dirname, './dist'),filename: 'helloworld.js'} 

2-4： 创建 vue 文件，里面需包含 vue 页面文件

2-5： 转换 vue 文件到输出目录

执行 npm run build 命令，开始转换 vue 页面文件

npm run build 

如果出现 This is probably not a problem with npm. There is likely additional logging output above 错误，可能是一些依赖库没有加载而打包的时候却要用，把缺少的依赖库加上，需清除一下缓存，再次进行依赖安装即可。

删除 node_modules 文件夹，删除 package-lock.json 文件并执行以下命令

npm cache clean --force
npm install 

dist 目录下的 helloworld.js 为最终需求文件

helloworld.js 就是 weex iOSSDK 能识别的文件了。

三、iOS 工程引入 weex SDK

1、cocopods 添加依赖

2、初始化 WeexSDK

在 AppDelegate 里进行一些初始化操作

[WXAppConfiguration setAppGroup:@"WSL"];
[WXAppConfiguration setAppName:@"Weex"];
[WXAppConfiguration setAppVersion:@"v1.0.0"];
//Initialize WeexSDK
[WXSDKEngine initSDKEnvironment]; 

3、WXBaseViewController 加载 helloworld.js 文件

WXBaseViewController 是 WeexSDK里的一个默认加载 js 文件的控制器，这里可以直接用它来进行展示。

NSURL *pathUrl = [[NSBundle mainBundle] URLForResource:@"helloworld" withExtension:@"js"];
WeexViewController * weexViewController = [[WeexViewController alloc] initWithSourceURL:pathUrl];
self.window.rootViewController = weexViewController;
[self.window makeKeyAndVisible]; 

4、js 重要信息展示

vue 转换后的样式结构

module.exports = {
  "weex": {
    "flexDirection": "column",
    "justifyContent": "center",
    "alignItems": "center"
  },
  "textDiv": {
    "paddingLeft": "10",
    "paddingTop": "10",
    "paddingRight": "10",
    "paddingBottom": "10"
  },
  "text": {
    "color": "#000000",
    "textAlign": "center",
    "fontSize": "32",
    "backgroundColor": "#7FFFD4"
  }
} 

vue 转换后的标签结构，一个渲染函数。

module.exports={render:function (){var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;
  return _c('div', {
    staticClass: ["weex"]
  }, [_c('div', {
    staticClass: ["textDiv"]
  }, [_c('text', {
    staticClass: ["text"]
  }, [_vm._v(_vm._s(_vm.content))])])])
},staticRenderFns: []} 

四、总结与思考

通过 WeexSDK 就将 vue 文件转换为 js 文件，并提供给 iOS 原生端使用了。除此之外，WeexSDK 还搭建了 js 与原生之前的通信能力，是不是非常类似 uniapp 的相关功能实现。没有特别复杂的代码，代码拙劣，大神勿笑[抱拳][抱拳][抱拳]

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享