前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【云+社区年度征文】uni-app初体验

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

原创
作者头像
小异常
修改2020-12-11 14:35:13
2.6K21
修改2020-12-11 14:35:13
举报
文章被收录于专栏:移动端

引言

随着这几年前端开发的迅速发展,各式各样的前端框架一下子都涌了出来。今天我要为大家介绍一款移动端主流的前端框架 —— 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
运行H5

3)安卓应用

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

2、新建项目

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

新建项目
新建项目
新建项目2
新建项目2

3、目录结构

目录结构
目录结构

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

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

3、组件代码

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

代码语言:javascript
复制
<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。
代码语言:javascript
复制
{
    "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,配置页面窗口表现。
代码语言:javascript
复制
{
    // 单页面配置
    "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。
代码语言:javascript
复制
{
    // 单页面配置
    "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:启动模式。 仅在微信小程序开发期间生效,用于模拟直达页面的场景。

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

喜欢就收藏,点赞,评论支持 三连啊!

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

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 引言
  • 一、uni-app概述
  • 二、HelloWorld
    • 1、环境搭建
      • 1)微信小程序
      • 2)H5应用
      • 3)安卓应用
    • 2、新建项目
      • 3、目录结构
        • 3、组件代码
        • 三、基本配置(page.json)
          • 1、全局外观配置(globalStyle)
            • 2、单页面配置(pages)
              • 3、配置导航应用(tabBar)
                • 4、启动模式配置(condition)
                  • 喜欢就收藏,点赞,评论支持 三连啊!
                  相关产品与服务
                  云开发 CloudBase
                  云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档