1. Teach you how to install the Weex environment

Weex is a branch of VUE and a front-end development framework. The environment configuration includes the following parts:

  • The Node installation
  • Configuring Taobao Mirror
  • Install weex – toolkit
  • Install and hack WebStorm
  • WebStorm Weex plugin support

Attached: Completely uninstall the Node method

Mac version: document links: blog.csdn.net/tan915730/a…

The Windows version: document links: www.cnblogs.com/fighxp/p/74…

1. Install Node

A) Install Node. You are advised to download the node from the official website and control the version yourself. You can also use Homebrew to install node on the official website: nodejs.org/zh-cn/ for Mac

B) Configure environment variables for the Windows version. The MAC version is omitted

C) Check whether the Node is successfully installed

  node -v
Copy the code

2. Configure Taobao mirror

NPM install - g CNPM NPM - registry=https://registry.npm.taobao.org - v check installation is successfulCopy the code

3. Install WEEX-Toolkit

CNPM install -g weex -Toolkit WEEx -v Check the installationCopy the code

4. WebStorm installation (MAC version)

Download website: www.jetbrains.com/webstorm/

Detailed activation document: www.cnblogs.com/shenlaiyaos…

A) File installation (download from official website)

B) Host configuration

Go to the /etc/hosts folder to find the hosts file, open the text and add 0.0.0.0 account.jetbrains.com at the end

C) Activation code activation

Get the activation code: idea.lanyus.com/

5. WebStorm Installation (Windows version)

Same as the MAC version, only the host configuration is different (search online, there are many)

D) WebStorm Weex support

Install the Weex plug-in

2. Initialize the WEEX project

A) Using the Weex command to initialize the project:

Weex create + file nameCopy the code

1, Select WEEx web render (weex web render)? 1.0.17 Current: latest features 0.12.17 LTS: recommended for most users There are 4 options. Select the first "stage-0" as recommended. All ES6 syntax is supported. Whether to use the VUE route to route the management interface? I did not select the route as recommended. Vue-router is an official route and I personally recommend using it. 4, Use ESLint to lint your code? Whether to use ESLint to manage code, ESLint is a code style management tool that is used to unify the code style without affecting the overall operation. It is also for multi-user collaboration. 5, Pick an ESLint preset (Use arrow keys), Standard writing vue project code style (https://github.com/feross/standard) : js Standard style reality (https://github.com/airbnb/javascript) : 6, Set up unit tests (Y/n)? 7, Should we run 'NPM install' for you after the project has been created? Do I need to run "NPM Install" for you after the project is created? Yes,use NPM yes,use yarn no,I will handle that myselfCopy the code

B) WebStorm opens the project and runs:

Weex advantages: Visualization If the NPM install option is not selected during project initialization, you need to manually perform the following operations: Terminal: NPM install Terminal: NPM start Commond + C or Control + CCopy the code

Weex integration into Android applications

The official document: weex.apache.org/zh/guide/de…

A) Add dependencies:

dependencies {
    implementation 'com. Tbruyelle. Rxpermissions2: rxpermissions: 0.9.4 @ aar'
    implementation 'com. Making. Bumptech. Glide: glide: 3.7.0'
    implementation 'com. Journeyapps: zxing - android - embedded: 3.5.0'
    implementation 'the IO. Reactivex. Rxjava2: rxjava: 2.1.3'// The following is the official document needs implementation'com. Android. Support: appcompat - v7:28.0.0'
    implementation 'com. Android. Support: support - v4:28.0.0'
    implementation 'com. Android. Support: recyclerview - v7:28.0.0'
    // weex sdk and fastjson
    implementation 'com. Taobao. Android: weex_sdk: 0.17.0 @ aar'
    implementation 'com. Alibaba: fastjson: 1.1.46. Android'}Copy the code

B) Declare permissions in androidmanifest.xml

// network <uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> // SD card read and write <uses-permission Android :name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
Copy the code

C) Initialize the SDK

SetImgAdapter (new FrescoImageAdapter()) // Network library interface .setHttpAdapter(new InterceptWXHttpAdapter()) .build(); WXSDKEngine.initialize(applicationContext,config);Copy the code

D) Create WXSDKInstance

IWXRenderListener interface implementation, WEEX life cycle Settings see the documentation open remote WEEX:

String bundleUrl = "Http://10.253.111.243:8085/dist/index.js? Wsport = 8086 & _wx_tpl = http://10.253.111.243:8085/dist/index.js";
mWXSDKInstance.renderByUrl("WXSample", bundleUrl, null, null, WXRenderStrategy.APPEND_ASYNC);
Copy the code

Open local WEEx:

mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("index.js", MainActivity.this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
Copy the code

4. Real-time Run app is no longer needed

A) Manually refresh

if(null ! = mWXSDKInstance) { mWXSDKInstance.destroy(); mWXSDKInstance = null; } mWXSDKInstance = new WXSDKInstance(MainActivity.this); mWXSDKInstance.registerRenderListener(this); (WeeX loading logic)Copy the code

B) Automatic refresh (from weeX official Demo)

public class MainActivity extends AppCompatActivity implements IWXRenderListener, Handler.Callback {
   Handler mWXHandler;
   String bundleUrl =        "Http://10.253.101.243:8081/dist/index.js? Wsport = 8082 & _wx_tpl = http://10.253.101.243:8081/dist/index.js";

   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
    
      mUri = Uri.parse(bundleUrl);
      mWXHandler = new Handler(this);
      HotRefreshManager.getInstance().setHandler(mWXHandler);
    }
    /**
     * hot refresh
     */
   private void startHotRefresh() {
      try {
        URL url = new URL(mUri.toString());
        String host = url.getHost();
        String query = url.getQuery();
        String wsport = TextUtils.isEmpty(query)? "8082" : getUrlParam("wsport", query);
        String wsUrl = "ws://" + host + ":" + (wsport.equals("")?"8082" : wsport) ;
        mWXHandler.obtainMessage(Constants.HOT_REFRESH_CONNECT, 0, 0, wsUrl).sendToTarget();
      } catch (MalformedURLException e) {
        e.printStackTrace();
      }
   }
      private String getUrlParam(String key, String queryString) {
      String regex = "[? | &]?" + key + "= ([^ &] +)";
      Pattern p = Pattern.compile(regex);
      Matcher matcher = p.matcher(queryString);
      if (matcher.find()) {
          return matcher.group(1);
      } else {
          return "";
      }
  }

  @Override
  public boolean handleMessage(Message msg) {
    switch (msg.what) {
        case Constants.HOT_REFRESH_CONNECT:
            HotRefreshManager.getInstance().connect(msg.obj.toString());
            break;
        case Constants.HOT_REFRESH_DISCONNECT:
            HotRefreshManager.getInstance().disConnect();
            break;
        caseConstants.HOT_REFRESH_REFRESH: // Refresh logical loadWeex(isLoadUrl);break;
        case Constants.HOT_REFRESH_CONNECT_ERROR:
            Toast.makeText(this, "hot refresh connect error!", Toast.LENGTH_SHORT).show();
            break;
        default:
            break;
    }
    return false; }}Copy the code