weex打包安卓艰苦之路

weex打包安卓

一 配置安卓环境

  1. 下载安卓SDK
  2. 配置ANDROID_HOME
  3. 配置%ANDROID_HOME%\tools
    在这里插入图片描述
  4. android -h 检查是否配置成功

二 weex的安装使用

一、weex简介以及开发前提

1、简介

​ 官网的解释为Weex是一个使用Web开发体验来开发高性能原生应用的框架。按我的理解其实就是,只用写一份代码,可以同时在PC端和移动端(包括android 和IOS)运行。

2、开发前提和基础

​ 要利用weex开发,需要了解node.js和npm的基本知识。

​ 如果没有了解node.js和npm,建议先了解相关知识。

​ node.js:https://nodejs.org/en/

二、创建一个weex项目

1、在安装了node.js的前提前,全局安装weex-toolkit

执行以下命令:npm install weex-toolkit -g

2、执行完这条命令后,可以利用weex命令来创建一个空的模板项目

weex create text-app (其中text-app为自定义的文件夹名字)

执行完后,我们可以看到在text-app文件夹下有一个类似vue.js项目的目录结构如下:

img

3、而后进入text-app下,安装依赖并运行:

text-app > npm install

text-app > npm start

执行后得到:img打开这个提示后的网址,得到如下界面:

img

这就是第一个app。可以把它当做一个普通的vue.js项目一样开发。

具体的vue.js介绍:https://cn.vuejs.org/

三、打包到android(apk)

​ 在建立好weex项目,并且在网页中出现界面以后,我们需要把项目打包为android项目,以在android studio上运行。但是打包的前提为,我们已经安装并配置好了android SDK并且安装了android studio。

若SDK没有配置好,具体过程请参照:

以下为打包步骤:

(注:以下命令都在text-app的目录中执行)

1、执行语句weex platform add android

这个语句的意思为安装weex应用模板,我们这里安装android的模板。

当语句执行完后,就能在目录的platforms文件夹中看到一个名为android的文件夹

2、在android studio中打开运行模拟器。

(1)注意gradle版本为gradle-2.14.1-all.zip

(2) gradle-2.14.1-all.zip下载缓慢 用迅雷打开下载连接

https://downloads.gradle-dn.com/distributions/gradle-2.14.1-all.zip 进行下载
下载后放到.gradle\wrapper\dists\gradle-2.14.1-all\8bnwg5hd3w55iofp58khbp6yv目录下

(3) 依赖包下载缓慢

修改文件

buildscript {
    repositories {
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/jcenter' }
        maven {
            url 'https://maven.google.com/'
            name 'Google'
        }
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:2.1.3'
        classpath 'com.taobao.android:weexplugin-gradle-plugin:1.3'
    }
}
allprojects {
    repositories {
        maven { url 'http://maven.aliyun.com/nexus/content/groups/public/' }
        maven { url 'http://maven.aliyun.com/nexus/content/repositories/jcenter' }
    }
}

至此运行Android程序成功启动安卓虚拟机

3、执行语句npm run android

注:如果在过程中出现类似的错误:

​ You have not accepted the license agreements of the following SDK components:

​ [Android SDK Platform 26].

表示当前没有支持的包,解决方案:

  1. 在idea设置中下载对应的sdk版本

在这里插入图片描述

在此界面中找到对应缺失的包,然后再到项目根目录中执行npm run android。

4、打包成功后,我们打包的android项目在

platforms→android→app

对应的apk的位置为:platforms→android→app→build→outputs→apk中

四、运行

利用android studio 打开打包成功后的项目,在模拟器上运行,最终得到结果为:

img


版权声明:本文为qq_41673830原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。