weex学习之路(二)---组件封装（1）

来源：互联网发布：JS域名代码授权源码编辑：程序博客网时间：2024/06/08 11:27

不管是为了解耦还是为了代码的复用，组件封装都是必须要的。
因为weex使用flex布局，所以每个页面都可以抽象成头部（顶部导航），身体(主体内容)，脚(底部)，
当然，并不是所有的页面存在这3个要素，所以组件需要支持一些配置，具体代码如下：

 <template><div class="app" :style="viewStyle">    <div class="app_header" :style="headerStyle" v-if="view.useHeader">        <slot name="app-header"></slot>    </div>    <scroller v-if="view.bodyScroll" show-scrollbar="false" :style="view.scrollerStyle">        <slot name="app-body"></slot>    </scroller>    <div class="app_body" :style="bodyStyle" v-else>        <slot name="app-body"></slot>    </div>    <div class="app_footer" :style="footerStyle" v-if="view.useFooter">        <slot name="app-footer"></slot>    </div> </div> </template>  <script>  import fadeIn from '../mixins/FadeIn';  export default{     mixins: [fadeIn],    props: {        view: {            type: Object,            default: function () {                return {                    viewStyle:{flex:"1"},                    bodyScroll: false,   //页面主体是否可以滚动                    bodyPadding: true,   //页面主体是否需要左右padding (默认20)                    bodyIsCenter: true,  //页面主体内容是否居中(水平和垂直)                    bodyBackgroundColor: "#f2f2f2", //页面主体背景色                    useHeader: true,     //是否使用页面头部                    useFooter: true,     //是否使用页面底部                    headerHeight: "100px", //页面头部高度                    footerHeight: "80px",   //页面底部高度                    scrollerStyle:{flex:"1"}                }            }        }    },    data(){        const {headerHeight, footerHeight, bodyBackgroundColor, bodyPadding, bodyIsCenter} = this.view;        const headerStyle = {            height: headerHeight        };        const footerStyle = {            height: footerHeight,            backgroundColor: bodyBackgroundColor        };        const bodyStyle = {            backgroundColor: bodyBackgroundColor,        };        if (bodyPadding) {            bodyStyle.paddingLeft = "20px";            bodyStyle.paddingRight = "20px";        }        if (bodyIsCenter) {            bodyStyle.justifyContent = "center";            bodyStyle.alignItems = "center";        }        return {            headerStyle,            bodyStyle,            footerStyle        }    }} </script><style scoped>.app {    flex-direction: column;}.app_header {    justify-content: flex-start;}.app_body {    flex: 1;    flex-direction: column;}.app_footer {    justify-content: flex-end;}</style>

然而头部的导航栏一般也是比较通用的也可以抽象一下

<template><div>    <div v-if="ios" class="ios_top" :style="iosTopStyle"></div>    <div class="header" :style="style">        <div @click="clickBackButton" :style="backStyle" class="left-back" v-if="useBack">            <image class="back" :src="backIconUrl"></image>            <text v-if="leftText" :style="leftTextStyle">{{leftText}}</text>        </div>        <text v-if="title.length>0"              :style="titleStyle"              @click="clickText"              :value="title"></text>        <text v-if="rightText.length>0"              class="right-content"              @click="clickRight"              :style="rightTextStyle"              :value="rightText">        </text>        <image v-if="rightIcon.length>0"               class="right-content"               @click="clickRight"               :style="rightIconStyle"               :src="rightIcon">        </image>    </div></div> </template> <script>   import weexUtils from "../../utils/WeexUtils";   import GlobalApiConfig from "../../api/config/GlobalAipConfig";const appHeaderConfig = GlobalApiConfig.APP_HEADER_CONFIG;export default {    name: "app-header",    props: {        useBack: {default: true},        title: {            default: ""        },        rightText: {default: ""},        rightIcon: {default: ""},        leftText: {default: ""},        leftTextStyle: {            default: {                fontSize: "32px",                color: "#ffffff"            }        },        leftStyle: {            default: {                width: "100px"            }        },        backIconUrl: {default: weexUtils.getResourcesURL(appHeaderConfig.backImage, weex)},        headerStyle: {default: {}},        headerIosTopStyle: {default: {}},        headerTitleStyle: {default: {}},        headerRightStyle: {default: {}}    },    data() {        let result = appHeaderConfig.data;        result.ios = false;        return Object.assign({            backStyle: {height: "100px"},            rightTextStyle: {                right: "15px",                fontSize: "32px",                color: ": #ffffff"            },            rightIconStyle: {                right: "22px",                top: "22px",                width: " 56px",                height: "56px"            }        }, result);    },    methods: {        clickBackButton: function () {            this.$emit("backPage");        },        clickText() {            this.$emit("clickHeaderText");        },        clickRight() {            this.$emit("clickHeaderRightText");        }    },    created() {        this.ios = weex.config.env.platform.toLowerCase() === "ios";        this.style = Object.assign({}, this.style, this.headerStyle);        this.backStyle = Object.assign(this.backStyle, this.leftStyle);        if (this.style.height) {            this.backStyle.height = this.style.height;        }        this.iosTopStyle = Object.assign({}, this.iosTopStyle, this.headerIosTopStyle);        this.titleStyle = Object.assign({fontSize:"36px"}, this.titleStyle, this.headerTitleStyle);        if (this.rightText.length > 0) {            this.rightTextStyle = Object.assign({}, this.rightTextStyle, this.headerRightStyle);        } else {            this.rightIconStyle = Object.assign({}, this.rightIconStyle, this.headerRightStyle);        }    }}   </script> <style scoped>.ios_top {    flex: 1;}.header {    flex-direction: row;    justify-content: center;    align-items: center;    position: relative;    border-bottom-width: 1px;    border-bottom-style: solid;}.back {    width: 40px;    height: 40px;}.left-back {    flex-direction: row;    position: absolute;    justify-content: center;    align-items: center;    left: 0;    top: 0;}.right-content {    position: absolute;} </style>

其他的也类似（页面底部，主体内容）都可以抽象一些通用的东西出来，具体的可以参考
https://github.com/fengwuxp/weex_componets

阅读全文

0 0