uni-app学习笔记(1)

导航栏

1.设置导航栏自定义样式（取消默认导航栏）
pages.json文件中设置

navigationStyle 只在 pages.json->globalStyle 中设置生效。开启 custom 后，所有窗口均无导航栏。

Button点击事件

template中加入

登陆

script中加入

clickTest: function(e) {
                if (this.login.uesrname.length > 0) {
                    if (this.login.password.length > 0) {
                        //网络请求
                    } else {
                        uni.showToast({
                            title: '密码不能为空',
                            icon: "none",
                            duration: 2000
                        });
                    }
                } else {
                    uni.showToast({
                        title: '账户不能为空',
                        icon: "none",
                        duration: 2000
                    });
                }

input监听事件

template中加入

script中加入

export default {
        data() {
            return {
                login: {
                    uesrname: "",
                    password: "",
                },
            };
        },
        methods: {
            onKeyUserNameInput: function(e) {
                console.log(e);
                this.login.uesrname = e.target.value
                console.log(this.uesrname);
            },
        },
    }

tabBar设置

在pages.json中的加入

"tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/tab/home/home",
            "text": "首页",
            "iconPath": "static/logo.png",
            "selectedIconPath": "static/logo.png"
        }, {
            "pagePath": "pages/tab/fillin/fillin",
            "text": "录入",
            "iconPath": "static/logo.png",
            "selectedIconPath": "static/logo.png"
        }, {
            "pagePath": "pages/tab/query/query",
            "text": "报表",
            "iconPath": "static/logo.png",
            "selectedIconPath": "static/logo.png"
        }, {
            "pagePath": "pages/tab/person/person",
            "text": "个人",
            "iconPath": "static/logo.png",
            "selectedIconPath": "static/logo.png"
        }]
    },

网络请求

uni.request({
                            url: 'http://xx.com/api/login', //仅为示例，并非真实接口地址。
                            data: {
                                username: this.login.uesrname,
                                password: this.login.password
                            },
                            header: {
                                //'custom-header': 'hello' //自定义请求头信息
                            },
                            success: (res) => {
                                console.log(res.data);
                                if (res.data.code == 0) {
                                    uni.switchTab({
                                        url: '../tab/home/home'
                                    });
                                } else {
                                    uni.showToast({
                                        title: '账户出错',
                                        icon: "none",
                                        duration: 2000
                                    });
                                }
                            }
                        });