uniapp

1.注意事项

1.内置css

使用内置CSS变量有以下几点需要注意。

(1) var(--status-bar-height)变量在微信小程序环境中为固定值25px, 在App中为手机实际状态栏高度。

(2)当设置"navigationStyle":"custom"取消原生导航栏后, 由于窗体为沉浸式, 占据了状态栏位置, 此时可以使用一个高度为var(--status-bar-height)的view放在页面顶部, 避免页面内容出现在状态栏位置。

(3) H5端不存在原生导航栏和TabBar， 使用前端div模拟导航栏和TabBar。如果设置了一个固定在底部位置的view， 其在小程序和App端是在TabBar上方， 但在H5端会与TabBar重叠。此时可使用--window-bottom变量, 使这个底部view不管在哪个端, 都是固定在TabBar上方。

(4) 目前Nvue在App端还不支持--status-bar-height变量, 替代方案是在页面onLoad时通过uni. getSystemInfoSync(). statusBarHeight获取状态栏高度, 然后通过style绑定方式给占位view设定高度。

2.设置背景图片的注意事项

设置背景图片的注意事项uni-app支持在CSS里设置背景图片，设置方式与普通Web项目大体相同，但需要注意以下几点。

(1) 支持base64格式图片。

(2)支持网络路径图片。

(3)小程序不支持在CSS中使用本地文件，包括本地的背景图片和字体文件，需以base64编码的方式使用。

(4)使用本地路径背景图片需注意以下几点。

①为了方便开发者使用，若背景图片小于40KB，uni-app编译到不支持使用本地背景图片的平台时， 会自动将其转换为base64格式。②图片大于等于40KB会有性能问题，不建议使用太大的背景图片，若必须使用，则需自己将其转换为base64格式使用，或将其上传到服务器上，从网络地址引用。③本地背景图片的引用路径推荐以“~@”开头的绝对路径，示例代码如下所示。

. test2 {

background-image: url('~@/static/logo.png');

}

2.页面配置一些代码

1.style的配置示例代码

{

"pages":[{

      "path":"pages/index/index",

      "style":{

          "navigationBarTitleText":"首页",  //设置页面标题文字

          "enablepullDownRefresh":true  //开启下拉刷新

             }

        },

        ...

 ]}

2.tabBar的配置示例代码

"tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/icon/tab-home.png",
            "selectedIconPath": "static/icon/tab-home-current.png",
            "text": "首页"
        }, {
            "pagePath": "pages/shopping/shopping",
            "iconPath": "static/icon/tab-cart.png",
            "selectedIconPath": "static/icon/tab-cart-current.png",
            "text": "购物车"
        }, {
            "pagePath": "pages/my/my",
            "iconPath": "static/icon/tab-user.png",
            "selectedIconPath": "static/icon/tab-user-current.png",
            "text": "我的"
        }]
    },

3.轮播图的一个设置代码

<swiper class="a" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <swiper-item>
                    <image src="图1" mode=""></image>
                </swiper-item>
                <swiper-item>
                    <image src="图2" mode=""></image>
                </swiper-item>
                <swiper-item>
                    <image src="图3" mode=""></image>
                </swiper-item>
            </swiper>