【云+社区年度征文】uni-app初体验

引言

随着这几年前端开发的迅速发展，各式各样的前端框架一下子都涌了出来。今天我要为大家介绍一款移动端主流的前端框架 —— uni-app。 我第一次听到它，是在前几个月公司要开发一款 APP，而恰好公司并没有安卓和 IOS 的开发人员，我也没有类似的客户端开发经验，而再招人所用的时间成本和开发成本将大大超出预算。这个时候朋友向我推荐了 uni-app 这款框架，使用这款框架开发的轻应用，不仅可以打包成安卓和 IOS 应用，更支持市场主流的各种小程序，可真是 一套代码，多处发布 啊。 学习 uni-app 必须要有 Vue 的基础，否则你将很难学会 uni-app。

一、uni-app概述

uni-app 是 2018 年由 DCloud 推出的一款基于 Vue.js 开发的前端框架，它主要用于移动端开发，不过随着它不断的更新，更有人用它开发出了很多漂亮的 PC 端界面。 开发者使用 uni-app 编写的一套代码，可同时发布到 IOS、Android、H5、以及各种小程序（微信、支付宝、百度、头条、QQ、钉钉）等多个平台。一套代码，多处发布，这正是它特有的优势。 这款强大的框架我们一般推荐大家使用 HBuilderX 进行开发，HBuilderX 作为通用的前端开发工具，尤其是对 uni-app 做了特别的强化。 HBuilderX 下载地址：https://dcloud.io/hbuilderx.html 本篇博客以 微信小程序、H5 和 Android 为例带大家进入 uni-app 的大门。俗话说师父领进门，修行在个人，要想熟练掌握一门技术还是要老老实实的去看官方文档。本人整理的博客笔记只作简单介绍，具体还要看官方文档。

二、HelloWorld

我还是惯用的伎俩带大家先走进并体验 uni-app 的神奇之处，本章以 微信小程序、H5 和 Android 平台为例带大家领略 uni-app 不一样的世界。

1、环境搭建

推荐大家使用 HBuilderX 作为 uni-app 的开发工具。 HBuilderX 下载地址：https://dcloud.io/hbuilderx.html

1）微信小程序

开发微信小程序，必须先安装微信开发者工具（下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html，选择 稳定版），运行微信小程序，第一次运行可能需要在 微信开发者工具 中开启服务端口。

微信开发者工具

开启微信开发者工具的服务端口

而在 HBuilderX 中首次运行微信小程序需要配置 微信开发者工具 的路径：

运行小程序

小程序运行配置

2）H5应用

与配置小程序类似，若 HBuilderX 找不到浏览器的时候，需要手动配置浏览器的安装路径，方便一键打开浏览器。

运行H5

3）安卓应用

我们可以通过真机测试，也可以通过安卓模拟器测试，我们需要在手机或模拟器上开启开发者调试，由于每种手机操作不同，在此不作过多介绍，需要时请根据手机的品牌请教度娘。使用真机或模拟器调试时，可能会遇到各种各样的问题，由于问题情况过多，请直接参考 DCloud 社区中连接真机的常见问题。

2、新建项目

之所以选择使用 HBuilderX，是因为它对 uni-app 作了特别的强化，可以快速生成 uni-app 模板，方便我们的开发。

新建项目

新建项目2

3、目录结构

目录结构

为了实现多端兼容，也综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范（摘自官网）：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范；
• 组件标签靠近小程序规范，详见 uni-app 组件规范；
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见 uni-app接口规范；
• 数据绑定及事件处理同 Vue.js 规范，同时补充了 App 及页面的生命周期；
• 为兼容多端运行，建议使用 flex 布局进行开发。

3、组件代码

在 Vue 的世界中，一切皆组件，一个组件有一套属于自己的 JS、HTML、CSS 代码。

<template>
    <!-- HTML代码 -->
</template>
​
<script>
    // JS 代码
    export default {
        data() {
            return {
                
            };
        },
        methods: {
            
        }
    }
</script>
​
<style>
    /* CSS 代码 */
</style>

三、基本配置（page.json）

1、全局外观配置（globalStyle）

globalStyle：全局外观配置。主要用来配置界面的样式部分。

• navigationBarBackgroundColor：类型为 HexColor，导航栏背景颜色，同状态栏背景色；
• navigationBarTextStyle：类型为 String，导航栏标题颜色及状态栏前景颜色，它的值仅支持 black / white；
• navigationBarTitleText：类型为 String，导航栏标题文字内容；
• backgroundColor：类型为 HexColor，窗口的背景色；
• backgroundTextStyle：类型为 String，下拉 loading 的样式，它的值仅支持 dark / light；
• enablePullDownRefresh：类型为 Boolean，是否开启下拉刷新；
• onReachBottomDistance：类型为 Number，页面上拉触底事件触发时距页面底部距离，单位只支持 px。

{
    "pages": [
        // ...
    ],
    // 全局外观配置
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        // ...
    }
}

2、单页面配置（pages）

pages：单页面配置。 数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages

• path：类型为 String，配置页面路径；
• style：类型为 Object，配置页面窗口表现。

{
    // 单页面配置
    "pages": [
        "path" : "pages/mes/mes",
        "style" : {
            "navigationBarTitleText": "haha"
        }
    ],
    // 全局外观配置
    "globalStyle": {
        // ...
    },
    "tabBar": {
        // ...
    }
}

3、配置导航应用（tabBar）

tabBar：导航应用。 一个页面配置 tabBar 的数量为 2 ~ 5 个，仅微信小程序支持 top 的 tabBar。

• color：类型为 HexColor，tab 上的文字默认颜色；
• selectedColor：类型为 HexColor，tab 上的文字选中时的颜色；
• backgroundColor：类型为 HexColor，tab 的背景色；
• borderStyle：类型为 String，tabbar 上边框的颜色，可选值 black / white；
• position：类型为 String，可选值 bottom、top，其中 top 值仅微信小程序支持；
• list：类型为 Object，tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab。

{
    // 单页面配置
    "pages": [
        // ...
    ],
    // 全局外观配置
    "globalStyle": {
        // ...
    },
    // 导航应用
    "tabBar": {
        "color":"#4CD964",   // 未选中的字体颜色
        "selectedColor":"#F0AD4E",   // 选中的字体颜色
        // "backgroundColor":"#007AFF",   // 背景颜色
        "borderStyle":"white",   // 边框颜色
        "position":"top",   // 位置，微信支持 top 和 bottom，其他只支持 bottom
        "list": [
            {
                "text":"首页",
                "pagePath":"pages/index/index",
                "iconPath":"static/tabs/home.png",
                "selectedIconPath":"static/tabs/home-active.png"
            },
            {
                "text":"信息",
                "pagePath":"pages/mes/mes",
                "iconPath":"static/tabs/message.png",
                "selectedIconPath":"static/tabs/message-active.png"
            },
            {
                "text":"我们",
                "pagePath":"pages/contact/contact",
                "iconPath":"static/tabs/contact.png",
                "selectedIconPath":"static/tabs/contact-active.png"
            }
        ]
    }
}

注： tabBar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的 onShow，不会再触发 onLoad。

4、启动模式配置（condition）

condition：启动模式。 仅在微信小程序开发期间生效，用于模拟直达页面的场景。

{
    // 单页面配置
    "pages": [
        // ...
    ],
    // 全局外观配置
    "globalStyle": {
        // ...
    },
    // 导航应用
    "tabBar": {
        // ...
    },
    // 启动模式配置
    "condition":{
        "current":0,
        "list":[
            {
                "name":"信息页面",
                "path":"pages/mes/mes",
                "query":"id=77"
            }
        ]
    }
}

​

喜欢就收藏，点赞，评论支持 三连啊！

如果喜欢我的文章就点赞，收藏，评论下 啊！第一次参数年度征文，我也想冲一个奖，还需要大家多多支持，谢谢！ 欢迎交流！若文章中有不恰当的地方，请您一定要告诉我。前路崎岖，望我们可以互相帮助，并肩前行！

​