Weex初体验

Posted 2021-04-29 民间闲散程序员

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Weex初体验相关的知识，希望对你有一定的参考价值。

WEEX踩坑

关于环境的配置可以参照网上的教程：
weex 配置

如果只开发native，其实不安装也可以，这个安装主要是为了编写vue,we文件并将该文件转成js

weex 使用规则

node.js

如果node.js的版本不正确，安装weex-toolkit会有问题。
node版本需要大于6.0
可以用一下方法升级：

node -v//查看版本
sudo npm cache clean -f//清除node.js的cache
sudo npm install -g n//安装n
sudo n stable //安装最新稳定版本
sudo n latest//安装最新版本
sudo n 6.3.1//指定版本

weex-toolkit

这个尽量不要使用cnpm我用cnpm配置的一直有问题.
如果weex 运行不了

 npm uninstall -g weex-toolkit

卸载一下
使用这个命令安装

 npm config set registry https://registry.npm.taobao.org

npm install -g weex-toolkit

Vue packages version mismatch

可以用如下命令进行修复：

weex xbind repair toolkit-repair
weex repair

Error: Cannot find module ‘webpack’

这个可能是没有安装，也可能是安装了多个，可以根据情况卸载

sudo npm uninstall webpack -g

安装：

 npm i -g webpack

或者修改环境变量

export NODE_PATH="/usr/local/lib/node_modules"

webpack实际上是执行了默认的webpack.config.js配置文件。
webpack.config.js 引入webpack和weex-loader，entry属性是表示入口文件，output表示输出文件，默认输出到dist文件夹

we转js

sudo weex hello.we

安装weex-loader

这个对于新版本是需要必须安装的，可以将we转成js
可以这样理解，weex-toolkit是将js文件部署到服务器所必须的，也是本地调试所必须的
weex-loader是做文件转换的

npm install weex-loader babel-loader --save

工程初始化

weex init xxxxx

工程下的package.json

{
  "name": "Second",
  "description": "Second",
  "version": "0.1.0",
  "private": true,
  "main": "index.js",
  "keywords": [
    "weex",
    "vue"
  ],
  "scripts": {
    "build": "webpack",
    "dev": "webpack --watch",
    "serve": "node build/init.js && serve -p 8080",
    "debug": "weex-devtool"
  },
  "dependencies": {
    "vue": "^2.1.8",
    "vue-router": "^2.1.1",
    "vuex": "^2.1.1",
    "vuex-router-sync": "^4.0.1",
    "weex-vue-render": "^0.11.2"
  },
  "devDependencies": {
    "babel-core": "^6.20.0",
    "babel-loader": "^6.2.9",
    "babel-preset-es2015": "^6.18.0",
    "css-loader": "^0.26.1",
    "ip": "^1.1.4",
    "serve": "^1.4.0",
    "vue-loader": "^10.0.2",
    "vue-template-compiler": "^2.1.8",
    "webpack": "^1.14.0",
    "weex-devtool": "^0.2.64",
    "weex-loader": "^0.4.1",
    "weex-vue-loader": "^0.2.5"
  }
}

其中scripts对应的是weex run dev，weex run serve等命令的配置

如果执行命令出问题，可以看看npm list有没有没安装的东西
执行npm install执行安装

Weex和React Native的异同

相同点

都采用Web的开发模式，使用JS开发；
都可以直接在Chrome中调试JS代码；
都支持跨平台的开发；
都可以实现hot reload，边更新代码边查看效果；
不同点
环境搭建，工程建立Weex都要简单的多
weex->vue React Native->React
react模板JSX学习使用有一定的成本 vue更接近常用的web开发方式，模板就是普通的html，数据绑定使用mustache风格，样式直接使用css
性能比对

android

让自己的工程进行对应的依赖:

  compile 'com.android.support:appcompat-v7:25.3.1'
    compile 'com.android.support.constraint:constraint-layout:1.0.2'
    compile 'com.android.support:recyclerview-v7:25.3.1'
    compile 'com.android.support:support-v4:25.3.1'
    compile 'com.alibaba:fastjson:1.1.45'
    compile 'com.taobao.android:weex_sdk:0.10.0@aar'
    compile 'com.android.support:design:25.3.1'

minSDK要设置成14，也就是android 4.0

修改Application

public class App extends Application{
    @Override
    public void onCreate() {
        super.onCreate();
        InitConfig config = new InitConfig.Builder().setImgAdapter(new ImageAdapter()).build();
        WXSDKEngine.initialize(this, config);

    }
}

注意这里要把application放到AndroidManifest中去（添加网络权限）

 <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:name=".App"
        android:supportsRtl="true"
        android:theme="@style/AppTheme" >
        <activity android:name=".MainActivity" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>

在Activity中实现

IWXRenderListener：

  @Override
    public void onViewCreated(WXSDKInstance instance, View view) {
        setContentView(view);//加载成功的回调，将js转成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();
        Log.e("xxxxxx ","mWXSDKInstance="+mWXSDKInstance);
        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();
        }
    }

然后将js文件放到assets中去，比如文件名为hello.js
则我们可以，按照如下方法进行加载：

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("hello.js", this), null, null, WXRenderStrategy.APPEND_ASYNC);

    }

运行即可显示界面。

以上是关于Weex初体验的主要内容，如果未能解决你的问题，请参考以下文章