uni-app跨端框架开发入门及实战（1）

沈麽鬼
463 阅读8分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第17天，点击查看活动详情

介绍

Alt

uni-app是流行跨端开发框架之一，其采用Vue.js框架，开发者编写一套代码，即可发布到ios、Android、H5、微信小程序、支付宝小程序、钉钉小程序等多个平台。

本书是uni-app从入门到提高的实战教程，基础篇主要对uni-app的组件、语法、api进行详细讲解，项目篇以今日头条新闻APP开发为例，详解接口安全、接口交互、多图上传、服务器部署等常用知识点，并进行H5、Android、微信小程序的多端发布。

编者拥有15年软件开发经验，是一本来自一线开发的经验、心得与实践的技术分享，具备vue.js基础，便可使用本教程快速开发自己的移动应用。教程充分考虑初学者学习特点，内容安排循序渐进，由易到难，语言描述通俗有趣，并对代码进行详尽注释，并发布到gitee供读者下载学习。

目标人群

具备Html/Css/JavaScript基础知识，熟悉es6新增特性，掌握vue.js框架，适合移动开发的广大从业者、有志于转型App开发的程序员、App开发的业余爱好者阅读。

大纲

第1部分 uni-app介绍

1.1 uni-app基本介绍

uni-app是国内Dcloud公司的一款前端快速开发框架，使用vue.js为开发语言，Api参照了微信小程序，具备一套代码，多端发布的特性，具体表现为：

  1. 平台能力不受限 在跨端的同时，通过条件编译+平台特有API调用，可以优雅的为某平台写个性化代码，调用专有能力而不影响其他平台。支持原生代码混写和原生sdk集成。
  2. 性能体验优秀 加载新页面速度更快、自动diff更新数据。App端支持原生渲染，可支撑更流畅的用户体验。小程序端的性能优于市场其他框架。
  3. 学习成本低 基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。
  4. 开发成本低 HBuilderX是高效开发神器，熟练掌握后研发效率至少翻倍，不止开发成本，招聘、管理、测试各方面成本都大幅下降。
  5. 周边生态丰富 插件市场数千款插件。支持NPM、支持小程序组件和SDK。微信生态的各种sdk可直接用于跨平台App

1.2 uni-app环境搭建

1.2.1 HBuilderX的安装

uni-app开发推荐官方开发的编辑器-HBuilderX，它具有强大的代码提示，丰富的插件市场，支持APP的云端编译，并配合Git实现分布式版本控制。

官方下载地址：www.dcloud.io/hbuilderx.h…

以windows系统为例，下载zip压缩包后，解压到硬盘目录即可使用。

image-20220808115441496

1.2.2 创建uni-app项目

在Hb开发工具中，依次选择文件、新建、项目菜单，在新建项目对话框左侧选择uni-app项目，在右侧依次填写项目名称、保存地址、默认模板，默认使用Vue2的版本(本次课程也是采用Vue2版本)，点击创建，即可建立一个空项目。

image-20220808140505463

1.2.3 项目目录

创建完的uni-app项目会出现在Hb的项目管理器中，默认会生成pages、static两个文件夹和App.vue等6个文件。

image-20220727132325567

1.3 项目目录及规范

1.3.1 项目目录

项目目录内容介绍：

文件夹或文件用途
pages文件夹该文件夹存放我们业务页面文件。
static文件夹static文件夹存放静态资源，如images/video等。注意：静态资源只能存放于此，编译到任意平台时，static 目录下的文件均会被完整打包进去，非 static 目录下的文件（vue、js、css 等）只有被引用到才会被打包编译进去。
App.vueApp.vue 用来配置App全局样式以及监听事件，类似vue工程App.vue，但无template部分
index.html
main.jsApp.vue 是项目主入口文件
manifest.json配置应用名称、appid、logo、版本等打包信息
pages.json配置页面路由、导航条、选项卡等页面类信息
uni.scssuni-app内置的常用样式变量
1.3.2 规范
  • 页面规范

业务页面时符合Vue单文件规范的.vue或.nvue文件。区别在于渲染方式不同，.vue渲染是用webview，.nvue渲染是原生渲染。

Tip：什么webview？什么是原生渲染？

webview，是一个基于webkit的引擎，移动端操作系统一个控件，它和浏览器渲染的原理基本是相同的，所以webview渲染，可以理解成使用手机浏览器来展示页面。

原生渲染，指的调用操作系统的原生控件来展示页面，nvue即 native vue的缩写，是uni-app的使用Weex框架的渲染方式。

view->layout->renderNode ->合成->GPU渲染

html->dom tree ->render tree ->render layer + 栅格化 ->合成->gpu渲染

在渲染性能上，原生渲染 > webview；但是原生渲染nvue开发，有一些局限：

  1. nvue 页面控制显隐只可以使用v-if不可以使用v-show。
  2. nvue 页面只能使用flex布局，不支持其他布局方式。
  3. 文字内容，必须、只能在<text>组件下，只有<text>标签可以设置字体大小，字体颜色。
  4. 不支持背景图background-image。但可以使用<image>组件和层级来实现类似web中的背景效果。
  5. css选择器支持的比较少，只能使用 class 选择器，class 进行绑定时只支持数组语法
  6. 在 App.vue 中定义的全局js变量不会在 nvue 页面生效。globalData和vuex是生效的.
  7. 不能在 style 中引入字体文件。

.vue和.nvue可以混合一起使用，.nvue更适合App开发些需要高性能渲染场景，如无线列表、瀑布流，深度使用map、video等业务。.nvue作为App的首页，可以大大提高App的启动速度。通常用法是 App 首页使用 .nvue，二级页使用 vue 页面。

uni-app无法使用js进行html文档的DOM操作，请严格遵循vue的MVVM的数据绑定开发方式。

Vue单文件规范：

  • 一个vue的文件中只能包含一个顶级的<template></template>模板
  • 一个vue文件只能包含一个<script></script>脚本定义
  • 一个vue文件可以包含一个或多个<style></style>样式定义
  • 组件接口规范

uni-app 项目中，页面引用组件和组件引用组件的方式都是一样的（可以理解为：页面是一种特殊的组件），均支持通过 easycom 方式直接引用。只要组件安装在项目的components目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

uniapp的接口能力（JS API）非常接近微信小程序规范，但需将前缀 wx 替换为 uni。

  • css样式规范

  1. 全局样式与局部样式

    uni.scss文件中预置了一些全局样式scss变量，这些变量用于定义应用的整体样式风格，比如：文字颜色、背景颜色、边框颜色等等。 需要注意的是这个文件不要随意修改，如果要更改的话只能修改变量的值，不要修改变量的名。

    uniapp的局部样式实现是以vue文件为单位的，在某个vue文件内定义的样式，只在该vue的渲染范围内生效。

  2. 尺寸响应式

    uniapp框架为了更好的适配不同的移动端屏幕，设置了750rpx为屏幕的基准宽度。如果屏幕宽度小，rpx显示效果会等比缩小；如果屏幕宽度大，rpx显示效果会等比例放大。

    举例说明： 如果设计稿的元素宽度是600px，某元素X的宽度是100px，那么该元素X在uniapp里面设置的宽度应该是：750 * 100 /600 = 125rpx。

    如果大家觉得自己手动计算比较麻烦，可以在文件manifest.json中设置transformPx的值为true，项目会自动将px转换为rpx。****

  3. 字体的使用

    uniapp支持字体的引用方式分为2种情况，如果字体文件小于 40kb，uniapp会自动将其转化为 base64 格式；将字体文件放置到static目录下，然后通过font-face定义字体。

      @font-face {
      font-family: 'test-icon';
      src: url('~@/static/iconfont.ttf');
  }

    如果字体文件大于等于 40kb， 需开发者自己转换将字体文件转换成Base64字符串，否则使用将不生效；将转换之后的Base64字符串粘贴到下文的位置，完成字体的定义。

     @font-face {
     font-family:  'test-icon';
     font-weight: normal;
     font-style: normal;
     src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
 }

  4. 请使用flex布局方式

    为更好的支持跨平台，uniapp框架建议使用css的Flex方式布局。

avatar
文章
阅读
粉丝