阿里Weex 实现页面跳转

使用Weex navigator模块

second.vue

<template>
  <div>
    <text style="font-size: 20wx">Hellow World!21</text>
    <image src="local:///weex_logo" style="width: 640px; height: 302px"></image>
    <image src="https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png" style="width: 64px; height: 64px"></image>
    <text style="padding: 32px; background-color: red; font-size: 15wx; color: white" @click="onTextClick">测试跳页.....</text>
  </div>
</template>
<script>
    var navigator = weex.requireModule('navigator')

    export default {
      methods : {
          onTextClick: function () {
              navigator.push({
                  url: 'http://192.168.31.79:8081/dist/three.js',
                  title: '新页面',
                  animated: "true",
                  params: {
                      id: 11111
                  }
              })
          }
      }  
    }
</script>

Three.vue

<template>
    <div style="align-items: center; justify-content: center">
        <text style="font-size: 18wx">这是个新页面</text>
        <text>{{id}}</text>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                id: weex.config.id
            }
        }
    }
</script>

从网络端加载js文件，实现动态更新

Android 端

每个Activity页面打开一个单独的js, 使用原生渲染， 不使用webview加载网页

编译vue文件

使用weex compile 编译vue文件为js文件, 添加-m参数压缩js文件

weex compile src dist -m
封装通用的activity，使用不同的url

借助路由框架，我这里使用的是 ARouter, 也可以使用别的

@Route(path = "/weex/activity")
public class WeexPageActivity extends AppCompatActivity implements IWXRenderListener{

    WXSDKInstance mWXSDKInstance;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.registerRenderListener(this);
        
        String url = getIntent().getStringExtra("url");
        String title = getIntent().getStringExtra("title");
        String params = getIntent().getStringExtra("params");
        
        //设置标题...

        Map<String, Object> options = new HashMap<>();

        JSONObject json = JSON.parseObject(params);
        Set<String> keys = json.keySet();
        for(String key : keys){
            options.put(key, json.getString(key));
        }


        mWXSDKInstance.renderByUrl("com.xy.weex", url, options, null, 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();
        }
    }
}
实现 Seettt 接口， 重写push方法
public class WeexActivityNavBarSetter implements IActivityNavBarSetter {
    @Override
    public boolean push(String s) {
        JSONObject json = JSON.parseObject(s);
        String url = json.getString("url");
        JSONObject params = json.getJSONObject("params");

        if(url.startsWith("http") && url.endsWith(".js")){
            ARouter.getInstance().build("/weex/activity")
                    .withString("url", url)
                    .withString("title", json.getString("title"))
                    .withString("params", JSON.toJSONString(params))
                    .navigation();
            return true;
        }

        return false;
    }

    @Override
    public boolean pop(String s) {
        return false;
    }

    @Override
    public boolean setNavBarRightItem(String s) {
        return false;
    }

    @Override
    public boolean clearNavBarRightItem(String s) {
        return false;
    }

    @Override
    public boolean setNavBarLeftItem(String s) {
        return false;
    }

    @Override
    public boolean clearNavBarLeftItem(String s) {
        return false;
    }

    @Override
    public boolean setNavBarMoreItem(String s) {
        return false;
    }

    @Override
    public boolean clearNavBarMoreItem(String s) {
        return false;
    }

    @Override
    public boolean setNavBarTitle(String s) {
        return false;
    }
}
设置 Setttt 类
public class BaseApplication extends Application {

    @Override
    public void onCreate() {
        super.onCreate();

        ARouter.init(this); // 尽可能早，推荐在Application中初始化

        InitConfig config = new InitConfig.Builder()
                .setImgAdapter(new WeexImageAdapter())
                .build();

        WXSDKEngine.initialize(this, config);
        WXSDKEngine.setActivityNavBarSetter(new WeexActivityNavBarSetter());
    }
}

好了， 可以运行程序看看效果，可以在push方法中打断点，查看参数值，
可以自行设定参数，处理各种情况，比如右上角添加菜单，拦截back返回事件，更换标题颜色等

Web端

使用路由跳转页面

变更启动页入口

entry.js

/*global Vue*/

/* weex initialized here, please do not move this line */
const router = require('./router');
const App = require('@/index.vue');
/* eslint-disable no-new */
new Vue(Vue.util.extend({el: '#root', router}, App));
router.push('/second');
定义路由

router.js

/*global Vue*/
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Second from '@/second.vue'
import Three from '@/three.vue'

Vue.use(Router)

module.exports = new Router({
  routes: [
    {path: '/', name: 'HelloWorld', component: HelloWorld},
    {path: '/second', name: 'Second', component: Second},
    {path: '/three', name: 'Three', component: Three}
  ]
});

重新运行 npm start 命令, 点击按钮试试效果, 会发现可以看到three.js文件内容，并没有渲染，这不是我想要的结果， 接着修改下second.vue里的onTextClick 方法

onTextClick: function () {
    if(weex.config.env.platform == 'Web'){
        console.log(this.$router);
        this.$router.push('/three')
    }else{
        navigator.push({
            url: 'http://192.168.31.79:8081/dist/second.js',
            title: '新页面',
            animated: "true",
            params: {
              id: 11111
            }
        })
    }
 }

等编译完成，重新点击按钮看看，会发现达到了我想要的结果，渲染出three.vue里的内容了, 接下来看下使用vue router 怎么传递参数

    //this.$router.push('/three')
    this.$router.push({name:'Three',params: {id : 11111} })

修改three.vue

<template>
    <div style="align-items: center; justify-content: center">
        <text style="font-size: 18wx">这是个新页面</text>
        <text>{{id}}</text>
        <text>{{ids}}</text>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                id: weex.config.id,
                ids : this.$route.params
            }
        }
    }
</script>

刷新看看效果，参数也拿到了

至此，就实现了 Web 端 和 Android 端的页面跳转， 可是并不完美，不同的终端需要加判断才能区分，接下来继续改进，统一写法，实现相同的效果

扩展 Web 端 weex module

在入口文件entry.js中注册 webNavigator

/*global Vue*/

/* weex initialized here, please do not move this line */

weex.registerModule('webNavigator', {
    push (params) {
        // 打印出 this, 观察 $router在那，获取
        this._root['wx-root-0'].$router.push(params);
    }
})

const router = require('./router');
const App = require('@/index.vue');
/* eslint-disable no-new */
new Vue(Vue.util.extend({el: '#root', router}, App));
router.push('/second');

修改 second.vue, 引用webNavigator, push参数中添加name

<template>
  <div>
    <text style="font-size: 20wx">Hellow World!21</text>
    <image src="local:///weex_logo" style="width: 640px; height: 302px"></image>
    <image src="https://gw.alicdn.com/tfs/TB1yopEdgoQMeJjy1XaXXcSsFXa-640-302.png" style="width: 64px; height: 64px"></image>
    <text style="padding: 32px; background-color: deepskyblue; font-size: 18wx; color: white" @click="onTextClick">测试跳页.....</text>
  </div>
</template>
<script>
    //var navigator = weex.requireModule('navigator')
    var navigator = weex.requireModule('webNavigator')

    export default {
      methods : {
          onTextClick: function () {
              navigator.push({
                  url: 'http://192.168.31.79:8081/dist/second.js',
                  name: 'Three',
                  title: '新页面',
                  animated: "true",
                  params: {
                      id: 11111
                  }
              })
          }
      }
    }
</script>

重新运行，查看效果, 发现页面已跳转，参数也传过去了, 离目标更进了一步, 不需要判断是否web环境了，使用和Android端相同的写法， 继续改进

使用loader替换 navigator 为 webNavigator

修改second.vue, 把webNavigator改为navigator

var navigator = weex.requireModule('navigator')
//var navigator = weex.requireModule('webNavigator')

自定义 web-h5-navigator-loader.js

module.exports = function (source) {

    source = source.replace(/requireModule\('navigator'\)/g, `requireModule('navigatorModule')`)
    //替换  weex.config 为 this.$route.params, web 和 android 使用相同的方式获取参数
    source = source.replace(/weex.config./g, 'this.$route.params.');
    //不替换 weex.config.env
    source = source.replace(/this.\$route.params.env/g, 'weex.config.env');
    return source;
}
配置loader

config/webpack.common.conf.js

在webConfig的module下添加代码，引入新建的自定义loader

module: {
    rules: [
        ......, //原有的配置不变
        {
           test: /\.vue$/,
           use: [
               {
                   loader: path.resolve('loaders/web-h5-navigator-loader.js'),
               }
          ]
       }
    ]
}

修改three.vue

<template>
    <div style="align-items: center; justify-content: center">
        <text style="font-size: 18wx">这是个新页面</text>
        <text>{{id}}</text>
        <text>{{env}}</text>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                id: weex.config.id,
                env: weex.config.env
            }
        }
    }
</script>

重新运行，查看下效果，和Android端同样的写法，相同的效果，只是在navigator.push()参数中多加了个name, 这个也可以继续改进，今天就到这了，写的太累了
因为使用this.$route.params获取参数，data 不能使用()=> 这种写法，会报异常

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 200,302评论 5赞 470
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 84,232评论 2赞 377
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 147,337评论 0赞 332
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 53,977评论 1赞 272
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 62,920评论 5赞 360
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,194评论 1赞 277
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,638评论 3赞 390
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,319评论 0赞 254
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,455评论 1赞 294
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,379评论 2赞 317
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,426评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,106评论 3赞 315
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,696评论 3赞 303
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,786评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,996评论 1赞 255
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,467评论 2赞 346
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,043评论 2赞 341

推荐阅读更多精彩内容