uniapp基础知识

1、在uniapp 中怎么使用点击

<view class="animated " hover-class="bounceOut" style="border: 1px solid #333; background-color: #09BB07; width: 100px; height: 100px;">
            点击效果
        </view>

动画的使用可以使用v-if ,, 还可以使用 列表渲染
2、如何引入公共的js

//在app.vue中
<style>
    /*每个页面公共css */
    /* 引入官方css库 */
    @import './common/uni.css';
    /* 引入自定义库 */
    @import './common/icon.css';
    /* 引入动画库 */
    @import './common/animate.css';
</style>

3、设置全局属性 GloableStyle
设置 需要在pages.json中配置

      {
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages  //设置每个页面的导航栏
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

4、配置底部选项卡

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {}
        }
        ,{
            "path" : "pages/news/news",
            "style" : {}
        }
        ,{
            "path" : "pages/msg/msg",
            "style" : {}
        }
        ,{
            "path" : "pages/my/my",
            "style" : {}
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "社区交友",
        "navigationBarBackgroundColor": "#ffffff",
        "backgroundColor": "#ffffff "
    },
    "tabBar": {
        "color": "#333",
        "selectedColor": "#fc5c82",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "./static/tabbar/index.png",
            "selectedIconPath": "./static/tabbar/indexed.png",
            "text": "首页"
        },{
            "pagePath": "pages/news/news",
            "iconPath": "./static/tabbar/news.png",
            "selectedIconPath": "./static/tabbar/newsed.png",
            "text": "动态"
        },{
            "pagePath": "pages/msg/msg",
            "iconPath": "./static/tabbar/paper.png",
            "selectedIconPath": "./static/tabbar/papered.png",
            "text": "消息"
        },{
            "pagePath": "pages/my/my",
            "iconPath": "./static/tabbar/home.png",
            "selectedIconPath": "./static/tabbar/homeed.png",
            "text": "我的"
        }]
    }
}