语法

pages.json

pages设置页面

属性	说明
navigationBarTitleText	头部文本
navigationBarBackgroundColor	头部背景色
navigationBarTextStyle	头部文本颜色，只有黑与白
enablePullDownRefresh	是否开启下拉刷新动画

去除默认标题

json

{
      "path": "pages/home/home",
      "style": {
        "app-plus": {
          "titleNView": false
        }
      }
    },

{
      "path": "pages/home/home",
      "style": {
        "app-plus": {
          "titleNView": false
        }
      }
    },

globalStyle

设置通用的页面样式

tabBar

设置底部图标切换区域(也可以设置到顶部)

json

{
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#007AFF",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "backgroundColor": "#F8F8F8",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
  },
    "tabBar": {
    "color": "#FFFFFF",
    "selectedColor": "#55ffff",
    "backgroundColor": "#007AFF",
    "list": [{
      "text": "首页",
      "pagePath": "pages/index/index",
      "iconPath": "static/tab/tab_icon3.png",
      "selectedIconPath": "static/tab/tab_icon3_active.png"
    }, {
      "text": "世界",
      "pagePath": "pages/index/index",
      "iconPath": "static/tab/tab_icon2.png",
      "selectedIconPath": "static/tab/tab_icon2_active.png"
    }, {
      "text": "欢迎",
      "pagePath": "pages/index/index",
      "iconPath": "static/tab/tab_icon1.png",
      "selectedIconPath": "static/tab/tab_icon1_active.png"
    }]
  }
}

{
  "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#007AFF",
        "navigationBarTextStyle": "white",
        "enablePullDownRefresh": true
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "backgroundColor": "#F8F8F8",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#F8F8F8",
  },
    "tabBar": {
    "color": "#FFFFFF",
    "selectedColor": "#55ffff",
    "backgroundColor": "#007AFF",
    "list": [{
      "text": "首页",
      "pagePath": "pages/index/index",
      "iconPath": "static/tab/tab_icon3.png",
      "selectedIconPath": "static/tab/tab_icon3_active.png"
    }, {
      "text": "世界",
      "pagePath": "pages/index/index",
      "iconPath": "static/tab/tab_icon2.png",
      "selectedIconPath": "static/tab/tab_icon2_active.png"
    }, {
      "text": "欢迎",
      "pagePath": "pages/index/index",
      "iconPath": "static/tab/tab_icon1.png",
      "selectedIconPath": "static/tab/tab_icon1_active.png"
    }]
  }
}

页面跳转api

https://uniapp.dcloud.net.cn/api/router.html#navigateto

注意点：uni.navigateTo的url前面必须+/

uni.navigateTo({
  url:'/pages/goods/goods'
})

uni.navigateTo({
  url:'/pages/goods/goods'
})

相反，pages.json，不能+/

{
  "path" : "pages/goods/goods",
  "style": {
      "navigationBarTitleText": "",
      "enablePullDownRefresh": false
    }          
}

{
  "path" : "pages/goods/goods",
  "style": {
      "navigationBarTitleText": "",
      "enablePullDownRefresh": false
    }          
}

upx/rpx

upx在2018年推出，其初衷是为了让微信的rpx机制可以跨全端使用，在普通css写法里，upx会被编译器编译。但动态绑定时，upx无法被准确编译，此时官方提出了使用uni.upx2px()方法，用来动态计算

后来其他几家小程序平台陆续都兼容了rpx机制，rpx不再是微信的专用单位，而成为了这个行业的通用单位，最近官方收到很多开发小程序的用户投诉upx不能像rpx那样直接支持动态绑定，还得再使用uni.upx2px方法，官方反思了策略，既然微信不可能支持upx的动态绑定，不如我们在App端和H5端来支持rpx的动态绑定。这样rpx就可以全端通用，且支持动态绑定，不再需要uni.upx2px方法

从HBuilderX 2.0.5起，已经支持rpx的正常着色和px2rpx的ide代码提示转换功能，官方也修改了uni-app文档中关于尺寸单位的介绍，不再推荐upx的使用，而推荐rpx

这个策略调整，不影响开发者的已有代码正常运行，开发者仍然可以使用upx和uni.upx2px，也可以改用rpx，都可以。没有必要批量调整老代码。但新开发还是应该使用rpx

顺便提醒另一个事情，很多开发者对响应式单位依赖太严重了，比如组件高度或字体大小也使用upx/rpx，注意只有当你需要某元素的单位要根据屏幕宽度（小范围）大小变化时，才需要rpx这类动态宽度单位，一般情况下高度和字体大小是不应该根据屏幕宽度（等比）变化的

tap/click

在HbuilderX中，两者都是点击时触发事件；不同的是：

@click是组件被点击时触发，会有约300ms的延迟（内置处理优化了）
@tap是手指触摸离开时触发，没有300ms的延迟，但是会有事件穿透
编译到小程序端，@click会被转换成@tap

easycom组件

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件

easycom将其精简为一步

只要组件安装在项目的components目录下或uni_modules目录下，并符合uni-组件名/uni-组件名.vue目录结构，就可以不用引用、注册，直接在页面中使用

easycom按需打包，没有使用的组件会自动剔除，对组件库的使用尤为友好

easycom是自动开启的，不需要手动开启

个性化设置可以在pages.json的easycom节点进行，如关闭自动扫描，或自定义扫描匹配组件的策略。设置参数如下：

属性	类型	默认值	描述
autoscan	Boolean	true	是否开启自动扫描，开启后将会自动扫描符合`components/组件名称/组件名称.vue`目录结构的组件
custom	Object	-	以正则方式自定义组件匹配规则。如果`autoscan`不能满足需求，可以使用`custom`自定义匹配规则

自定义easycom配置的示例

如果需要匹配node_modules内的vue文件，需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则，其中packageName为安装的包名，/path/to/vue-file-$1.vue为vue文件在包内的路径

json

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}

说明

easycom方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件
在组件名完全一致的情况下，easycom引入的优先级低于手动引入（区分连字符形式与驼峰形式）
考虑到编译速度，直接在pages.json内修改easycom不会触发重新编译，需要改动页面内容触发。
easycom只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面
nvue页面里引用.vue后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持easycom

条件编译

在C语言中，通过 #ifdef、#ifndef 的方式，可以为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现

vue

<template>
  <view>
    <!-- #ifdef H5 -->
    <view>h5页面显示</view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>微信小程序页面显示</view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  onLoad() {
    // #ifdef H5
    console.log(111)
    // #endif
    // #ifdef MP-WEIXIN
    console.log(222)
    // #endif
  }
}
</script>

<style>
/* #ifdef H5 */
view {
  color: pink;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view {
  color: green;
}
/* #endif */
</style>

<template>
  <view>
    <!-- #ifdef H5 -->
    <view>h5页面显示</view>
    <!-- #endif -->
    <!-- #ifdef MP-WEIXIN -->
    <view>微信小程序页面显示</view>
    <!-- #endif -->
  </view>
</template>

<script>
export default {
  onLoad() {
    // #ifdef H5
    console.log(111)
    // #endif
    // #ifdef MP-WEIXIN
    console.log(222)
    // #endif
  }
}
</script>

<style>
/* #ifdef H5 */
view {
  color: pink;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view {
  color: green;
}
/* #endif */
</style>

文件上传

uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。另外选择和上传非图像、视频文件参考：https://ask.dcloud.net.cn/article/35547 (opens new window)

uniapp使用scss

style标签一定要加上lang="scss",不然全局的uni.scss里样式不能正常使用

而且里面一定要有内容,不然样式也不能正常使用

scss

<style lang="scss">
page{
}
</style>

<style lang="scss">
page{
}
</style>

webview

嵌套一个线上的html5页面

<template>
  <web-view src="https://zqylzcwcxy.gitee.io/vite-vue-blog/" />
</template>

<template>
  <web-view src="https://zqylzcwcxy.gitee.io/vite-vue-blog/" />
</template>

css变量

https://uniapp.dcloud.net.cn/tutorial/syntax-css.html#css-变量

html

css

    --status-bar-height: 0px;
    --top-window-height: 0px;
    --window-left: 0px;
    --window-right: 0px;
    --window-margin: 0px;
    --window-top: calc(var(--top-window-height) + 0px);
    --window-bottom: 0px;

    --status-bar-height: 0px;
    --top-window-height: 0px;
    --window-left: 0px;
    --window-right: 0px;
    --window-margin: 0px;
    --window-top: calc(var(--top-window-height) + 0px);
    --window-bottom: 0px;

语法 #

pages.json #

pages设置页面 #

去除默认标题 #

globalStyle #

tabBar #

页面跳转api #

upx/rpx #

tap/click #

easycom组件 #

条件编译 #

文件上传 #

uni.uploadFile(OBJECT) #

uniapp使用scss #

webview #

css变量 #

html #

语法

pages.json

pages设置页面

去除默认标题

globalStyle

tabBar

页面跳转api

upx/rpx

tap/click

easycom组件

条件编译

文件上传

uni.uploadFile(OBJECT)

uniapp使用scss

webview

css变量

html