Weex初体验--创建一个简单的Weex程序

佚冰 3年前
   <p>最近阿里开源的Weex很火爆。</p>    <p>参考官网的资料学习了一下,写了一个小Demo。</p>    <p>分享出来和大家交流交流。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/073adbcab43c3061e63ad938f36d45f3.png"></p>    <h2>环境准备</h2>    <p>按照官网的教程,完成以下步骤:</p>    <ol>     <li>安装Node.js</li>     <li>安装weex-toolkit</li>    </ol>    <p>这两步完成以后,就可以进行代码的编写了。</p>    <h2>小Demo</h2>    <p style="text-align:center"><img src="https://simg.open-open.com/show/fbf6d2299e5c97b24a68ce30461bc01c.png"></p>    <p style="text-align:center">程序界面</p>    <p>实现一个很简单功能:在文本框中输入文字,点击按钮,文字会出现在下面列表中。</p>    <h2>1、创建项目</h2>    <p>这里的Demo是将Weex集成到现有的项目中,</p>    <p>所以首先需要创建一个Android项目。</p>    <p>官网要求:</p>    <ol>     <li>已经安装了JDK version>=1.7 并配置了环境变量</li>     <li>已经安装Android SDK 并配置环境变量。</li>     <li>Android SDK version 23 (compileSdkVersion in build.gradle)</li>     <li>SDK build tools version 23.0.1 (buildToolsVersion in build.gradle)</li>     <li>Android Support Repository >= 17 (for Android Support Library)</li>    </ol>    <p>在满足这些要求的情况下,创建一个Android Studio项目。</p>    <h2>2、编写Android代码</h2>    <p>(一)添加依赖</p>    <p>glide用于图片加载。</p>    <p>其他的库都是官网要求的依赖。</p>    <pre>  <code class="language-java">compile 'com.android.support:recyclerview-v7:24.2.1'      compile 'com.android.support:appcompat-v7:24.2.1'      compile 'com.alibaba:fastjson:1.1.45'      compile 'com.taobao.android:weex_sdk:0.9.5@aar'      compile 'com.github.bumptech.glide:glide:3.7.0'</code></pre>    <p>(二)实现ImageAdapter</p>    <p>Weex要求本地实现图片的加载代码。</p>    <p>我这里使用Glide实现图片加载。</p>    <pre>  <code class="language-java">public class ImageAdapter implements IWXImgLoaderAdapter {      @Override      public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {          //实现你自己的图片下载,否则图片无法显示。          Glide.with(view.getContext())                  .load(url)                  .into(view);       }  }</code></pre>    <p>(三)创建Application类</p>    <p>注意这个类一定要在Manifest中配置。</p>    <pre>  <code class="language-java">public class App extends Application {      @Override      public void onCreate() {          super.onCreate();          InitConfig config=new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();          WXSDKEngine.initialize(this,config);      }  }</code></pre>    <p>(四)编写MainActivity</p>    <p>这里做了几件事:</p>    <ol>     <li>实例化 <strong>WXSDKInstance</strong> 。</li>     <li>在Activity生命周期中回调 <strong>mWXSDKInstance</strong> 的对应方法。</li>     <li>实现 <strong>IWXRenderListener</strong> 接口 。</li>     <li>调用 <strong>mWXSDKInstance.render</strong> 方法实例化组件</li>     <li>在 <strong>IWXRenderListener.onViewCreated()</strong> 方法中设置 view 。</li>    </ol>    <p>IWXRenderListener.onViewCreated()会在Weex将JS实例化成View后回调。 <strong>IWXRenderListener</strong> 中同时还有:</p>    <p>onRenderSuccess();</p>    <p>onRefreshSuccess();</p>    <p>onException();</p>    <p>三个回调方法。</p>    <pre>  <code class="language-java">public class MainActivity extends AppCompatActivity implements IWXRenderListener {      WXSDKInstance mWXSDKInstance;        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          mWXSDKInstance = new WXSDKInstance(this);          mWXSDKInstance.registerRenderListener(this);          mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("home.js",this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);      }      @Override      public void onViewCreated(WXSDKInstance instance, View view) {          setContentView(view);      }      @Override      public void onRenderSuccess(WXSDKInstance instance, int width, int height) {      }      @Override      public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {      }      @Override      public void onException(WXSDKInstance instance, String errCode, String msg) {      }      @Override      protected void onResume() {          super.onResume();          if (mWXSDKInstance != null) {              mWXSDKInstance.onActivityResume();          }      }      @Override      protected void onPause() {          super.onPause();          if (mWXSDKInstance != null) {              mWXSDKInstance.onActivityPause();          }      }      @Override      protected void onStop() {          super.onStop();          if (mWXSDKInstance != null) {              mWXSDKInstance.onActivityStop();          }      }      @Override      protected void onDestroy() {          super.onDestroy();          if (mWXSDKInstance != null) {              mWXSDKInstance.onActivityDestroy();          }      }  }</code></pre>    <p>到这里基本上Android端的代码就完成了。</p>    <p>剩下的任务就是编写Weex代码了。</p>    <h2>3、编写Weex代码</h2>    <p>(一)创建一个组件</p>    <p>在这里我先创建了一个Weex组件,用于显示文字,并且支持变色。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/add56662a6fb36b347fffe9fcbe31424.png"></p>    <p style="text-align:center">组件样子</p>    <p>文件名: <strong>name.we</strong></p>    <pre>  <code class="language-java"><template>      <div>          <text repeat="item in items" class="text {{item.sex}}">{{item.name}}</text>      </div>  </template>  <style>      .text{ width:750; padding-top: 10px; padding-bottom: 10px;justify-content: center;text-align: center; color:#ffffff}      .male { background-color: #9999ff; }      .female { background-color: #ff9999; }  </style>  <script>      module.exports = {          data: {              items:[]          },          methods:{          }      }  </script></code></pre>    <p>(二)创建主界面</p>    <p>注意: <strong>home.we</strong> 和 <strong>name.we</strong> 要放在同一个目录</p>    <p>文件名:home.we</p>    <pre>  <code class="language-java"><template xmlns="http://www.w3.org/1999/html">      <div>          <div style="width: 750; height: 200;">              <image class="img" src={{imageUrl}}></image>          </div>          <input ref="input" class="input" type="text"  value={{input}} oninput="oninput" />          <a class="button">                <text class="text" onclick="add">添加</text>          </a>          <name items = {{items}}></name>      </div>    </template>    <script>      module.exports = {          data: {              imageUrl: 'https://gtms02.alicdn.com/tps/i2/TB1QHKjMXXXXXadXVXX20ySQVXX-512-512.png',              input:'',              sex:'male',              items:[]          },          methods: {              oninput (event) {                  console.log('ominput:', event.value)                  this.input = event.value;              },              add(){                  if(this.input === '')                      return;                  this.items.unshift({name:this.input,sex:this.sex})                  this.input = "";                  if(this.sex === 'female'){                      this.sex = 'male';                  }else{                      this.sex = 'female';                  }              }          }      }  </script>    <style>    .img { width: 200; height: 200; margin-left: 275}    .input {        font-size: 50px;        width: 650px;        margin-top: 50px;        margin-left: 50px;        padding-top: 20px;        padding-bottom: 20px;        padding-left: 20px;        padding-right: 20px;        color: #666666;        border-width: 2px;        border-style: solid;        border-color: #41B883;      }    .button {        width: 450px;        margin-top: 30px;        margin-bottom: 30px;        margin-left: 150px;        padding-top: 20px;        padding-bottom: 20px;        border-width: 2px;        border-style: solid;        border-color: #DDDDDD;        background-color: #F5F5F5      }      .text {        font-size: 30px;        color: #666666;        text-align: center;      }  </style></code></pre>    <p>(三)调试 we文件</p>    <p>这个时候需要用到之前安装的 <strong>weex-toolkit</strong> 工具。</p>    <p>直接执行命令:</p>    <pre>  <code class="language-java">weex home.we</code></pre>    <p>这时候会打开默认浏览器,</p>    <p>我们就会看到我们所的界面。</p>    <p>这里支持热更新,只要你在源文件中做了更改并保存,这个界面就会跟着刷新成最新状态。特别方便。</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/d5ffa81273b63920e0b77de0f3cb19a7.png"></p>    <p style="text-align:center">预览界面</p>    <p>(四)转换编写的 we文件</p>    <p>调试没有问题后,就需要使用Weex命令转换成JS文件了。</p>    <p>使用命令:</p>    <pre>  <code class="language-java">weex home.we --output home.js</code></pre>    <p>这个时候就会在当前目录下找见 <strong>home.js</strong> 了。</p>    <p>这个 <strong>home.js</strong> 就是我们要在 Android项目中加载的文件了。</p>    <p>(五)导入JS并运行程序</p>    <p>拷入转换后的JS文件(我这里是直接在assets目录编写的we,所以会有三个文件)</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/80deaba68f316997ae0d60eb5a3d7a8f.png"></p>    <p style="text-align:center">目录结构</p>    <p>在代码中加载 js 文件</p>    <pre>  <code class="language-java">// WXFileUtils.loadAsset("home.js",this) 这个方法会加载assets下的js   mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("home.js",this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);</code></pre>    <p>点击运行:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/1843aec4e1d297751ac0ab091fcde765.png"></p>    <p style="text-align:center">运行界面</p>    <p> </p>    <p>来自:http://www.jianshu.com/p/d9487554de3c</p>    <p> </p>