本人在大学毕业之后就开始在公司使用weex开发APP,最开始是有点抵触的,因为我是想做Android或者java的,而是用weex开发APP的话大部分在使用vue的语法进行开发,自己不是很喜欢。
项目启动之初我们公司邀请了weex方面的专家来给我们培训weex相关技术,我们大概跟着边学边做了一个多星期就基本能自己开发weex的界面了,不过后面遇到一些问题(主要是涉及的原生功能或者原生扩展的)还需要大神帮忙解决。当时虽然我是有Android原生开发的基础的,但是毕竟经验不足,当时是请的专业的Android和iOS的原生开发人员为我们提供原生方面的支持。
我们之前使用weex开发的项目都是使用的weexplus,weexplus是一个由weex开发大神封装的weex二次开发的脚手架,作者已经在GitHub上开源出来,在weex的基础上新增了很多的module和component,很大程度上提高了开发效率。还提供了界面预加载的能力,优化了weex界面加载会有一个短暂白屏的问题。在使用weexplus的过程中通过阅读其源码和理解其设计思路,对weex框架有了一定程度的理解,在这里表示感谢=。=。
不过一直使用别人封装的东西总感觉不如自己封装一个出来(这里肯定会借鉴大神的思路就是了=、=),再加上自己也一直想做一个APP,因此借此机会边对weex框架进行扩展和封装边做一个视频APP吧。
前言有点多了,接下来进入正题,首先我们按照weex官方教程搭建weex开发的环境。
百度搜索下载安装Node.js
安装完成后在终端输入如下命令验证:
$ node -v
v6.11.3
$ npm -v
3.10.10
安装weex官方提供的weex-toolkit脚手架,执行如下命令进行安装:
$ npm install -g weex-toolkit
$ weex -v //查看当前weex版本
接下来使用weex-toolkit创建weex项目
$ weex create weex-project
执行此命令后我们实际上也安装了weexpack工具
执行weexpack platform add android/ios 添加android和ios的模板项目
在 package.json
中,已经配置好了几个常用的 npm script,分别是:
build
: 源码打包,生成 JS Bundle
dev
: webpack watch 模式,方便开发
serve
: 开启HotReload服务器,代码改动的将会实时同步到网页中
在执行npm run dev和npm run serve之前需要先执行npm install安装weex开发所需的依赖。
之后运行根目录下的 npm run dev & npm run serve
开启 watch 模式和静态服务器。
然后我们打开浏览器,进入 http://localhost:8080/index.html
即可看到 weex h5 页面。
也可以使用打包的android项目扫码查看原生界面效果。