uni-app基本使用

uniapp

小程序组件+api
vue语法

组件

    view
    text
    input
    image
    没有div，div默认会被转换为view 

api

    uni.showToast({})
    没有window（h5端有window） 

CSS

    推荐的单位rpx
750rpx = 1个屏幕的宽度 

语法

95%等同于vue的语法

pages.json

globalStyle 全局配置

"navigationBarTextStyle": "white",
导航栏字体颜色（只支持白色和黑色）
"navigationBarTitleText": "祈欢商铺",
导航栏标题
"navigationBarBackgroundColor": "#000"
导航栏背景颜色（同状态栏背景色）
"backgroundColor":"#f70"
窗口背景色

pages 单个页面配置

path  路径
style  样式
mp-weixin
微信配置
h5
网页端配置
app-plus
ap端配置
    "titleNView":{"backgroundColor": "#aaff7f"} 

条件编译 

 条件

    h5  网页端
    mp  小程序端
    app-plus  app端

模板条件

    <!-- #ifdef APP-PLUS -->
<view>
    app独享优惠
</view>
<!-- #endif -->

CSS条件

    /* #ifdef APP-PLUS */
.lovely{
    color: #007AFF;
}
/* #endif */

配置条件

    pages/style

组件使用

    自定义组件

        自动导入模式

components/stepper/stepper.vue
在页面中使用
<stepper></stepper>

        手动导入

            在页面中
import steppers from '../components/stepper/stepper'
components:{stepper}
<stepper></stepper>

    微信组件

    uni-组件

    内置组件

        view
        text
            user-select 文本可选（微信）
selectable 文本可选
        input
        image
            src 图片地址
mode 图片模式widthFix | aspectFit 长边显示
        没有div，div默认会被转换为view

navigate    跳转组件

url   跳转地址

open-type    打开方式

navigate  跳转
redirect  重定向
switchTab  切换底部栏
reLunch 重启
navigateBack  返回
exit  退出

 api

    uni.showToast({})

    没有window（h5端是window的）

    uni.request
        url
success(res){res.data}