weex框架使用

ZT_KEBEI

已于 2024-04-16 14:05:22 修改

阅读量2.1k

点赞数

分类专栏： weex学习总结文章标签： javascript 前端 weex

于 2022-02-24 16:06:26 首次发布

本文链接：https://blog.youkuaiyun.com/ZT_KEBEI/article/details/123113923

版权

weex学习总结专栏收录该内容

1 篇文章

订阅专栏

项目搭建：

全局安装
npm i -g weex-toolkit@beta

weex create awesome-project

1.modal模块

//modal模块
var modal = weex.requireModule('modal')
1.modal.toast(options)   
例：
modal.toast({
    message: 'This is a toast',  //展示内容
    duration: 0.3   //展示时间
})

2.modal.alert()弹窗
例：
modal.alert({
    message:'你的密码输入有误,请重新输入',
    okTitle:'是的,谢谢'
},res=>{   //回调 注意：无参数
                
    }
如果你使用默认的okTitle你可以这样写
modal.alert({message:'你的密码输入有误'})


modal.confirm(options,callback) //有确定或取消得弹出
例：
modal.confirm({
    message:'你是美女吗',
    okTitle:"是的",
    cancelTitle:'差一点点'
},res=>{
    if(res=="是的"){  //回调函数的参数 result 是确定按钮上的文字信息字符串
 
    }else if (res=="差一点点"){
 
    }
})
如果你使用系统默认的okTitle和cancelTtitle你可以这样写
 3.modal.confirm({
    message:'你是美女吗'
},res=>{
    if(res=="Ok"){
 
    }else if (res=="Cancle"){
 
    }
})


//带有输入框得弹框
4.modal.prompt({
    message:'请输入你的昵称',
    okTitle:'确定',
    cancelTitle:'取消'
    },res=>{
        if(res.result=='确定'){
 
        }else if (res.result=='取消'){
 
        }
    })

2.web

//可以使用web标签引入  
<web class="page" src="http://baidu.com" ref='web'></web>
注意：必须设置宽高 

控制前进 后退 刷新
const webview = weex.requireModule('webview')
 后退 webview.goBack(this.$refs.web)
 刷新 webview.reload(this.$refs.web)

支持的事件：
appear disappear 同时支持：
页面开始加载事件(pagestart)
页面加载完成事件(pagefinish)
页面失败事件(error)

3.image

<image ref="poster" @load="onImageLoad" placeholder="" src="http://ww2.sinaimg.cn/large/006tKfTcgy1fez04i56w5j31hc0kuwhz.jpg" class="image" resize='stretch'></image>
//placeholder:占位符路径
注意：必须设置宽高
仅支持网络图片 
resize属性：stretch(默认值) contain cover

//save方法 保存图片到相册
const $image = this.$refs.poster
$image.save(result => {
  if (result.success) {
    //成功回调
  } else {
    console.log(result.errorDesc)
    // 失败回调
  }
})
//load 图片加载事件 
 onImageLoad (event) {
      if (event.success) {
        // Do something to hanlde success
      }
    }

4.list列表

注意：不允许同方向的list和scroller组件相互嵌套
//子组件 cell  
       header (可以吸附到顶部)
       refresh 下拉刷新      @refresh  下拉松手触发     @pullingdown  下拉行为触发
       loading 上拉加载      @loading

事件：
   laodmore:列表内容超出屏幕 下拉到底部触发的事件  @loadmore  需要设置loadmoreoffset属性>0
   重置loadmore   this.$refs["list"].resetLoadmore(); 
  
示例：
<template>
<div class="page">
    <list class="list" ref="list" loadmoreoffset="20">
     <refresh @pullingdown="pullingdown" :display="showLoading" @refresh="onrefresh" class="refresh">
   <text>下拉刷新</text>
    </refresh>
        <cell class="cell" v-for='(item,index) in list' :key="index">
            <image :src="item.src" class="poster"></image>
            <text class="title">{{item.title}}</text>
        </cell>
         <loading @loading="onloading" :display="showLoading" class="loading">
            <loading-indicator class="indicator"></loading-indicator>
            <text>加载更多</text>
          </loading>
    </list>
</div>
</template>

<script>
export default{
    data(){
        return{
            list:[
            {src:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1493829745671&di=68c663b03f829420e4f37c35d95d42b6&imgtype=0&src=http%3A%2F%2Fimg2.downza.cn%2Fapple%2Fipad%2Fyyyl-332%2F2016-04-22%2F0a60729df8603efa34de212ec67564ab.png',title:"优酷视频"},
            {src:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=228407861,2241632908&fm=23&gp=0.jpg',title:'爱奇艺'},
            {src:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3665454193,1922651319&fm=23&gp=0.jpg',title:'腾讯视频'},
            {src:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2924906978,3545987802&fm=23&gp=0.jpg',title:'土豆视频'},
            {src:'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1502096116,2161980529&fm=23&gp=0.jpg',title:'芒果TV'},
            ]
        }
    }
}
</script>
<style>
.poster{
    width:750px;
    height: 300px;  
}
.title{
    position:absolute;
    bottom: 20px;
    left:0px;
    right:0px;
    height: 88px;
    color:white;
    line-height: 88px;
    text-align: center;
    font-size: 40px;
    background-color: rgba(0,0,0,0.5);
}
</style>

5.scroller列表

//可以使用任意子组件 除了cell (建议使用list列表，scroller可能会造成苹果机型无法下拉)
基本同list列表组件
横向滚动  使用 scroll-direction="horizontal" 和 flex-direction: row;
<scroller class="scroller"  scroll-direction="horizontal" show-scrollbar="false" style="flex-direction: row;overflow-x: scroll;overflow-y: hidden;" ></scroller>

属性：show-scrollbar  是否显示滚动条  布尔值

6.slider轮播图


属性：interval:轮播时长        number(毫秒)
     auto-play:自动轮播        true/false
子组件：
indicator 指示器(小圆点) :
item-color这是指示器没被选中的颜色
item-selected-color设置指示器被选中的颜色
item-size指示器的圆点大小

检测轮播到哪一张图  可以使用 @change事件   有一个event参数（默认）
<template>
<div>
    <slider class="slider" interval="3000" auto-play="true">
      <image :src="src" v-for='(src,index) in images' @click='click(index)' class="image"> </image>
         <indicator class="indicator"></indicator>
    </slider>
</div>
</template>
<script>
export default{
    data(){
        return{
            images:['https://gd2.alicdn.com/bao/uploaded/i2/T14H1LFwBcXXXXXXXX_!!0-item_pic.jpg',
                    "https://gd1.alicdn.com/bao/uploaded/i1/TB1PXJCJFXXXXciXFXXXXXXXXXX_!!0-item_pic.jpg",
                    "https://gd3.alicdn.com/bao/uploaded/i3/TB1x6hYLXXXXXazXVXXXXXXXXXX_!!0-item_pic.jpg" ]
            
        }
    }
}
</script>
<style>
.slider{
    width:750px;
    height: 300px;
    background-color: green;
}
.image{
    width:750px;
    height: 300px;
}
    //需要设置绝对定位
.indicator{
    position:absolute;
    left:20px;
    bottom:40px;
    width:100px;
    height: 44px;
    item-color:red;
    item-selected-color:green;
    item-size:20px;
}
</style>

7.通用事件

clcik点击事件
appear  出现事件   给组件绑定
disappear   消失事件  给组件绑定
longpress长按事件
viewappear       给根组件  页面显示触发
viewdisappear   给根组件 页面隐藏触发

默认都携带了
target: 触发点击事件的目标组件
timestamp: 触发点击事件时的时间戳

8.switch开关

//安卓真机下 不显示，建议使用图片切换
<switch class="switch" checked="true" disabled="false" @change="change"> </switch>
属性：
checked: 开关状态
disabled:禁用状态
样式无法修改

change 事件  //按钮状态改变触发

9.storage模块

const storage = weex.requireModule('storage')
//存储数据：
storage.setItem(key, value, callback)  //key value都需要是字符串
//示例：
storage.setItem('cache',"要缓存的值",res=>{
    if(res.result=='success'){
    // 数据缓存成功
    }
})
//读取数据：
getItem(key, callback)
storage.getItem('cache',local_list=>{
    if(local_list.result=='success'){
       console.log(local_list.data)//拿到缓存的值，如果没有则为"undefined"
    }
})
//清除缓存：
removeItem(key, callback)
storage.removeItem('cache',res=>{
    if(res.result=='success'){
        modal.toast({message:'清除完成',duration:1})
    }
})
//获取存储的键值对数量：
length(callback)
storage.length(res=>{
    if(res.result='success'){
        this.length = res.data
    }
})
//获取存储的所有键名数组
getAllKeys(callback)
storage.getAllKeys(res=>{
    if(res.result=='success'){
      res.data.forEach((item)=>{
          storage.removeItem(JSON.stringify(item))        //遍历清除所有的缓存
      })
    }
})

10.布局

//必须使用flex布局  且默认flex
display:flex 设置root       //  标签的子标签的布局方式为flex 弹性布局
flex-direction:column        //子标签排列的方式为垂直排列
align-items: center;         //子标签沿着y轴居中对齐
justify-content:flex-start   //子标签的对齐方式,从开始的位置以此布局

11.dom模块

//用法：
const dom = weex.requireModule('dom')
<cell ref='item0'></cell>//静态
<cell :ref="item+'index'">//动态
 const el = this.$refs.item0[0]
dom.scrollToElement(el, {}) // 默认动画true 偏移量为0
    
获取组件的信息
    getComponentRect(ref, callback)
    callback参数：
    {
  result: true,
  size: {
    bottom: 60,
    height: 15,
    left: 0,
    right: 353,
    top: 45,
    width: 353
  }
}
    const el = this.$refs.item0[0]
const result = dom.getComponentRect(this.ref, option => {
      console.log('getComponentRect:', option)
 })
    
 //示例：   
<template>
  <scroller scroll-direction="horizontal" style="height:500px;width:750px;flex-direction:row">
    <div style="width:100px;height:100px;background-color:red;border-color:black;border-style:solid;border-width:2px" :ref="'items'+item" @click="scrollToLeft(item)" v-for="item in list" :key="item"></div>
    <!-- <div :ref="item+'index'">//动态 -->
  </scroller>
</template>

<script>
const dom = weex.requireModule("dom");

export default {
  data() {
    return {
      list: [1,2,3,4,5,6,7,8,10,11,12,13,14,15,16,17,18,19,20],
    };
  },

  mounted() {
 
  },

  methods: {
      //点击向左移动
    scrollToLeft(item) {
 const el = this.$refs[`items${item}`][0];
      console.log(el);
      dom.scrollToElement(el, { offseleft: -100 });
    },
  },
};
</script>

<style  scoped>
</style>

12.navigator模块

//把一个weex页面URL压入导航堆栈中
push({
    url :""        //要压入的 Weex 页面的 URL
    animated:""    //"true" 示意为页面压入时需要动画效果，"false" 则不需要，默认值为 "true"。注意，一定要是字符串类型的，千万不能写成布尔类型
}, callback(){
    //回调
})

//把当前Weex页面弹出导航堆栈中
pop({
    animated:""    //"true" 示意为页面压入时需要动画效果，"false" 则不需要，默认值为 "true"。注意，一定要是字符串类型的，千万不能写成布尔类型
}, callback(){
    //回调
})

13.weex页面跳转传值的优雅方式

weex使用navigator进行页面跳转，这种方式是使用的url传参，刚开始使用的时候一直都是用下面这种方法传值：

navigator.push({
   url: config.getWeexIp() + '/app/main.js?account=123456&name=jelly'
         })

url中？后面便是携带的参数，ccount=123456&name=jelly就是代表两个参数，一个account，一个name。
在跳转后的页面通过获取url地址，便可以得到这两个值。但和android不同的是，在ios系统中，是不支持中文的，也就是说如果url是'/app/main.js？account=123456&name=杰尼'，便会获取不到name数据，所以在最开始拼接url时需要encodeURIComponent方法转码，在拿到数据后在使用decodeURIComponent方法解码拿到正确的数据。

上面这种方法在需要传递的数据较少时很方便，但是实际开发中，数据往往都是一个json对象，需要传递的参数也很多，这样一来，url的拼接往往会变得很繁琐，因为需要将json对象中的数据单独一个一个提取出来传递.例：
假如有一个json对象格式如下：

data:{
    account : 123456,
    name : 杰尼,
}
url就会变成：
'/app/main.js?account='+data.account+'&name='+ encodeURIComponent(data.name)
获取到url地址后需要执行下面两条语句拿到数据：
account=url.account
name=decodeURIComponent(url.name) //解码
这只是两条数据，如果数据有十条以上，代码会变得很冗余，出错概率也会变大。
在写项目《XXXX》时开始思考能不能和原生Android一样，将一整个对象打包传递。之后，我找到了两个函数方法：
JSON.stringify() //将对象转换为json字符串
JSON.parse() //将json字符串转换为对象
虽然url不支持拼接对象，但是支持字符串啊，所以我可以把url写成：
'/app/main.js?data='+JSON.stringify(data)
获取数据时：
data=JSON.parse(url.data)
传递数据时，把对象转成json字符串传过去，在第二个页面获取到json字符串后，再转成对象，这样就完成了对象的传递。
需要使用account数据时，可以直接充data对象中拿：data.account
这种方法，代码量很少，同时也可以减少出错的概率，因为去除了抽取对象数据进行传递的步骤,避免出现参数名编写错误等bug。
但是仅仅这样也还不行，因为对象转成的json字符串中也是有可能出现中文的，比如data.name这个数据。所以同样需要做转码解码处理，
//最终的url：
'/app/main.js?data='+encodeURIComponent(JSON.stringify(data))
获取对象数据：
data= decodeURIComponent(JSON.parse(url.data))
整个传参过程就这两行核心代码。

作者：IAmFox
链接：https://www.jianshu.com/p/8946f202e848

14.weex左滑置顶删除事件

//封装子组件  可以直接复用
<!--列表侧滑操作组件-->
<template>
    <div class="cell" :style="cell_style" ref="cell" @swipe="handleSwipe">
        <slot  name="cell_content" >
        </slot>
        <div class="rightItems" @click="itemClick(item)" v-for="item in rightItems"
             :style="{backgroundColor:item.backgroundColor,width:item.width}">
            <text :style="item.textStyle">{{item.text}}</text>
        </div>
    </div>
</template>
 
<script>
    var animation=weex.requireModule('animation');
    var modal=weex.requireModule('modal');
    const domModule = weex.requireModule('dom')
    export default {
        name: "swip-cell",
        props:{
            //操作项配置
            rightItems:{
               default:[
                   {
                       backgroundColor:"#FF0000",
                       textStyle:{
                           color:"#ffffff",
                           fontSize:30
                       },
                       width:100,
                       text:"删除",
                       icon:"root:img/logo.png"
                   }
               ],
               type:Array
            },
            //整体宽度
            width:{
                default:750,

                type:Number,
            },
        },
        data(){
            return{
                cell_style:{
                    width:750
                },
                rightItems_height:0
            }
        },
        created(){
            let self=this;
            this.cell_style={width:this.width+this.getRightWidth()};
        },
        mounted(){
 
        },
        methods:{
            handleSwipe(e){
                let self=this;
                let cell=this.$refs.cell.ref;
                if(e.direction=='left'){
                    //动态获取右侧操作项的高度
                    this.rightItems_height=domModule
                        .getComponentRect(this.$refs.cell, function (res) {
                             self.rightItems_height=res.size.height;
                        });
                    this.move(cell,-this.getRightWidth());
                }else {
                   this.move(cell,0);
                }
            },
            move(ref,position){
                animation.transition(ref,{
                    styles: {
                        transform:`translateX(${position})`,
                    },
                    duration: 300, //ms
                    timingFunction: 'ease-out',
                    needLayout:false,
                    delay: 0 //ms
                },function (res) {
 
                })
            },
            getRightWidth(){
                let right_w=0;
                this.rightItems.forEach(item=>{
                    right_w+=item.width;
                });
                return right_w;
            },
            itemClick(item){
                let cell=this.$refs.cell.ref;
                this.move(cell,0);
                this.$emit("swipe_item_click",item);
            }
        }
    }
</script>
 
<style scoped>
    .rightItems{
        align-items: center;
        justify-content: center;
           height: 136px!important;
         /* width: 136px; */
           margin-top: 10px;
    }
    .cell{
        flex-direction: row;
         /* background-color: aqua; */
    }
</style>



//父组件使用
<template>
  <div class="container" :style="{ height:' 100% '}">
    <div style=" width: 750px;height: 40px; background-color: #f85039;"></div>
    <wxc-minibar class="navBar" background-color="#f85039" @wxcMinibarLeftButtonClicked="minibarLeftButtonClick" @wxcMinibarRightButtonClicked="minibarRightButtonClick">
      <div slot="middle">
        <div style="flex-direction:row;align-items:center">
          <text style="color:#fff;margin-right:20px;font-size:36px">消息({{5}})</text>
          <div class="yuan" @click="clear">
            <text class="iconfont " style="font-size:36px;color:#fff">&#xe6c7;</text>
          </div>
        </div>
      </div>
      <div slot="left">
        <text class="iconfont back">&#xe62d;返回</text>
      </div>
      <div slot="right">
        <text class="iconfont set" @click="goSettings">&#xe618;</text>
      </div>
    </wxc-minibar>

    <!-- 通知栏 -->
    <div class="open">
      <div style="width:31px;height:31px;margin-left:30px;">
        <text class="iconfont" style="color:#F75B0C;font-size:31px">&#xe705;</text>
      </div>
      <div>
        <text style="
margin-left:21px;
margin-right:50px;
font-size: 26px;
font-family: PingFang SC;
font-weight: 500;
color: #F75B0C;
line-height: 36px;" @click="toOpen">开启消息推送权限,不错过关键词提醒！</text>
      </div>
      <text class="toOpen" style="margin-right:29px;">去开启</text>

      <text class="iconfont" style="color:#F75B0C;font-size:31px;margin-right:29px">&#xe61c;</text>

    </div>

    <list>
      <cell class="cell" v-for="item in list" :key="item">
        <!-- <div class="devideLine"></div> -->
        <swip-cell class="cellItem" width="710" @swipe_item_click="itemClick($event,item)" :rightItems="rightItems">

          <div slot="cell_content" class="cell_content">
            <div class="box">
              <!-- 左侧盒子 -->
              <div class="leftBox"></div>
              <!-- 右侧盒子 -->
              <div class="rightBox">
                <text class="topBox" style="font-size:30px">{{item}}</text>
                <text class="timeBox" style="color:#999">今天 08:11</text>
                <text class="bottomBox" style="font-size:26px">长江五桥通啦</text>
                <image class="miandarao" style="width:22px;height:24px;" src="https://m.mynj.cn:11100/messagepush/image/miandarao.png"></image>
              </div>
            </div>
            <!-- <text style="font-size: 34px;">{{item}}</text> -->
          </div>
        </swip-cell>
        <!-- <div class="devideLine"></div> -->
      </cell>
    </list>

    <text style="margin-top:30px;margin-left:100px;font-size:40px;width:400px;height:100px" @click="$router.push('/goods')">点击进入测试页面</text>
    <text style="margin-top:30px;margin-left:100px;font-size:40px;width:400px;height:100px" @click="$router.push('/operate')">点击进入详情页面</text>
    <text style="margin-top:30px;margin-left:100px;font-size:40px;width:400px;height:100px" @click="$router.push('/noResult')">点击进入无消息页面</text>

  </div>
</template>
<script>
import { WxcMinibar, WxcIcon } from "weex-ui";
import SwipCell from "../components/swipCell.vue";
const modal = weex.requireModule("modal");
export default {
  name: "News",
  components: { WxcMinibar, WxcIcon, SwipCell },
  data() {
    return {
      list: ["aaaaaa", "vvvvvvv", "bbbbbbb"],
      rightItems: [
        {
          backgroundColor: "#AFAFAF",
          textStyle: {
            color: "#ffffff",
            fontSize: 26,
          },
          width: 136,
          text: "置顶",
        },
        {
          backgroundColor: "#FFB545",
          textStyle: {
            color: "#ffffff",
            fontSize: 26,
          },
          width: 136,
          text: "标为已读",
        },
        {
          backgroundColor: "#FA6251",
          textStyle: {
            color: "#ffffff",
            fontSize: 26,
          },
          width: 136,
          text: "删除",
        },
      ],
    };
  },
  beforeCreate() {
    let domModule = weex.requireModule("dom");
    domModule.addRule("fontFace", {
      fontFamily: "toutiao",
      src:
        weex.config.env == "iOS"
          ? "url('htttp://at.alicdn.com/t/font_2446435_fh7tj8kfb0q.woff')"
          : "url('http://at.alicdn.com/t/font_2446435_fh7tj8kfb0q.ttf')",
    });
  },
  created() {
    var value = weex.config.userid;
    console.log(value);
  },
  mounted() {},
  methods: {
    minibarLeftButtonClick() {},
    minibarRightButtonClick() {
      modal.toast({ message: "click rightButton!", duration: 1 });
    },

    goSettings() {
      this.$router.push("/newsSettings");
    },
    //左滑后的点击事件
    itemClick($event, item) {
      if ($event.text == "置顶") {
        var index = this.list.indexOf(item);
        this.list.splice(index, 1);
        this.list.unshift(item);
      }
      if ($event.text == "标为已读") {
      }
      if ($event.text == "删除") {
        var index = this.list.indexOf(item);
        this.list.splice(index, 1);
      }
    },
    //  一键清除角标
    clear() {
   
    },
    // 开启消息推送权限
    toOpen() {
 
          },
  },
};
</script>
<style scoped>
.iconfont {
  font-family: toutiao;
}
.back {
  font-size: 30px;
  color: #fff;
}
.set {
  font-size: 40px;
  color: #fff;
}
.navBar {
  width: 750px;
  height: 88px;
  background-color: #f85039;
}
.yuan {
  width: 40px;
  height: 40px;
  background-color: rgba(255, 255, 255, 0.18);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.open {
  width: 750px;
  height: 70px;
  background-color: #fefcec;
  flex-direction: row;
  align-items: center;
  overflow: hidden;
}

.toOpen {
  width: 92px;
  font-size: 26px;
  border-style: solid;
  border-width: 1px;
  border-color: #f75b0c;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding-top: 2px;
  padding-bottom: 2px;
  text-align: center;
  color: #f75b0c;
}
.box {
  width: 750px;
  height: 136px;
  display: flex;
  flex-direction: row;
  margin-top: 10px;
  position: relative;
}
.leftBox {
  width: 80px;
  height: 80px;
  background-color: blueviolet;
  margin: 30px 20px 30px 30px;
}

.timeBox {
  font-size: 22px;
  position: absolute;
  top: 36px;
  right: 29px;
}
.miandarao {
  font-size: 22px;
  position: absolute;
  top: 80px;
  right: 29px;
}
.rightBox {
  width: 620px;
  height: 137px;
  padding: 32px 0 32px 0;
  overflow: hidden;
}
.topBox {
  margin-bottom: 12px;
}
</style>
参考网址：https://blog.youkuaiyun.com/qq_33718648/article/details/90230491?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-2.control

15.page事件

 //在created中调用页面显示事件
 if(weex.config.env.platform==='web'){
   this.onShow()
}

1.viewappear事件

页面显示触发
@viewappear='onShow'

2.viewdisappear事件

页面隐藏触发
@viewdisappear='onHide'

16.navigator跳转

navigator.push(
url:"",  //此处移动端为js  web端为html
animated:'true'
)
//返回
navigator.pop(
animated:'true'
)   

新建tuils.js(三端通用)
export function getEntryUrl(name){
//如果是H5 web端
    if(weex.config.env==='web'){
    return './'+name+'.html'
}else{
    //如果是移动端
    let arr=weex.config.bundleUrl.split('/')
    arr.pop()  //删除 xx.html
    arr.push(name+'.js')  //以js结尾
    return arr.join('/')  //重组成完整路径
}   
}

17.stream请求模块(接口请求)


在api.js中封装
/* 引入 请求数据模块 */
const stream = weex.requireModule('stream');

/* 配置API接口地址 */
const baseUrl = 'http://xxx.xxx.xxx:8080/';

/* 序列化请求方法 */
let toParams=(obj)=>{
    let param = ""
    if(!obj){
        return param;
    }
    for(let name in obj) {
        if(typeof obj[name] != 'function') {
            param += "&" + name + "=" + encodeURI(obj[name])
        }
    }
    return param.substring(1);
}
/* 请求处理函数 */
let ajax=(params={},callFn)=>{
    let ajaxData={
        method:params.method || 'GET',
        type:params.type || 'json',
    }

    if(/http:|https:/.test(params.url)){
        ajaxData.url=params.url;
    }else{
        ajaxData.url=baseUrl+params.url;
    }
    if(ajaxData.method=='GET'){
        ajaxData.url+=('?'+toParams(params.data));
    }else if(ajaxData.method=='POST'||'PUT'){
        //携带请求头
       ajaxData.headers = {
            "Content-Type": "application/json"
        }
        ajaxData.body = JSON.stringify(params.data)
    }
    ajaxData.timeout=30000,

    stream.fetch(ajaxData, (res)=> {
        callFn && callFn(res);
    })
}

/* 暴露对象 */
export default {
    baseUrl,
    ajax
}


 //引用请求接口
 import ApiJs from '../api'

 ApiJs.ajax({
                    url: '',
                    method: 'GET',
                    type: 'text',	//默认 json，默认可以省略
                    //入参
                    data: data,
                }, (res) => {
                    if(res.ok) {
                    //请求成功 
                    }
                })
            },

18.loading加载(建议使用weex-ui组件库)

weex自带的loading加载比较丑，可以使用weex-ui组件库
<template>
    <div>
        <wxc-loading :show="isShow" type="trip"></wxc-loading>
        <wxc-part-loading :show="isShow"></wxc-part-loading>
    </div>
</template>
<script>
    import { WxcLoading, WxcPartLoading } from 'weex-ui';
    export default {
        components: { WxcLoading, WxcPartLoading },
        data () {
            return {
                isShow: true
            };
        }
    };
</script>

19.weex中的坑

1.子绝父相，超出默认隐藏，且修改无效
解决办法：父级盒子写大点

2.weex.config相关配置只能写在js中，不可以在结构中直接进行判断
例如：<div v-if="weex.config.env.platform==='iOS'"></div>  //错误

3.weex中文字溢出不能使用常规的overflow:hidden
解决方法：使用 weex内置的lines
.text{
lines:2; 
text-overflow:ellipsis;
}

4.只支持px 自带适配  750px标准

5.样式不支持简写，如：
background:red  不支持
必须background-color:red

6.flexbox是默认且唯一的布局，每个元素默认带有display:flex

7.不支持背景图片

8.不支持负边距  z-index 

9.不支持组件缓存

10.ios使用list组件  会造成滑动元素丢失空白问题  建议使用scroller
如果一屏显示，会出现无法滚动问题，可以添加以下属性
alwaysScrollableVertical和alwaysScrollableHorizontal  //横向与纵向滚动 设置为true

weex封裝Notice通知栏（文本滚动）

<template>
  <div class="notice" @click="jump">
    <div class="notice_left">
      <image :src="icon" class="icon"></image>
      <text style="color:#fff;border-width:1px;border-color:#fff;border-style:solid;height:32px;margin-right: 16px;"></text>
      <text class="tag">活动</text>
    </div>

    <div class="marquee-container" ref="marqueeContainer">
      <text ref="marqueeText" class="marquee-text" :style="{ transform: `translateX(${scrollPosition}px)` }">{{ visibleText }}</text>
      <div class="notice_right"></div>
    </div>

    <image class="notice_right" :src="
                  'https://xxx.png'"></image>

  </div>
</template>  
  
<script>
const dom = weex.requireModule("dom") || {};
const modal = weex.requireModule("modal");
const platform = weex.config.env.platform;
export default {
  props: {
    text: {
      type: String,
      default: "",
    },
    url: {
      type: String,
    },
    icon: {
      type: String,
    },
    type: {
      default: 1,
    },
  },
  data() {
    return {
      // text: "这是一条滚动的公告消息",
      visibleText: "", // 当前显示的文本片段
      containerWidth: 0, // 容器宽度
      textWidth: 0, // 文本宽度
      scrollPosition: 0, // 滚动位置
      speed: 5, // 滚动速度
      timer: null, // 定时器
    };
  },
  created() {},
  mounted() {
    this.initMarquee();
  },
  beforeDestroy() {
    this.stopMarquee();
  },
  methods: {
    initMarquee() {
      // 设置初始显示的文本片段
      this.visibleText = this.text;
      // 开始滚动文本
      this.startMarquee();
    },
    startMarquee() {
      let num = 1;
      this.timer = setInterval(() => {
        num = num + 2;
        // console.log({ num });
        const el2 = this.$refs.marqueeContainer;
        dom.getComponentRect(el2, (ops) => {
          //   console.log("父盒子宽度：", ops.size.width);

          let containerWidth = ops.size.width;
          this.scrollPosition -= this.speed;
          // 获取文本宽度
          const el1 = this.$refs.marqueeText;
          dom.getComponentRect(el1, (ops) => {
            this.textWidth = ops.size.width;
            // console.log("文本宽度：", ops.size.width);
            // console.log("滚动值：", this.scrollPosition);
            // 当文本完全滚出屏幕时，重置滚动位置并显示文本的剩余部分
            if (this.scrollPosition < -this.textWidth) {
              this.scrollPosition = containerWidth;
              //此处是为了滚动一段时间后 消失
              if (num > parseFloat(1500 / this.speed)) {
                // this.$emit("getNoticeShowFlag", false);
              }
              this.visibleText = this.text;
            }
          });
        });
      }, 100);
    },
    stopMarquee() {
      clearInterval(this.timer);
      this.timer = null;
    },

    jump() {
      if (!this.url) return;
     
    },
  },
};
</script>  
  
<style scoped>
.notice {
  flex-direction: row;
  align-items: center;
  overflow: hidden;
  position: relative;
  /* background-color: #fff; */
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 20px;
  /* box-shadow: 0px 0px 4px 0px #d3cdcd; */
  border-radius: 8px;
  /* background-color: #000000; */
  box-shadow: 0px 0px 4px 0px #d3cdcd;
  border-radius: 36px;
  opacity: 0.7;
}
.marquee-container {
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  height: 72px;
  overflow: hidden;
  position: relative;
  flex-direction: row;
}

.notice_left {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  width: 136px;
}

.icon {
  width: 40px;
  height: 40px;
  margin-right: 16px;
}

.tag {
  border-width: 1px;
  border-style: solid;
  border-color: #ffffff;
  padding: 8px;
  border-radius: 4px;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: 500;
  font-size: 18px;
  color: #ffffff;
}

.marquee-text {
  font-size: 28x;
  position: absolute;
  white-space: nowrap; /* 防止文本换行 */
  will-change: transform; /* 优化滚动性能 */
  /* background-color: yellow; */
  overflow: hidden;
  color: #ffffff;
}

.marquee-container {
  flex: 1;
  /* background-color: hotpink; */
  padding: 0;
  margin: 0;
  justify-content: start;
  text-align: left;
}

.notice_right {
  width: 24px;
  height: 24px;
}
</style>

//调用
<template>
      <!-- 通知栏 -->
      <div :style="{
            top:statusBarHeight-10
          }" style="position:absolute;left: 20px;right: 20px;z-index:999">
        <Notice style="background-color:#000000;flex:1 " v-if="NoticeShow" @getNoticeShowFlag="(val)=>this.NoticeShow=val" :icon="noticeData.icon" :jumpType="1" :NoticeShow="NoticeShow" :text="noticeData.text"
          :url="noticeData.url" />
</template>


import {  Notice } from "@/components";
export default{
components:{
Notice
 },
 data(){
  return {
      NoticeShow: true,
      // 通知栏数据
      noticeData: {
        icon: "https://xxx.png",
        text: "全新惠民金融活动来袭，首借年利率（单利）仅需2.98%。点击获取更多详情>>",
        url: "https://wwww.baidu.com",
      },
  }
 }
}