Uniapp 项目开始(十二)

Uniapp 项目开始

加入路由

• 找到 pages.json 文件 然后在里面加入

    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        },
        {
            "path": "pages/horizontal/index",
            "style": {
                "navigationBarTitleText": "横屏"
            }
        },
        {
            "path": "pages/video/index",
            "style": {
                "navigationBarTitleText": "精美视频"
            }
        },
        {
            "path": "pages/search/index",
            "style": {
                "navigationBarTitleText": "搜索"
            }
        },
        {
            "path": "pages/mine/index",
            "style": {
                "navigationBarTitleText": "我的"
            }
        }

    ],

底部加入 tabBar

• 找到 pages.json 文件然后在里面加入

    "tabBar": {
        "color": "#8a8a8a",
        "selectedColor": "#d4237a",
        "backgroundColor": "#fff",
        "position": "bottom",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "./static/icon/_home.png",
                "selectedIconPath": "./static/icon/home.png"
            },
            {
                "pagePath": "pages/horizontal/index",
                "text": "横屏",
                "iconPath": "./static/icon/_img.png",
                "selectedIconPath": "./static/icon/img.png"
            },
            {
                "pagePath": "pages/video/index",
                "text": "精美视频",
                "iconPath": "./static/icon/_videocamera.png",
                "selectedIconPath": "./static/icon/videocamera.png"
            },
            {
                "pagePath": "pages/search/index",
                "text": "搜索",
                "iconPath": "./static/icon/_search.png",
                "selectedIconPath": "./static/icon/search.png"
            },
            {
                "pagePath": "pages/mine/index",
                "text": "我的",
                "iconPath": "./static/icon/_my.png",
                "selectedIconPath": "./static/icon/my.png"
            }
        ]
    }

引入字体图标

• 首先改后缀名变成 wxss

• 在 App.vue 中全局引入

(1) 在 App.vue 中 写

• 这里特别注意的就是引入的时候不能使用@

<style>
  /*每个页面公共css */
  @import './styles/iconfont.wxss';
</style>

(2) 使用的时候

<text class="iconfont iconvideocamera"></text>

(3)微信小程序不支持通配符*,所以只能手写

• page 可以自己定义

view, text, navigator, input, image, swiper, swiper-item, scroll-view, page {
margin: 0; padding: 0; box-sizing: border-box; } image{ width: 100%; display:
block; }