Weex introduction is enough

1: Vue.js understanding

Vue.js environment configuration

(1) Install nodejs

(2) Install webpack: NPM install webpack - G

(3) Install Vue cli scaffold: NPM install Vue cli - G

Vue.js project creation

(1) Vue init webpack Vue hello (Vue Hello is the project name)

(2)cd vue-hello

(3)npm install

(4) npm run dev or npm start

Vuejs project structure

2: Getting started with Weex

Weex environment configuration

(1) Global installation of weex Toolkit: NPM install weex Toolkit - G

(2) Configure the weex installation path to the system environment variable: C: \ program files \ nodejs \ node_

Weex - V, the version displayed indicates that the installation is successful:

C:\Users\jiuya>weex -v
   v1.2.9
 - weexpack : v1.1.5
 - weex-builder : v0.3.14
 - weex-previewer : v1.4.6

Weex create project

(1) Create a weex empty project: weex create weex custom extensions (weex custom extensions is the project name)

(2) Go to the project root directory: CD weex custom extensions

(3) Installation depends on the third-party js package: npm install

(4) Start local web service, browser preview rendering effect: npm start

(5) Add Android or iOS platform: weex platform add android or weex platform add ios

(6) Run: weex run android


Weex debug debugging

(1) Command: weex debug, the browser automatically opens the page to be debugged.

(2) Use the weex playground app to scan the QR code. After the scan is successful, the browser will automatically jump to the following page, click the QR code in the box below, and use the weex playground app to scan. Then you can start debugging the page to be debugged.

(3) After the two digit code in the scan box is successfully scanned, you will see the following page.

Weex extension

module extension

(1) Android Studio creates Android Project and adds related dependencies

(2) New PhoneInfoModule.java, integrated from WxModule

public class PhoneInfoModule extends WXModule {

    /**
    * Get Phone related information and call back to weex
    */
    @JSMethod(uiThread = false)
    public void getPhoneInfo(JSCallback callback) {   // JSCallback is the API in the WeexSDK
        Map<String, String> infos = new HashMap<>();
        infos.put("board", Build.BOARD);
        infos.put("brand", Build.BRAND);
        infos.put("device", Build.DEVICE);
        infos.put("model", Build.MODEL);
        callback.invoke(infos);
    }

    @JSMethod(uiThread = true)
    public void printLog() {
        Toast.makeText(mWXSDKInstance.getContext(), "item clicked", Toast.LENGTH_SHORT).show();
    }

}

Extended component

public class RichText extends WXComponent<TextView> {

    public RichText(WXSDKInstance instance, WXDomObject dom, WXVContainer parent) {
        super(instance, dom, parent);
    }

    @Override
    protected TextView initComponentHostView(@NonNull Context context) {
        TextView textView = new TextView(context);
        textView.setTextSize(20);
        return textView;
    }

    @WXComponentProp(name = "tel")
    public void setTel(String number) {
        SpannableString spannableString = new SpannableString("tel:" + number);
        ImageSpan imageSpan = new ImageSpan(getContext(), R.mipmap.phone);
        spannableString.setSpan(imageSpan, 0, 4, Spanned.SPAN_INCLUSIVE_INCLUSIVE);
        getHostView().setText(spannableString);
    }
}

(3) Register in Application

public class WXApplication extends Application {

  private static final String TAG = "WXApplication";

  @Override
  public void onCreate() {
    super.onCreate();
    InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
    WXSDKEngine.initialize(this, config);
    String packageName = getPackageName();
    Log.d(TAG, "onCreate: packageName  =" + packageName);
    try {
      // Register extension module  
      WXSDKEngine.registerModule("phoneInfo", PhoneInfoModule.class);
      // Register extension component  
      WXSDKEngine.registerComponent("richText", RichText.class, false);
    } catch (WXException e) {
      e.printStackTrace();
    }
  }
}

(4) Reference the customized module and component in vue

<template>
    <div class="wrapper">
        <image :src="logo" class="logo" @click="print"/>
        <text class="greeting" @click="getPhoneInfo">The environment is ready!</text>
        <!--extend component-->
        <richText tel="10086" style="width:200px;height:100px"></richText>

        <HelloWorld/>
    </div>
</template>

<script>
    import HelloWorld from './components/HelloWorld.vue'

    const modal = weex.requireModule('modal');
    const phoneInfo = weex.requireModule('phoneInfo');

    export default {
        name: 'App',
        components: {
            HelloWorld
        },
        data() {
            return {
                logo: 'https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png'
            }
        },
        methods: {
            // Call printLog() in PhoneInfoModule
            print() {
                phoneInfo.printLog();
            },
            // Call getPhoneInfo() in PhoneInfoModule and call back to weex
            getPhoneInfo() {
                phoneInfo.getPhoneInfo(function (e) {
                    modal.alert({
                        message: JSON.stringify(e),
                        duration: 0.3
                    })
                });
            }
        }
    }
</script>

<style scoped>
    .wrapper {
        justify-content: center;
        align-items: center;
    }

    .logo {
        width: 424px;
        height: 200px;
    }

    .greeting {
        text-align: center;
        margin-top: 70px;
        font-size: 50px;
        color: #41B883;
    }

</style>

(5) npm run build compiles vue and copies the generated js to the assets directory of Android Studio

Operation result:

Tags: Vue npm Android Webpack

Posted on Wed, 01 Apr 2020 23:06:11 -0700 by villas