开发HelloWorld程序（Weex开发）

作者：@guogai

• 1.新建一个Module(一个Module就相当于一个app)

1. 如果已经有一个Project，那么可以直接新建一个Module，如果没有先去新建一个Project。

如图：

创建工程，可以参考“开发HelloWorld程序(Android原生)”

这里的Minumum SDK要选择API16及以上，Weex目前只支持到API16级以上。

这个时候我们WXHelloWorld程序的原生壳子就创建好了，接下来进入weex环节。 - 2.给Module集成WeexSDK

给module的build.gradle文件添加如下配置

1. 添加完以后，点击Sync Now去同步配置即可，至此，weex sdk已经集成完毕。

1. 集成完sdk以后，我们可以在AS中看到weex的源码。

• 3.开发.we源码

使用notepad++或者记事本等开发如下源码，保存文件扩展名为.we即可，自行百度关键字如何显示文件扩展名。

- 4.编译.we源码为js文件

打开命令行，cd到.we源码的目录，执行：weex xxx.we

没有报错，编译成功，会自动打开浏览器，在浏览器显示我们开发的界面，在源码相应的文件夹也会生成js文件。

在浏览器运行后的效果。

编译.we源码生成的js文件，可以在源码的同级目录下找到。 - 5.初始化sdk

1. 5.1 实现图片下载适配器，如果项目中有图片展示，必须实现，否则图片无法显示。在刚刚的Module新建一个ImageAdapter类，实现IWXImgLoaderAdapter接口。由于我们这里展示的是HelloWorld，所以可以先不写具体的setImage（）方法里面的实现。

1. 5.2 在Module的Application的onCreate（）处初始化WeexSDK。 2. public class HelloWorldApplication extends Application { 3. @Override 4. public void onCreate() { 5. super.onCreate(); 6. //初始化WXSDK 7. InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build(); 8. WXSDKEngine.initialize(this, config); 9. } 10. }

1. 5.3 在Module的AndroidManifest文件设置android:name=".HelloWorldApplication"

- 6.实现渲染

1. 6.1 先去掉原生的效果，防止干扰，把原生的activity_main.xml里面的TextView控件删除。

1. 6.2 把编译后生成的.js文件复制到Module的asserts资源文件夹下面

1. 6.3 在Module的Activity实现渲染
2. public class MainActivity extends AppCompatActivity implements IWXRenderListener {
3. private WXSDKInstance mWXSDKInstance;

5. @Override
6. protected void onCreate(Bundle savedInstanceState) {
7. super.onCreate(savedInstanceState);
8. setContentView(R.layout.activity_main);
9. initWXSDKInstance();
10. }

12. /**
13. * 初始化WXSDKInstance
14. */
15. private void initWXSDKInstance() {
16. mWXSDKInstance = new WXSDKInstance(this);
17. mWXSDKInstance.registerRenderListener(this);
18. /**
19. * WXHelloWorld 可以替换成自定义的字符串，针对埋点有效。
20. * template 是.we transform 后的 js文件。
21. * option 可以为空，或者通过option传入 js需要的参数。例如bundle js的地址等。
22. * jsonInitData 可以为空。
23. * width 为-1 默认全屏，可以自己定制。
24. * height =-1 默认全屏，可以自己定制。
25. */
26. mWXSDKInstance.render("WXHelloWorld", WXFileUtils.loadFileContent("HelloWorld.js", this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
27. }

29. @Override
30. public void onViewCreated(WXSDKInstance instance, View view) {
31. //这里不能少
32. setContentView(view);
33. }

35. @Override
36. public void onRenderSuccess(WXSDKInstance instance, int width, int height) {

38. }

40. @Override
41. public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {

43. }

45. @Override
46. public void onException(WXSDKInstance instance, String errCode, String msg) {

48. }

50. @Override
51. protected void onResume() {
52. super.onResume();
53. if (mWXSDKInstance != null) {
54. mWXSDKInstance.onActivityResume();
55. }
56. }

58. @Override
59. protected void onPause() {
60. super.onPause();
61. if (mWXSDKInstance != null) {
62. mWXSDKInstance.onActivityPause();
63. }
64. }

66. @Override
67. protected void onStop() {
68. super.onStop();
69. if (mWXSDKInstance != null) {
70. mWXSDKInstance.onActivityStop();
71. }
72. }

74. @Override
75. protected void onDestroy() {
76. super.onDestroy();
77. if (mWXSDKInstance != null) {
78. mWXSDKInstance.onActivityDestroy();
79. }
80. }

}

1. 6.4 点击红色箭头指示处，运行程序。

Q&A

• 1.执行weex xxx.we编译报错

1. 一般报错是端口被占用，可以采用 cd到xxx.we然后执行weex xxx.we --qr，或者重启电脑（鬼脸）

• 2.找不到编译后的.js文件

1. 建议把we源码放在C盘某个文件夹下，其他盘下会报一些错误，具体原因还没测试。