I am planning to use Weex for a new mobile project, but I have some doubts about page jumps. There are several existing solutions: Android only has one Activity, and the page jump logic is implemented through vue-router. Each page is an Activity, and each Activity loads its own bundle...

android - Weex page jump solution selection-PHP Chinese Network Q&A

2 answers

Votes: 0 Votes: 0

Q&A

android - Weex page jump solution selection

高洛峰 2017-07-03 11:41:51 Views 1562

Android

I am going to use Weex to do a new mobile project, but I have some doubts about page jumps. There are several options available:

Android has only one Activity, and the page jump logic is implemented through vue-router.
Each page is an Activity, each Activity loads its own bundle.js file, and data is transmitted through the storage module.
Page jump is achieved through the navigator module.

The first one, I feel that after using vue-router, the interface is very stiff and the effect is not good.
The second one is just my own imagination. I feel that the interaction will be better.
The third type, I can’t use it directly, 囧...it seems that the packaged js file must be remote, right?

I don’t know if there is a good solution for weex to achieve page jump elegantly? What do everyone use to jump to Weex pages?

Your Answer

submit

2 answers

You can refer to
http://www.jianshu.com/p/497f...

2017-07-03 11:43:51

submit

I use the third one: var params = {'url':nextUrl,'animated':'true'} Just replace nextUrl with the address of your other js file. You don't need a remote address, just a local address.

<template>
  <p class="p">
    <text class="text" onclick="onItemClick">click me! {{message}}</text>
  </p>
</template>
<script>
  var navigator = require('@weex-module/navigator')
  var nextUrl = 'http://dotwe.org/raw/dist/6cd1703a45d7b2752cf05303069ce881.js'
  module.exports ={
    data:{
      message:''
    },
    methods:{
      onItemClick:function(e){
        var params = {'url':nextUrl,'animated':'true'}
        navigator.push(params, function(e) {
          console.log('i am the callback.')
        });
      }
    }
  }
</script>
<style>
  .p {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 750;
    height: 90;
    padding-left:30;
    padding-right:30;
    border-bottom-width: 1;
    border-style: solid;
    border-color: #dddddd;
  }
  .text{
    width: 750;
    height: 90;
  }
</style>