Osheep

时光不回头,当下最重要。

weex 开发环境搭建, iOS, 安卓

最近在学习weex,开发环境遇到的一些问题, 写一些代码希望能帮助刚想我这样没有接触过js前段开发的同学,会iOS,或者安卓的同学可以通过此文章来稍微理解一点weex环境搭建,我这里所说的环境搭建是本地的js部署, 还没有研究过服务器的环境搭建,好了开始了:

首先需要node.js环境安装, 在官网有参考,可以去weex官网参考,node.js环境的搭建,搭建完环境后,开始的是移动端,weex环境部署,应为我是从事iOS开发,环境搭建也是基于iOS,安卓可以作为参考,只要在你的安卓工程中改变端口号,和js入口就可以运行安卓工程,下面将一步步来,说明下我的思路,你需要的环境是node.js,weex.tookit(安装了Node.js那么npm好像就安装了, 此处省略, 如果说错了,可以自行百度)

首先我们在你的桌面新建一个目录,名字随便,让后再终端cd到当前的目录下面, 执行命令

weex intit  终端会让你确认是否生成weex文件, 回车即可

此时在你的终端就会生成一些weex项目的配置文件目录截图如下

《weex 开发环境搭建, iOS, 安卓》

weex会帮我们建好的工程,在下面的操作之前把weex  git上面的项目下载一下作为参考,然后删除src,app,js wepack.config.js, weex.html都删除掉,至于为什么我也不知道,我是这么做的,删除这些文件后,再把build文件夹下面的init.js文件也删除掉,开始下一步的操作

这是我的工程中新建的一些文件的截图

《weex 开发环境搭建, iOS, 安卓》

《weex 开发环境搭建, iOS, 安卓》

首先我在工程刚删除init.js的文件路径下面新建了一个webpack.mydemo.config.js文件,在外面有个mydemo的文件夹,此处可以理解为你的原生代码编写出, startmy是一个命令行工具,具体什么我不太清楚,知识面太窄多多包涵,

webpack.mydemo.config.js里面的代码你可以参考官网的例子里面有个webpack.expamle.config.js的文件把这个里面的路径example的路径改为我的mydemo的路径,我是这么干的,然后保存了放在了这里,就这么简单

my_index.html是我根据官网的demo里的index.html里面的例子把里面的example改成了mydemo的路径然后生成的一个新的文件my_index.html就这么简单,startmy里面的截图如下、

《weex 开发环境搭建, iOS, 安卓》

node_modules是在终端npm insatll 的来的一些依赖环境,这里不多说

最后是package.json里面的一些配置我截图如下, 你对照官网的package.json的例子一看你有哪里不同就知道了

《weex 开发环境搭建, iOS, 安卓》

着这里说明一下,我只改了“scripts里面的一些配置”,及时我新建的那么文件的配置,至于为什么我也不知道,我知道这样行!注意对照官网,或者weex.init 创建的项目自己领会!

到这里我的环境已经搭建好了

然后终端cd到项目中执行   ./startmy    命令行工具服务器就会跑起来,在mydemo里面会生成build文件夹,里面会生成对应的你写的.we   .vue文件生成的js文件这些js文件可以直接被weexSDK生成原声的iOS,或者安卓的原声代码应用在你的程序当中

下面说下weex代码继承到你的项目中的一些事宜, 我也是用的别人的项目几成下面是项目连接

下载此项目

下载项目后到ios目录下面有个bxproject文件夹,有对应的ios工程也有安卓的工程,可以把这俩个文件夹拷贝到你的文件纹木下面或者你自己按照它的样子自己新建工程也行,可以参考官网weex怎么在iOS或者安卓中继承weexSDK,  

下面讲解的是在iOS中的一些操作,安卓可以作为参考,大体上差不多,ios和安卓目录工程复制到你的工程目录下面后,打开iOS工程如下截图

《weex 开发环境搭建, iOS, 安卓》

有个define.h文件里面宏定义了一些链接,看到没有diacover.js这是我自己命名的工程里面的.js入口,从服务器加载的,如果是本地加载的js从下面那个宏定义加载,修改一下就可以了,这里的端口号就是上面说到的package.json里面的serve里面的定义的那个端口号,改成你自己定义的端口号和mydemo 生成的build文件夹下面的js文件的入口,在模拟器上直接运行就可以,在手机端你的用你的电脑发射无线网,保证你的手机和你的电脑同一个Ip地址才行

到这里基本就差不多了,运行此工程你就能在你的工程里面看到你写的.we或者.vue的界面了

如果有不懂的地方可以联系我的QQ914293866,欢迎和我交流,有什么不对的地方希望指正,毕竟我也是刚学的,谢谢!下面是我git上的项目连接

weexdemo项目

点赞