Weex开发视频APP之环境搭建和创建项目

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_33718648/article/details/86484562

      本人在大学毕业之后就开始在公司使用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项目扫码查看原生界面效果。

     

       

猜你喜欢

转载自blog.csdn.net/qq_33718648/article/details/86484562