鸭梨公共文档

主题

uni-app 原生模板 ​

1. 导航栏自定义按钮 ​

json
// pages.json
// #ifdef APP-PLUS || H5
{
    "path": "nav-button/nav-button",
    "style": {
        "navigationBarTitleText": "导航栏带自定义按钮",
        "app-plus": {
            "titleNView": {
                "buttons": [{
                        "type": "share"
                    },
                    {
                        "type": "favorite"
                    }
                ]
            }
        }
    }
}
// #endif
js
import uniIcons from '@/components/uni-icons/uni-icons.vue'
export default {
    data() {
        return {
            title: 'nav-button'
        }
    },
    onNavigationBarButtonTap(e) {
        uni.showToast({
            title: e.index === 0 ? "你点了分享按钮"
            : "你点了收藏按钮",
            icon: "none"
        })
    },
    components: {
        uniIcons
    }
}

2. 导航栏带红点和角标 ​

json
// pages.json
{
    "path": "nav-dot/nav-dot",
    "style": {
        "navigationBarTitleText": "导航栏带红点和角标",
        "app-plus": {
            "titleNView": {
                "buttons": [{
                        "text": "消息",
                        "fontSize": "14",
                        "redDot": true
                    },
                    {
                        "text": "关注",
                        "fontSize": "14",
                        "badgeText": "12"
                    }
                ]
            }
        }
    }
}
js
onReady() {
    this.setStyle(0, true)
    this.setStyle(1, true, '9')
},
methods: {
    /**
     * 修改导航栏 buttons
     * index[number] 修改的 buttons 下标索引，最右边索引为 0
     * show[boolean] 显示还是隐藏角标或者红点
     * text[string] 需要修改的角标的 text 内容 ，如果定义 redDot
     * 此参数无效，如果定义 badgeText 请设置具体，如果不用输入
     */
    setStyle(index, show, text) {
        let pages = getCurrentPages()
        let page = pages[pages.length - 1]
        // #ifdef APP-PLUS
        let currentWebview = page.$getAppWebview()
        if (show) {
            if (index === 0) {
                currentWebview.showTitleNViewButtonRedDot(
                    { index: index, text: text })
            } else {
                currentWebview.setTitleNViewButtonBadge(
                    { index: index, text: text })
            }
        } else {
            if (index === 0) {
                currentWebview.hideTitleNViewButtonRedDot(
                    { index: index })
            } else {
                currentWebview.removeTitleNViewButtonBadge(
                    { index: index })
            }
        }
        // #endif
    }
},
onNavigationBarButtonTap(e) {
    uni.showToast({
        title: e.index === 0 ? '你点了消息按钮' : '你点了关注按钮',
        icon: 'none'
    })
    // 取消红点或者角标 
    this.setStyle(e.index, false)
}

3. 导航栏带搜索框 ​

json
// pages.json
{
    "path": "nav-search-input/nav-search-input",
    "style": {
        "navigationBarTitleText": "导航栏带搜索框",
        "app-plus": {
            "titleNView": {
                "type": "transparent",
                "titleColor": "#fff",
                "backgroundColor": "#007AFF",
                "buttons": [{
                    "fontSrc": "/static/uni.ttf",
                    "text": "\ue537",
                    "width": "40px",
                    "fontSize": "28px",
                    "color": "#fff",
                    "background": "rgba(0,0,0,0)"
                }],
                "searchInput": {
                    "backgroundColor": "#fff",
                    "borderRadius": "6px",
                    "placeholder": "请输入地址 如：大钟寺",
                    "disabled": true
                }
            }
        }
    }
}
js
onNavigationBarSearchInputClicked(e) {
    uni.navigateTo({
        url: '/pages/template/nav-search-input/detail/detail'
    })
}
// 点击导航栏 buttons 时触发
onNavigationBarButtonTap() {
    uni.showModal({
        title: '提示',
        content: '用户点击了功能按钮，这里仅做展示。',
        success: res => {
            if (res.confirm) {
                console.log('用户点击了确定')
            }
        }
    })
}

4. 透明渐变导航栏 ​

json
{
    "path": "nav-transparent/nav-transparent",
    "style": {
        "navigationBarTitleText": "透明渐变导航栏",
        "transparentTitle": "auto"
    }
}

5. 导航栏带图片 ​

json
// #ifdef APP-PLUS || H5 || MP-ALIPAY
{
    "path": "nav-image/nav-image",
    "style": {
        "navigationBarBackgroundColor": "#FFFFFF",
        "navigationBarTextStyle": "black",
        "titleImage": "b3e4cbd0-517d-5b3e54966275.png"
    }
}
// #endif

6. 顶部选项卡 ​

参考 /pages/template/tabbar/tabbar.nvue 的设计。

7. 组件通讯 ​

父组件 ​

xml
<view class="uni-btn-v">
    <reciver></reciver>
    <sender></sender>
</view>
js
import reciver from './reciver.vue'
import sender from './sender.vue'
export default {
    components: {
        reciver,
        sender
    },
    data() {
        return {
        }
    },
    methods: {
    }
}

子组件 reciver ​

js
export default {
    data() {
        return {
            msg: ''
        }
    },
    created() {
        uni.$on('cc', this.recive)
    },
    beforeDestroy() {
        uni.$off('cc', this.recive)
    },
    methods: {
        recive(e) {
            this.msg = e.msg
        }
    }
}

子组件 primary ​

js
export default {
    methods: {
        send() {
            let num = parseInt(Math.random() * 10000)
            uni.$emit('cc', {
                msg: 'From uni.$emit -> ' + num
            })
        }
    }
}

8. 全局变量 ​

参考 /pages/template/global/global 和 Vuex 使用方法。