阅读 645
uni-app从入门到放弃(上)

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('页面触底了');
      
    }
}
复制代码
文章分类
前端
文章标签