uniapp常用基础知识

uniapp基础知识

实际上uniapp的API与微信的API大致相似，只是前缀需要改为uni.,同时uniapp新增了许多功能

1. 环境搭建

1.1 新建项目

1.1.1 uniapp

1. 在vscode中使用uniapp 点击
2. 在webstorm中使用uniapp 点击
3. 在hbuilderx中使用

• 1.点击文件 => 2.点击新建 => 3.点击项目
  
• 3.点击uniapp => 4.输入项目名称 => 5.注意路径 => 6.选择模板 => 7.点击创建
  

运行项目
详情点击

1.1.1 微信小程序

详情点击

• 按照步骤拿到AppID

1.2 目录介绍

1.2.1 uniapp

详情点击

1. pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

2. manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。

3. App.vue是我们的跟组件，所有页面都是在App.vue下进行切换的，是页面入口文件，可以调用应用的生命周期函数。

4. main.js是我们的项目入口文件，主要作用是初始化vue实例并使用需要的插件。

5. uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。

6. unpackage就是打包目录，在这里有各个平台的打包文件

7. pages所有的页面存放目录

8. static静态资源目录，例如图片等

9. components组件存放目录

1.2.2 小程序

详情点击

2. 配置

下面是包含了所有配置项的pages.json 详情点击

{
    "pages": [{
        "path": "pages/component/index",
        "style": {
            "navigationBarTitleText": "组件"
        }
    }, {
        "path": "pages/API/index",
        "style": {
            "navigationBarTitleText": "接口"
        }
    }, {
        "path": "pages/component/view/index",
        "style": {
            "navigationBarTitleText": "view"
        }
    }],
    "condition": { //模式配置，仅开发期间生效
        "current": 0, //当前激活的模式（list 的索引项）
        "list": [{
            "name": "test", //模式名称
            "path": "pages/component/view/index" //启动页面，必选
        }]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "演示",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8",
        "usingComponents":{
            "collapse-tree-item":"/components/collapse-tree-item"
        },
        "renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
        "pageOrientation": "portrait"//横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "10px",
        "iconWidth": "24px",
        "spacing": "3px",
        "list": [{
            "pagePath": "pages/component/index",
            "iconPath": "static/image/icon_component.png",
            "selectedIconPath": "static/image/icon_component_HL.png",
            "text": "组件"
        }, {
            "pagePath": "pages/API/index",
            "iconPath": "static/image/icon_API.png",
            "selectedIconPath": "static/image/icon_API_HL.png",
            "text": "接口"
        }],
        "midButton": {
            "width": "80px",
            "height": "50px",
            "text": "文字",
            "iconPath": "static/image/midButton_iconPath.png",
            "iconWidth": "24px",
            "backgroundImage": "static/image/midButton_backgroundImage.png"
        }
    },
  "easycom": {
    "autoscan": true, //是否自动扫描组件
    "custom": {//自定义扫描规则
      "uni-(.*)": "@/components/uni-$1.vue"
    }
  }
}

2.1 全局配置

详情点击
常用配置

属性	类型	默认值	描述	平台差异说明
navigationBarBackgroundColor	HexColor	#F7F7F7	导航栏背景颜色（同状态栏背景色）	APP与H5为#F7F7F7，小程序平台请参考相应小程序文档
navigationBarTextStyle	String	white	导航栏标题颜色及状态栏前景颜色，仅支持 black/white2
navigationBarTitleText	String		导航栏标题文字内容

2.2 页面配置

2.2.1 页面的基础配置

详情点击

属性	类型	描述
path	String	配置页面路径
style	Object	配置页面窗口表现，配置项参考下方 pageStyle

2.2.2 页面的下拉刷新

详情点击

{
  "pages": [{
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",//设置页面标题文字
        "enablePullDownRefresh":true//开启下拉刷新
      }
    },
    ...
  ]
}

2.3 tabbar配置

详情点击

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        "iconPath": "static/image/icon_component.png",
        "selectedIconPath": "static/image/icon_component_HL.png",
        "text": "组件"
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}

3. 组件

详情点击

3.1 text

详情点击

3.2 view

详情点击

3.3 button

详情点击

3.4 image

详情点击

3.5 map

详情点击

4. uni-app 的生命周期

---

详情点击

4.1 应用生命周期

应用声明周期尽在App.vue中起作用

函数名	说明
onLaunch	当uni-app 初始化完成时触发（全局只触发一次）
onShow	当 uni-app 启动，或从后台进入前台显示
onHide	当 uni-app 从前台进入后台
onUniNViewMessage	对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯

4.2 组件生命周期

常用生命周期

函数名	说明
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化 App、微信小程序

4.3 下拉触底生命周期

函数名	说明
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是scroll-view滚到底），常用于上拉加载下一页数据。如使用scroll-view导致页面级没有滚动，则触底事件不会被触发

• 下拉刷新 详情点击
• 触底：默认距底部50px执行此函数，如果想要调整距离，请点击

5. API

5.1 网络请求

详情点击

5.2 数据缓存

详情点击

• uni.setStorage
• uni.setStorageSync
• uni.getStorage
• uni.getStorageSync
• uni.removeStorage

5.3 跳转页面

详情点击
在跳转页面时传递参数

• 传递参数的组件

url:'pages/index/index?id=4'

• 接收参数的组件

onLoad(options){
 console.log(options.id)
}

5.4 媒体图片

详情点击

6.条件注释

详情点击

7.其他说明

7.1 单位rpx

说明

• rpx是uniapp和微信小程序中的一种响应式单位，可以根据屏幕宽度进行自适应
• 他规定了屏幕宽为750 rpx

转换

• px换算rpx :750/屏幕宽度，他所代表的就是1rpx=x px
• 一般移动端的设计图纸就是 750px，我们可以直接使用，不用担心转化