weex 构建web和android端

最近项目需要,打算把当前的weex项目转成app。因为本身没有原生app开发经验,所以只能查文档开发。好在vue玩的还不错,搞了几天,还是搞出个门路了。

目前用的是win,没办法搞不了ios,安卓没问题。

首先献上官网官网。说实话,官网写的实在一般的很,凑合能看的看吧,毕竟官网才是最标准的。

配置weex环境

首先配置weex环境和web端。

  • 1.安装weex-toolkit:npm install weex-toolkit -g
  • 2.创建web端项目:weex create awesome-app

配置安卓环境

配置环境说实话,麻烦得很,尤其是没弄过安卓的。

  • 1.项目中添加安卓:weex platform add android
  • 2.安装android-studio
  • 3.配置java、sdk、jdk一大堆。环境变量java_home、android_home 都要配置一下
  • 4.用android-studio进入项目中的android文件,这是安卓的编辑环境。
  • 5.用android-studio打包。

这里只是一个概述,大概就是,基于web端,将安卓或者ios的代码编译到对应的项目中,打包的时候直接在里面打包就行。

问题问题问题

我最开始以为,之前的web端项目直接迁移进来,就可以直接打包了。然而并不是。下面说说我目前遇到的几个问题。

  • 1.class不支持嵌套:血与泪的教训,我之前都不知道,慢慢测出来的。我用的less,发现虽然可以编译less,但是一旦clss类进行嵌套,class是不识别的。
  • 2.图片只能是绝对地址,所以我用的都是线上的。本地地址用不了。
  • 3.行内的class绑定,用{}好像不行,改用 :class="['navBtn', actNav === 'List' ? 'activeNav' : 'notActiveNav']" 这种模式成功了。
  • 4.一些合成样式也不行,比如background:#990000;这样识别不了,得用background-color:#990000;目前别的样式bug不清楚呢,反正是有这么回事,碰到在查吧,官网也没有介绍。
  • 5.得配合weex提供的一些组件进行,比如文本要放在 text 里。

项目路径

起来的app

随机浏览