Weex中解决方案

760 阅读3分钟

Android

Android如何给Weex传递事件?

                    HashMap<String,Object> hashMap = new HashMap();
                    hashMap.put("seatNum",tableNo);
                    fireEvent("onSelectedSeat", hashMap);

Weex页面

上拉加载,下拉刷新

<template>
  <list class="list"
        offset-accuracy="100"
        show-scrollbar="false"
        loadmoreoffset="10"
        @loadmore="loadmore">
    <refresh
      v-if="pageRefresh"
      class="refresh">
      <hdl-indicator
        ref="hdlIndicator"
        @onrefresh="onrefresh"
      />
    </refresh>
    <cell v-for="(num,index) in lists" :key="index" class="cell">
      <div class="panel">
        <text class="text">{{ num }}</text>
      </div>
    </cell>
  </list>
</template>

<script>
const modal = weex.requireModule('modal')
export default {
  data () {
    return {
      pageRefresh: true,
      lists: ['A', 'B', 'C', 'D', 'E']
    }
  },
  methods: {
    loadmore () {
      modal.toast({
        message: '触发 loadmore 事件'
      })
      this.lists = this.lists.concat(this.lists)
    },
    onrefresh (event) {
      modal.toast({ message: '下拉刷新' })
      setTimeout(e => {
        this.pageRefresh = false
      }, 2000)
    }
  }
}
</script>

<style scoped>
  .panel {
    width: 600px;
    height: 300px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
  .text {
    font-size: 88px;
    text-align: center;
    color: #41B883;
  }
</style>

注意:

在公众号页面,下拉刷新有点问题,将下拉刷新去掉就可以了。

weex页面如何向Android发送一个事件

weex端发送事件如下
       this.$refs.map.setSelectedAnnotationWithStoreInfo({
		latitude: res.hdlStoreLatitude, // 纬度
		longitude: res.hdlStoreLongitude, // 经度
		address: data.address,
		name: data.storeName //店铺名称
	})
Android端接收
    @JSMethod
    public void setSelectedAnnotationWithStoreInfo(JSONObject jsonObject) {

    }
官网上的解释
https://weex.apache.org/zh/guide/extend/extend-android.html#component-%E6%89%A9%E5%B1%95

list的上拉加载效果

注意:要想实现上拉加载效果,需要配置2个地方

1、loadmore事件

2、loadmoreoffset:官网上说如果你的loadmore事件没有触发,很有可能loadmoreoffset这个值没有设置,设置为一个>0的值就好。

<template>
  <list class="list"
        offset-accuracy="100"
        show-scrollbar="false"
        loadmoreoffset="10"
        @loadmore="loadmore">
    <cell v-for="num in lists" class="cell">
      <div class="panel">
        <text class="text">{{ num }}</text>
      </div>
    </cell>
  </list>
</template>

<script>
const modal = weex.requireModule('modal')
export default {
  data () {
    return {
      lists: ['A', 'B', 'C', 'D', 'E']
    }
  },
  methods: {
    loadmore () {
      modal.toast({
        message: '触发 loadmore 事件'
      })
      this.lists = this.lists.concat(this.lists)
    }
  }
}
</script>

<style scoped>
  .panel {
    width: 600px;
    height: 300px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
  .text {
    font-size: 88px;
    text-align: center;
    color: #41B883;
  }
</style>

WeexBug:list设置样式之后,在Android和IOS上的表现不同

现象

list的父容器是全屏的,然后list设置了如下的样式,理论上它会为沾满全屏,但是最后一条数据居然没有显示全。

position: absolute;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;

图示

解决办法

1、在list的最后增加一个空cell,空cell的高度设置为100px,这样在Android和IOS上都可以显示完全了。

2、由于list的外层包了一个div,将div去掉,问题解决。

Weex页面中如何获得页面高度的问题

import { Utils } from 'weex-ui'
const pageHeight = Utils.env.getPageHeight()

这个方法在我们的项目中有一些问题

IOS通过上面的方法,获得页面的高度是屏幕的高度 - 导航栏的高度 - 标题栏的高度

我们通过给页面上盖一个div,然后设置div的高度,这个高度就是获取IOS的高度,通过下面的实验可以得出:

<div class="test" />
.test {
  position: fixed;
  left: 0px;
  top: 0px;
  right:0px;
  bottom: 0px;
  height: 1202px;
  background-color: sandybrown;
}

效果图

然后我们在Andoir手机上获得页面高度,然后设置给test,然后看看页面效果

为什么会出现这样的情况呢?

由于我们项目里面,没有使用系统标题栏,而是自定义的标题栏,所以在使用上面的方法计算的时候,计算页面高度的时候,回将标题栏的高度也加入。

解决办法:

在IOS手机上,使用上面的方法获取页面的高度。

但是在Android手机上,我们使用上面的方法获取到页面的高度,然后在减去标题栏的高度。

Weex中实现生成二维码

要想实现生成二维码,必须要借助原生去实现,Android端必须借助Zxing去实现,必须通过Module去实现。

const CodeGenerator = weex.requireModule('xcode-generator')

indicator组件显示与隐藏

需求和现象:

页面上有Silder组件和indicator组件,当想做长截图功能的时候,需要隐藏indicator组件,我们使用的办法是通过v-ifv-show去控制indicator的显示或者隐藏,但是没有生效。

解决办法:

然后我们通过修改样式来控制indicator的显示或者隐藏,通过修改item-size的值为0或或者16px来显示indicator。

扩展想法:

可以通过设置indicator的 width 来设置indicator的显示或者隐藏。(这个方法没有试验)

组件

text

1、text如何进行换行?

给text设置宽度,就可以了。