Weex試食
21201 ワード
WeexはアリオープンソースのクラスReact Native技術であり、実際にはVue.js+React Native製のホイールを統合した(アリ無線フロントエンドが発表したWeexをどう見るか?)ということが知られている.Weexは軽量級のモバイル端末のプラットフォーム間ダイナミックテクノロジーソリューションであり、主にWeb方式を用いてNative性能のAppを開発することに力を入れている.Weexの学習コストはRNより相対的に低く、簡易版のHTML/CSS/JavaScriptとカスタマイズされたコンポーネントとルールを使用して.weファイルを開発し、インタフェースコントロールのレイアウト、スタイル、データバインド、簡単なイベントバインドなどを完了すると言える.Weexはnode.jsのユーティリティを提供し、.weファイルをjs bundleファイルに変換し、クライアントがweex sdkを導入するとjs bundleファイルを解析し、最終的にページレンダリングを完了します.次に簡単にweexを試してみます.
Weex構成
.weファイル開発は実際にはどのエディタでも可能ですが、.weファイルをweex sdkで識別および解析できるjs bundleファイルに変換するNodeを使用して、Weexが提供する.weファイル変換ツールをインストールする必要があります.
.weファイル開発
.weファイルは主に3つの大部分を含み、
Weex構成
.weファイル開発は実際にはどのエディタでも可能ですが、.weファイルをweex sdkで識別および解析できるjs bundleファイルに変換するNodeを使用して、Weexが提供する.weファイル変換ツールをインストールする必要があります.
npm install -g weex-toolkit
主にAndroidエンドの構成を紹介します:1、まずweex sdkを導入して、gradleはweex依存を追加しますcompile 'com.taobao.android:weex_sdk:0.5.1@aar'
2、ネットワーク権限が宣言されていることを確認する<uses-permission android:name="android.permission.INTERNET" />
3、ImageViewのネットワークピクチャ形式weexを構成するには、手動でネットワークピクチャのロードを構成する必要があります.そうしないと、imageviewは正常に動作しません.通常、サードパーティ製のピクチャを使用してライブラリをロードすることができます.ここではPicassoを導入して、ネットワークピクチャのロードを支援します.構成タイミングは、アプリケーションの初期化に設定できます.これにより、グローバルに有効になります.private void initWeex(){
InitConfig.Builder configBuilder = new InitConfig.Builder().setImgAdapter(new IWXImgLoaderAdapter() {
@Override
public void setImage(String url, ImageView view, WXImageQuality quality, WXImageStrategy strategy) {
Picasso.with(getApplicationContext()).load(url).into(view);
}
});
WXSDKEngine.initialize(this, configBuilder.build());
}
以上の構成により,クライアントの基本的なweex環境も構成される..weファイル開発
.weファイルは主に3つの大部分を含み、
,
はコンポーネントスタイルを し、
はコンポーネントdata、events、ビジネスロジック などを し、 にwebエンドの に ている.templateでは{}}を してdata bindingを い、scriptのdataとeventsを するコンポーネントにバインドできます. な は されていませんが、ViewPagerのような ローテーションbannerの を します.<template>
<div style="flex-direction: column;">
<slider class="slider" interval="2000" auto-play="true">
<div class="slider-pages" repeat="{{headline}}" onclick="openUrl(headline[$index].url)">
<image class="image" src="{{image}}">image>
<text class="title">{{title}}text>
div>
<indicator class="indicator" if="shouldShowIndicators()">indicator>
slider>
div>
template>
<style>
.image {
width: 750;
height: 260;
}
.title {
margin-top: 20;
margin-bottom: 20;
text-align: left;
flex: 1;
color: black;
font-size: 35;
}
.slider {
width: 750;
height: 450;
}
.slider-pages {
padding-top: 30;
flex-direction: column;
width: 750;
height: 400;
}
.indicator {
height: 20;
width: 750;
position:absolute;
left: 1;
bottom: 1;
item-color: grey;
item-selectedColor: orange;
item-size: 20;
}
style>
<script>
var weexModule = require('@weex-module/weexModule');
module.exports = {
data: {
headline:[]
},
methods: {
openUrl: function (url) {
weexModule.startActivity(url, function(err){
console.log(err);
});
},
shouldShowIndicators: function(){
return this.headline.length > 1;
}
}
}
script>
styleのデフォルト は750 pxなので、コンポーネント がフルスクリーン の は750と すればよい.バインドonclickイベントは、 には だけでメソッド び しではなく、 するメソッドを たずにパラメータを たずにメソッド を すればよいが、 の でメソッド び しを う は、メソッドの び し、 えばif="shouldShowIndicators()"
を す()を けなければならない.
カスタムモジュール
scriptではカスタムModuleを し,Native と し, なビジネスロジックを する.カスタムModuleを するには、WXSDKEngineのregisterModuleメソッドを して する があります.アプリケーションの に なModuleを するか、 する があるときに なビジネスロジックModuleを することができます.try {
WXSDKEngine.registerModule("weexModule", WeexModule.class);
} catch (WXException e) {
e.printStackTrace();
}
Moduleをカスタマイズする は、メソッドアクセス をpublicと し、@WXmoduleAnno IDを する があります.ここでweexModuleは、Activityのジャンプを に するModuleであり、Activityの をコールバックします. するWeexModuleコードは のとおりです.public class WeexModule extends WXModule {
@WXModuleAnno
public void startActivity(String url, String cb){
Log.d("weex", "========" + url);
boolean error = false;
try {
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
mWXSDKInstance.getContext().startActivity(intent);
} catch (ActivityNotFoundException e) {
error = true;
}
Map result = new HashMap<>(1);
result.put("error", error);
WXBridgeManager.getInstance().callback(mWXSDKInstance.getInstanceId(), cb, result);
}
}
カスタムComponent
Weexは 、 なコンポーネントのみをサポートしています. に じてweex に えば、コンポーネントを にカスタマイズできます.Weexクライアント を する 、サードパーティのピクチャリクエストライブラリPicassoを して、imageviewがurlを ロードできるようにしました. は、 のプロジェクトには な ホイールがあります.NetworkImageViewは、 のライブラリを してApp sizeを するつもりはありませんが、templateではNativeコンポーネントを することはできません.Componentをカスタマイズして な を う があります.たとえば:@Component(lazyload = false)
public class NetworkImageViewComponent extends WXImage {
public WeexComponent(WXSDKInstance instance, WXDomObject dom, WXVContainer parent, boolean isLazy) {
super(instance, dom, parent, isLazy);
}
@Override
protected void initView() {
if (mContext != null) {
mHost = new NetworkImageView(mContext); //
((NetworkImageView) mHost).setScaleType(ImageView.ScaleType.CENTER_CROP);
}
}
@Override
public View getView() {
return super.getView();
}
@WXComponentProp(name = "url")
public void setImageUrl(String url) {
((NetworkImageView) mHost).setImage(url);
}
}
のコードに すように、 、カスタムComponentはinitViewメソッドを き えるだけで、mHostを なオリジナルコンポーネントに き えることができます.@WXComponentProp を して、コンポーネントにカスタム を し、templateでコンポーネントを するときに を すると、 するメソッドを び すことができます. にModuleと に、カスタムComponentもweexに する があり、Application に Componentを したり、 に じてビジネス の きいComponentを したりすることができます.try {
WXSDKEngine.registerComponent("myimageview", NetworkImageViewComponent.class);
} catch (WXException e) {
e.printStackTrace();
}
の により、templateでカスタマイズしたMyImageViewを することができます. に.weファイルを します.<template>
<div style="flex-direction: column;">
<slider class="slider" interval="2000" auto-play="true">
<div class="slider-pages" repeat="{{headline}}" onclick="goWeexSite(headline[$index].url)">
<MyImageView class="image" url="{{image}}">MyImageView>
<text class="title">{{title}}text>
div>
<indicator class="indicator" if="shouldShowIndicators()">indicator>
slider>
div>
template>
ここで すべきは、.weファイルのMyImageViewは、weex ツールで されたjs bundleファイルでtypeが「myimageview」と され、つまり に されるため、Component にはできるだけ keyを するべきである.もちろんjs bundleファイルを で することもできますが、カスタムコンポーネントが いと になります.
Nativeエンドレンダリング
クライアントレンダリングの は にjs bundleファイルを してNativeエンドコンポーネントを することを み、データ はNativeエンドで ネットワーク を することもできるし、scriptでjsを じてweex のネットワーク Module--WXStreamModuleのsendHttp を び してネットワーク を うこともでき、 されたデータはWXBridgeManagerを じてjsエンドにコールバックされる.テストでは、Native で ネットワークリクエストを い、リクエストされたデータをweexにプラグし、weexはrenderレンダリングを い、レンダリングに した にlistviewを し、 に られたnative viewをlistviewに め む.weexレンダリングを び す なコードは のとおりです.JSONObject json = new JSONObject();
json.put("headline", array); //key js , .we data
String template = WXFileUtils.loadFileContent("weex/index.js", getContext());
if (weexLayout == null) {
wxsdkInstance.render("headline", template, null, json.toString(), -1, -2, WXRenderStrategy.APPEND_ASYNC);
} else {
wxsdkInstance.refreshInstance(json.toString());
}
テスト に されるクライアントのローカルの.weファイルから されたjs bundleファイルは、 、 がサービス から き すべきです.なお、1つのWXSDKInstanceインスタンスは1 のページレンダリングのみを し、テンプレートレンダリングページを ロードするには、WXSDKInstanceインスタンスdestroyを newする があります. にデータを するだけでrefreshを すればいいです.また、WXSDKInstance.registerRenderListenerを してレンダリング のリスニングを できます.@Override
public void onViewCreated(WXSDKInstance instance, View view) {
weexLayout = view; // native view
}
@Override
public void onRenderSuccess(WXSDKInstance instance, int width, int height) {
adapter.notifyDataSetChanged(); // listview
}
@Override
public void onRefreshSuccess(WXSDKInstance instance, int width, int height) {
adapter.notifyDataSetChanged(); // listview
}
@Override
public void onException(WXSDKInstance instance, String errCode, String msg) {
Log.d("weex", "=======" + msg);
}
onView Createdは、 のレンダリングに した にコールバックし、native viewを に れ、 りはすべてよく っていて、あなたの む に れて すればいいです.