uni-app从入门到放弃（上）

OrzR3
4,227 阅读7分钟

相关链接

uni-app从入门到放弃（下）

如果你从未用过uni-app，可以进来看看

关于在uni-app中使用camera组件这档子事

uni-app项目发布成小程序采坑指南

1.基本介绍

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

多平台跨端使用，节约开发成本。

2.环境搭建

1.安装vscode或者HbuilderX开发工具

2.安装微信开发工具

3.项目目录和开发规范

3.1.项目目录和文件作用

pages         

存放uni-app页面

static        

存放静态资源（图片，字体，图标等等）

App.vue   

根组件，所有页面都是在App.vue下进行切换，页面的入口文件

main.js              

项目的入口文件，主要作用是初始化vue实例，并使用需要的插件

manifest.json   

应用的配置文件，配置应用的名称，图标，权限等

pages.json

项目页面的路径，和全局外观

uni.scss

常用的样式变量，整体控制应用的风格

3.2开发规范

为了实现多端兼容，综合考虑编译速度，运行性能等因素，uni-app约定了如下开发规范

  • 页面文件遵循Vue单文件组件（SFC）规范

    Vue 单文件组件 (SFC) 规范：

    vue-loader.vuejs.org/zh/spec.htm…

  • 组件标签靠近小程序规范，详见uni-app组件规范

    uniapp.dcloud.io/component/R…

  • 接口能力（JS API）靠近小程序规范，但需将前缀wx替换为uni，详见uni-app接口规范

    开发规范：

    uniapp.dcloud.io/frame?id=开发…

  • 数据绑定及事件处理同Vue.js规范，同时补充了App及页面的生命周期

  • 为兼容多端运行，建议使用flex布局进行开发

简单说，就是Vue和小程序的混合

4.globalStyle全局外观配置

在pages.json文件中globalStyle属性

用于设置应用的状态栏，导航条，标题，窗口背景色等样式

还可以设置enablePullDownRefresh是否开启下拉刷新

详见：

uniapp.dcloud.io/collocation…

5.创建新页面和页面的配置

在pages文件夹下新建页面文件，

在pages.json里配置文件路径，除了设置路径，还可以设置页面外观样式

代码示例

{
    "pages": [
        {
            "path": "pages/index/index", //首页
            "style": {
                "app-plus": {
                    "pullToRefresh": {
                        "support": true,
                        "color": "#ff3333",
                        "style": "default",
                        "contentdown": {
                            "caption": "下拉可刷新自定义文本"
                        },
                        "contentover": {
                            "caption": "释放可刷新自定义文本"
                        },
                        "contentrefresh": {
                            "caption": "正在刷新自定义文本"
                        }
                    }
                }
            }
        }
    ]
}

配置页面窗口表现，详见：

uniapp.dcloud.io/collocation…     

6.配置基本的tabbar

如果，应用是一个多tab应用，可以通过tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页

代码示例


"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": "接口"
    }]
}

Tips

当设置position为top时，将不会显示icon，top值仅微信小程序支持

tabbar中的list是一个数组，只能配置最少2个，最多3个tab，tab按数组的顺序排序

tabbar的其他属性配置

属性说明，详见：

uniapp.dcloud.io/collocation…

8.condition启动模式配置

启动模式配置，仅开发期间生效，用于模拟直达页面的场景，如：

小程序转发后，用户点击所打开的页面。

在pages.json中配置


"condition": { //模式配置，仅开发期间生效
    "current": 0, //当前激活的模式（list 的索引项）
    "list": [{
            "name": "swiper", //模式名称
            "path": "pages/component/swiper/swiper", //启动页面，必选
            "query": "interval=4000&autoplay=false" //启动参数，在页面的onLoad函数里面得到。
        },
        {
            "name": "test",
            "path": "pages/component/switch/switch"
        }
    ]
}

9.text组件的基本使用

属性说明

selectable          文本是否可选

space                 显示连续空格

decode              是否解码

10.view组件的基本使用

hover-class                           指定按下去的样式

hover-stop-propagation     点击防止冒泡

hover-start-time                  点击延迟

hover-stay-time                   离开延迟

11.button按钮组件的使用

size                  大小

type                 类型

plain                是否镂空

disabled          是否禁用

loading            加载中

其他属性，详见：

uniapp.dcloud.io/component/b…

12.image组件的基本使用

显示图片

src                  图片资源地址

mode             图片剪裁，缩放的模式

lazy-load       懒加载

其他属性，详见：

uniapp.dcloud.io/component/i…

13.uni中样式的学习及如何使用scss和字体图标

  • rpx即响应式px，一种根据屏幕宽度自适应的动态单位。

    以750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕变宽，rpx实际显示效果会等比放大。

  • 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，  用 ; 表示语句结束。

  • 支持基本常用的选择器class，id，element等。

  • 在uni-app中不能使用 * 选择器

  • page相当于body节点

  • 定义在App.vue中的样式为全局样式，作用于每一个页面。

  • 在pages目录下的vue文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖App.vue中相同的选择器。

  • uni-app支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点：

  1. 字体文件小于40kb，uni-app会自动将其转化为base64格式；
  2. 字体文件大于等于40kb，需开发者自己转换，否则使用将不生效；
  3. 字体文件的引用路径推荐使用以~@开头的绝对路径
@font-face {
     font-family: test1-icon;
     src: url('~@/static/iconfont.ttf');
 }

14.基本的数据绑定

在页面中需要定义数据，和我们之前的vue一模一样，直接在data中定义数据即可。

15.v-bind和v-for的使用

和vue一模一样。

16.如何注册事件和传递参数及获取到事件对象

和vue一模一样。

17.生命周期函数的学习

应用的生命周期

生命周期的概念：一个对象从创建，运行，销毁的整个过程被称为生命周期。

生命周期函数：在生命周期中每个阶段会伴随着每一个函数的触发，这些函数被称为生命周期函数

uni-app 支持 onLaunch、onShow、onHide 等应用生命周期函数

详情请参考应用生命周期

函数名说明
onLaunch当uni-app 初始化完成时触发（全局只触发一次）
onShow当 uni-app 启动，或从后台进入前台显示
onHide当 uni-app 从前台进入后台
onError当 uni-app 报错时触发

uni-app 支持 onLoad、onShow、onReady 等生命周期函数

详情请参考页面生命周期

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

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期。

18.下拉刷新

页面生命周期

onPullDownRefresh

监听用户下拉动作，一般用于下拉刷新

使用方法

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

  1. 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。

  2. 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

uni.startPullDownRefresh(OBJECT)

开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

示例

pages.json

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#0faeff",
        "backgroundColor": "#fbf9fe"
    }
}

index.vue

// 仅做示例，实际开发中延时根据需求来使用。
export default {
    data() {
        return {
            text: 'uni-app'
        }
    },
    onLoad: function (options) {
        setTimeout(function () {
            console.log('start pulldown');
        }, 1000);
        uni.startPullDownRefresh();
    },
    onPullDownRefresh() {
        console.log('refresh');
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    }
}

19.上拉加载

页面生命周期

onReachBottom

页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据。

onReachBottom使用注意 可在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件。

示例

pages.json

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true,
                "onReachBottomDistance": 200
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarBackgroundColor": "#0faeff",
        "backgroundColor": "#fbf9fe"
    }
}

index.vue

// 仅做示例，实际开发中延时根据需求来使用。
export default {
    data() {
        return {
            text: 'uni-app'
        }
    },
    onReachBottom() {
        console.log('页面触底了');
      
    }
}
avatar
文章
阅读
粉丝
相关推荐
uni-app从入门到放弃（下）
1.4k阅读
 · 
14点赞
uni-app 微信小程序开发入门
378阅读
 · 
1点赞
uniapp ios 真机调试
3.0k阅读
 · 
3点赞
uniapp打包ios详细步骤流程（windows）
1.4k阅读
 · 
3点赞
手摸手实现uni-app安卓本地打包
3.3k阅读
 · 
16点赞