|
| 1 | +# LuaViewSDK 完全新手教程(Android) |
| 2 | + |
| 3 | +说明:LuaView = LuaViewSDK |
| 4 | + |
| 5 | +# 1.LuaViewSDK 是什么 |
| 6 | +LuaViewSDK 主要解决客户端开发中的两个常见问题: |
| 7 | + |
| 8 | +- 相同的业务逻辑需要在 iOS 和 Android 平台各实现一次,除了开发成本高,也会引入体验的细微差别。是否有一种技术方案可以做到**一份代码,两个平台运行,行为相同** ? |
| 9 | + |
| 10 | +* 移动 APP 开发领域,要极致体验发布就不灵活(Native),要灵活发布就没有极致体验(H5)。有没有一种技术方案可以兼顾极致的体验和灵活的发布? |
| 11 | + |
| 12 | +LuaView 可以完美解决上述两个问题。 |
| 13 | + |
| 14 | +LuaView 是一种运行在一个 ViewController/Activity 中,可以灵活加载Lua 脚本,并能够按照 Native 的方式运行的一种面向业务的开发技术方案。可以快速开发电商应用中既要求体验又要求灵活性的页面功能,例如首页,类目首页,垂直频道,大促活动会场等。 |
| 15 | + |
| 16 | +LuaViewSDK 对 iOS 和 Android 平台的接口做了包装,保证同一份 Lua 代码可以在两个平台运行,同时兼顾开发效率和运行性能。 |
| 17 | + |
| 18 | +LuaViewSDK 基于 LuaJ 和 LuaC 完成,所以有着与 Native 一样强大的性能。 |
| 19 | + |
| 20 | +LuaViewSDK 可以通过 Lua 脚本桥接所有 Native 的功能,所以具有与 Native 一样丰富的性能。 |
| 21 | + |
| 22 | +最关键的是 LuaViewSDK 已经开源了,可以在 https://github.com/alibaba/luaviewsdk 查看 LuaViewSDK 的全部代码(目前Android仅添加luaj虚拟机,后续代码陆续添加中)。 |
| 23 | + |
| 24 | +说的这么好,有没有什么证明呢?请看**聚划算客户端的量贩团、品牌团**页面。 |
| 25 | + |
| 26 | +# 2.本文针对的人群 |
| 27 | +这里的内容主要针对没有无线开发经验,想快速学习无线开发的Android同学。 |
| 28 | + |
| 29 | +可能你是一个其他领域的程序员,做过前端或服务端开发,完全没有客户端开发经验。你只需要打开Android Studio IDE,就可以完成这里的所有操作,可以快速建立一个简单的App,这个 App 没有其他功能,只是在屏幕上显示 Hello World LuaView to Android!。 |
| 30 | + |
| 31 | +对,它就是又一个的 Hello Word! |
| 32 | + |
| 33 | +# 3.大纲 |
| 34 | +- 环境安装( Android Studio 和 Android SDK ) |
| 35 | +- Android Studio 建立Android工程(new Android Studio project) |
| 36 | +- 通过 build.gradle 添加 alibaba maven 库,导入 LuaViewSDK 依赖 |
| 37 | +- 使用 Lua 编写业务脚本 |
| 38 | +- 在 Activity Java 代码中加载 Lua 业务脚本 |
| 39 | +- 在模拟器中运行 |
| 40 | + |
| 41 | + |
| 42 | +# 4.环境配置 |
| 43 | +## 4.1 第一步是安装 Android Studio,Android开发必须用到的开发工具。 |
| 44 | +- 官方网址: http://developer.android.com/sdk/index.html |
| 45 | +- 替代网址: http://www.android-studio.org/ |
| 46 | + |
| 47 | +## 4.2 下载 Android SDK |
| 48 | +Android SDK 在 Android Studio中已经包含,但是只是一个最新版的(当前最新为6.0),你可以将以前版本补全以进行所有代码测试。 |
| 49 | +通过 Androd Studio > Preferences 打开设置面板,然后选择 Appearance & Behavior > System Settings > Android SDK 看到SDK设置面板, |
| 50 | +在SDK Platform中选择你要下载的SDK版本(这里需要讲Api Level 21、22 的版本全部钩上),然后点击 Apply 下载, 完成后重启 Android Studio即可。 |
| 51 | + |
| 52 | + |
| 53 | +## 4.3 第三步在github上clone LuaViewSDK到本地目录。 |
| 54 | +- github网址: https://github.com/alibaba/LuaViewSDK |
| 55 | +- https方式:git clone https://github.com/alibaba/LuaViewSDK.git |
| 56 | +- ssh方式:git clone git@github.com:alibaba/LuaViewSDK.git |
| 57 | + |
| 58 | + |
| 59 | +# 5. Hello World 开发 |
| 60 | +主要步骤为: |
| 61 | + |
| 62 | +1. 新建Androd工程 |
| 63 | +2. 通过 build.gradle 添加 alibaba maven 库,导入 LuaViewSDK 依赖 |
| 64 | +3. 编写 Lua 脚本 |
| 65 | +4. 在Activity中加载 Lua 脚本 |
| 66 | +5. 在模拟器中运行 |
| 67 | + |
| 68 | + |
| 69 | +## 5.1 新建Androd工程 |
| 70 | + |
| 71 | +(1)通过 File > New > New Project 建立新工程 或者 |
| 72 | + |
| 73 | + |
| 74 | + |
| 75 | + |
| 76 | +(2)选择 Empty Activity |
| 77 | + |
| 78 | + |
| 79 | +(3)继续输入项目信息 |
| 80 | + |
| 81 | + |
| 82 | +(4)项目建成之后的目录结构 |
| 83 | + |
| 84 | + |
| 85 | +(4)项目建成之后的目录结构 |
| 86 | + |
| 87 | + |
| 88 | + |
| 89 | + |
| 90 | + |
| 91 | +## 5.2 添加LuaViewSDK Module |
| 92 | + |
| 93 | +(1)通过 File -> New -> Import Module |
| 94 | + |
| 95 | + 选择之前git clone的LuaViewSDK目录下的Android/LuaViewSDK目录 |
| 96 | + |
| 97 | + 点击ok后,在选择Module name 你可以直接用默认的“LuaViewSDK”,也可以自己选择一个新的module名称,注意不要去掉前面的“:”。直接点 finish。 |
| 98 | + |
| 99 | + |
| 100 | +(2) 引入时因为要下载LuaViewSDK中build.gradle中 buildToolsVersion 字段定义的gradle版本,过程可能会比较慢。先结束引入流程,然后文件目录版从Android切换成Project,找到LuaViewSDK下面的build.gradle文件,进行编辑,将 buildToolsVersion字段的值替换成app目录下build.gradle中 buildToolsVersion 字段的值。 |
| 101 | + |
| 102 | + |
| 103 | + |
| 104 | + |
| 105 | + |
| 106 | + |
| 107 | +(3)点击一下 Sync Now 或者 build button 进行编译一下 |
| 108 | + |
| 109 | +  |
| 110 | +  |
| 111 | + |
| 112 | +(4)编译完成后如果当前compileSdkVersion的版本是23(Adnroid 6.0)的情况会报错,因当前LuaViewSDK暂不支持6.0编译,需要将compileSdkVersion降一下,这里可以直接改两个module目录下的build.gradle文件。 |
| 113 | + |
| 114 | +app目录下的build.gradle文件添加 |
| 115 | + |
| 116 | +```gradle |
| 117 | +compileSdkVersion 21 |
| 118 | +dependencies { |
| 119 | + compile fileTree(include: ['*.jar'], dir: 'libs') |
| 120 | + compile 'junit:junit:4.12' |
| 121 | + compile 'com.android.support:support-v4:21.0.0' |
| 122 | + compile 'com.android.support:recyclerview-v7:+' |
| 123 | + compile project(':LuaViewSDK') |
| 124 | +} |
| 125 | +``` |
| 126 | + |
| 127 | +LuaviewSDK目录下的build.gradle文件添加或修改 |
| 128 | + |
| 129 | +```Gradle |
| 130 | +compileSdkVersion 21 |
| 131 | +``` |
| 132 | + |
| 133 | +也可以直接用ide的工具进行修改: |
| 134 | + |
| 135 | + 1.点击项目右键 -> 选择Open Module Settings,进入Module修改面板。 |
| 136 | +  |
| 137 | + |
| 138 | + 2.Modules选中LuaViewSDK,在Properties选项中找到 “Compile Sdk Version”,下拉选中API 21。 |
| 139 | +  |
| 140 | + 3.Modules选中app,在Properties选项中找到 “Compile Sdk Version”,下拉选中API 21。 |
| 141 | +  |
| 142 | + 4. Flavors选项中 “Target Sdk Version”也要修改一下。 |
| 143 | + |
| 144 | + 5. 修改Dependencies选项 先将V4 和 V7包的版本依赖修改如下 |
| 145 | + |
| 146 | + 6. app Module中添加LuaViewSDK module的依赖。选择“+” -> Module dependency , |
| 147 | + |
| 148 | + chose module 中选中“:LuaViewSDK”。 |
| 149 | + |
| 150 | + 然后查看LuaViewSDK依赖是否已加入。 |
| 151 | + |
| 152 | + |
| 153 | +(5)点击一下 Sync Now 或者 build button 进行编译一下 |
| 154 | + |
| 155 | +  |
| 156 | +  |
| 157 | + |
| 158 | + 这里可能会遇到某些style因修改compileSdkVersion而找不到,可以将报错行直接删除,将app目录下AndroidManifest.xml文件中Activity对应的style修改成“@android:style/Theme.Holo.Light”,不用android 6.0版本的style即可。 |
| 159 | +  |
| 160 | + 同时主Activity修改成继承自Activity。 |
| 161 | +  |
| 162 | + 然后再编译一下。 |
| 163 | + |
| 164 | +## 5.3 编写 Lua 脚本 |
| 165 | + |
| 166 | +(1)在app目录添加 assets 文件夹,如下: |
| 167 | +  |
| 168 | +  |
| 169 | + |
| 170 | +(2)在 assets 文件夹下添加hello.lua文件:New > File |
| 171 | +  |
| 172 | + |
| 173 | +(3)文件内容为: |
| 174 | + |
| 175 | +```Lua |
| 176 | +w,h = System.screenSize(); |
| 177 | +window.frame(0, 0, w, h); |
| 178 | +window.backgroundColor(0xDDDDDD); |
| 179 | + |
| 180 | +label = Label(); |
| 181 | +label.frame(0,50,w, 60); |
| 182 | +label.text("Hello World LuaView to Android"); |
| 183 | +``` |
| 184 | +如下: |
| 185 | + |
| 186 | + |
| 187 | +## 5.4 在Activity中加载 Lua 脚本 |
| 188 | + |
| 189 | +按照如下内容修改Activtiy文件: |
| 190 | + |
| 191 | +```Java |
| 192 | +package com.luaview.hellolua; |
| 193 | + |
| 194 | +import android.app.Activity; |
| 195 | +import android.os.Bundle; |
| 196 | + |
| 197 | +import com.taobao.luaview.global.LuaView; |
| 198 | + |
| 199 | + |
| 200 | +public class LuaActivity extends Activity { |
| 201 | + |
| 202 | + @Override |
| 203 | + protected void onCreate(Bundle savedInstanceState) { |
| 204 | + super.onCreate(savedInstanceState); |
| 205 | + LuaView view = LuaView.create(this); |
| 206 | + view.load("hello.lua"); |
| 207 | + setContentView(view); |
| 208 | + } |
| 209 | + |
| 210 | +} |
| 211 | + |
| 212 | +``` |
| 213 | +如下: |
| 214 | + |
| 215 | + |
| 216 | +## 5.5 在模拟器中运行 |
| 217 | +点击运行按钮: |
| 218 | +  |
| 219 | +运行结果: |
| 220 | +  |
| 221 | + |
| 222 | +# 6.后记 |
| 223 | +完成了这些,你可以骄傲的说你能跨平台进行移动开发了,欢迎进入LuaView的世界! |
| 224 | + |
| 225 | +在LuaViewSDK目录下,也可以让Android Studio直接运行Android子目录。在项目中有一些简单的lua demo,这些将是后续进阶的利器。 |
| 226 | + |
| 227 | +Doc目录下的内容是LuaViewSDK的doc帮助文档。 |
| 228 | + |
| 229 | +LuaViewDebugger目录下的文件是LuaView的调试工具(目前只支持模拟器调试)。 |
| 230 | + |
| 231 | + |
| 232 | + |
0 commit comments