《uniapp跨平台开发——知识总结》

1、uni-app的简介与环境搭建

1.1uniapp 简介

uniapp 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到多个平台

1.2uniapp 优势

1.多端泛滥

2.体验不好

3.生态不丰富

于是针对解决跨平台开发存在问题的 uniapp 顺势而生。

产品特征
1.跨平台更多

2.运行体验更好：

组件、api 与原生小程序一致

兼容 weex 原生渲染，效率高，局部渲染

3.通用技术栈，学习成本更低

vue 的语法，微信小程序的 api
内嵌 mpvue
4.开放生态。组件更丰富

支持通过 npm 安装第三方包
支持微信小程序自定义组件及 SDK
兼容 mpvue 组件及项目
App 端支持和原生
uniapp 功能框架
uniapp 在跨平台的过程中,可以调用平台专有能力。
————————————————

1.3环境搭建

1.安装编辑器：HBuilderX

• H 是 HTML 的首字母
• Builder 是构造者
• X 是 HBuilder 的下一代版本。

我们也简称HX。

HBuilderX 是通用的前端开发工具，但为uniapp做了特别强化

下载 App 开发版，可开箱即用；如下载标准版，在运行或发行uniapp时，会提示安装uniapp插件，插件下载完成后方可使用。

如使用cli方式创建项目，可直接下载标准版，因为 uniapp 编译插件被安装到项目下了。

HBuilderX 的特点如下图所示：

1.4创建 uniapp

步骤：在点击工具栏里的文件 -> 新建 -> 项目，然后我们会看见新建项目的弹窗，默认为普通项目，我们手动选择第二个 uniapp，手动输入项目名，系统会填入默认路径，但是个人可以根据需要进行修改，点击预览即可。

• page：存放所有的页面。

• static：存放静态资源（比如图片，视频，字体，图标等）。

• unpackage：即打包目录，存放各个平台最终打包输出的文件。

• App.vue：项目根组件，所有页面都是在 App.vue 下进行切换的，是页面入口文件，可以调用应用的生命周期。

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

• manifest.json：是应用的配置文件，用于指定应用的名称、图标、权限等。

• pages.json：用来对 uniapp 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等

• uni.scss：为了方便整体控制应用的风格，如按钮颜色、边框风格，本文件里预置了一批 scss 变量预置。

1.5运行项目

步骤：在点击工具栏里的运行 -> 运行到浏览器 -> Chrome/Firefox/IE/Edge 等任意一个浏览器都可，首推 Chrome

运行成功之后，终端会有对应的提示

1.6开发规范

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uniapp有如下开发规范：

• 页面文件遵循Vue 单文件组件(SFC)规范

<template>
  <view>此处必须有一个view,且只能有一个根view。所有内容需要写这个view里面。</view>

</template>
<scrip