Skip to content

Commit cbfe1f6

Browse files
author
yuyi.lwm
committed
add new user Android
1 parent 1d66b10 commit cbfe1f6

33 files changed

+232
-0
lines changed
Lines changed: 232 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,232 @@
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+
![Android SDK 下载](luaview_1.png "Android SDK 下载")
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+
![新建android工程1](luaview-createproject-01.png "新建android工程1")
73+
![新建android工程2](luaview-createproject-02.png "新建android工程2")
74+
![新建android工程3](luaview-createproject-03.png "新建android工程3")
75+
76+
(2)选择 Empty Activity
77+
![新建android工程4](luaview-createproject-04.png "新建android工程4")
78+
79+
(3)继续输入项目信息
80+
![新建android工程5](luaview-createproject-05.png "新建android工程5")
81+
82+
(4)项目建成之后的目录结构
83+
![新建android工程6](luaview-createproject-06.png "新建android工程6")
84+
85+
(4)项目建成之后的目录结构
86+
![新建android工程6](luaview-createproject-06.png "新建android工程6")
87+
88+
89+
90+
91+
## 5.2 添加LuaViewSDK Module
92+
93+
(1)通过 File -> New -> Import Module
94+
![引入新module](luaview-build-01.png "引入新module")
95+
选择之前git clone的LuaViewSDK目录下的Android/LuaViewSDK目录
96+
![选中LuaViewSDK目录](luaview-build-02.png "选中LuaViewSDK目录")
97+
点击ok后,在选择Module name 你可以直接用默认的“LuaViewSDK”,也可以自己选择一个新的module名称,注意不要去掉前面的“:”。直接点 finish。
98+
![选择Module name](luaview-build-03.png "选择Module name")
99+
100+
(2) 引入时因为要下载LuaViewSDK中build.gradle中 buildToolsVersion 字段定义的gradle版本,过程可能会比较慢。先结束引入流程,然后文件目录版从Android切换成Project,找到LuaViewSDK下面的build.gradle文件,进行编辑,将 buildToolsVersion字段的值替换成app目录下build.gradle中 buildToolsVersion 字段的值。
101+
![文件目录版切换](luaview-build-04.png "文件目录版切换")
102+
103+
![build.gradle文件](luaview-build-05.png "build.gradle文件")
104+
105+
![替换buildToolsVersion字段](luaview-build-06.png "替换buildToolsVersion字段")
106+
107+
(3)点击一下 Sync Now 或者 build button 进行编译一下
108+
109+
![Sync Now](luaview-build-run-01.png "Sync Now")
110+
![build button](luaview-build-run-02.png "build button")
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+
![打开Module Settings](luaview-build-07.png "打开Module Settings")
137+
138+
2.Modules选中LuaViewSDK,在Properties选项中找到 “Compile Sdk Version”,下拉选中API 21。
139+
![Modules中修改LuaViewSDK](luaview-build-08.png "Modules中修改LuaViewSDK")
140+
3.Modules选中app,在Properties选项中找到 “Compile Sdk Version”,下拉选中API 21。
141+
![Modules中修改LuaViewSDK](luaview-build-09.png "Modules中修改LuaViewSDK")
142+
4. Flavors选项中 “Target Sdk Version”也要修改一下。
143+
![Flavors中修改Target Sdk Version](luaview-build-10.png "Flavors中修改Target Sdk Version")
144+
5. 修改Dependencies选项 先将V4 和 V7包的版本依赖修改如下
145+
![V4 和 V7包的版本](luaview-build-11.png "V4 和 V7包的版本")
146+
6. app Module中添加LuaViewSDK module的依赖。选择“+” -> Module dependency ,
147+
![Module dependency](luaview-build-12.png "Module dependency")
148+
chose module 中选中“:LuaViewSDK”。
149+
![chose module](luaview-build-13.png "chose module")
150+
然后查看LuaViewSDK依赖是否已加入。
151+
![LuaViewSDK依赖](luaview-build-14.png "LuaViewSDK依赖")
152+
153+
(5)点击一下 Sync Now 或者 build button 进行编译一下
154+
155+
![Sync Now](luaview-build-run-01.png "Sync Now")
156+
![build button](luaview-build-run-02.png "build button")
157+
158+
这里可能会遇到某些style因修改compileSdkVersion而找不到,可以将报错行直接删除,将app目录下AndroidManifest.xml文件中Activity对应的style修改成“@android:style/Theme.Holo.Light”,不用android 6.0版本的style即可。
159+
![修改AndroidManifest.xml](luaview-build-15.png "修改AndroidManifest.xml")
160+
同时主Activity修改成继承自Activity。
161+
![主Activity集成修改成Activity](luaview-build-16.png "主Activity集成修改成Activity")
162+
然后再编译一下。
163+
164+
## 5.3 编写 Lua 脚本
165+
166+
(1)在app目录添加 assets 文件夹,如下:
167+
![添加assets文件夹1](luaview-assets-01.png "添加assets文件夹1")
168+
![添加assets文件夹2](luaview-assets-02.png "添加assets文件夹2")
169+
170+
(2)在 assets 文件夹下添加hello.lua文件:New > File
171+
![添加hello.lua](luaview-assets-03.png "添加hello.lua")
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+
![hello.lua内容](luaview-assets-03.png "hello.lua内容")
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+
![Activity内容](luaview-activity-01.png "Activity内容")
215+
216+
## 5.5 在模拟器中运行
217+
点击运行按钮:
218+
![运行按钮](luaview-success-01.png "运行按钮")
219+
运行结果:
220+
![运行结果](luaview-success-02.png "运行结果")
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+
110 KB
Loading
495 KB
Loading
116 KB
Loading
283 KB
Loading
56.2 KB
Loading
583 KB
Loading
224 KB
Loading
88.4 KB
Loading
61.6 KB
Loading

0 commit comments

Comments
 (0)