uniapp 介绍

什么是 uniapp

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到 iOS、Android、Web、以及各种小程序、快应用等多个平台，简单来说就是一套代码多端使用

uni-app 的优点

跨平台发行，运行体验更好

与小程序的组件、API 一致；兼容 weex 原生渲染，增加了开发效率高，但是由于 weex 坑比较多，建议还是使用局部渲染优化；通用前端技术栈,学习成本更低

支持 vue 语法，微信小程序 API 内嵌 mpvue 开发生态,组件更丰富

支持通过 npm 安装第三方包支持微信小程序自定义组件及 JS SDK 兼容 mpvue 组件及项目(内嵌 mpvue 开源框架)App 端支持和原生混合编码插件丰富,DCloud 将发布插件到市场

如何创建 uniapp 项目

安装 HBuilderX

开发 uniapp 首选 HBuilderX，无需配置 nodejs、vue 等，快速创建项目

下载 HBuilderX 后先安装一些需要用到的插件，点击工具栏选择插件安装，把安装新插件这一页都安装了

创建新项目

点击创建新项目，选择 uniapp 项目，一般选择默认模板，vue 版本自选

一个 uniapp 基本的目录结构

pages业务页面文件存放目录，static静态资源存放目录，App.vue应用配置，main.js初始化入口文件，manifest.json配置应用名称，appId,logo 等，pages.json配置路由，导航条，底部导航栏等信息

生命周期

uniapp 生命周期分为页面生命周期和应用生命周期，页面生命周期是针对页面的，应用生命周期是针对整个小程序/app，如果你的项目是小程序或者 app，是没有 dom 的，可能在页面初始化或挂载完时进行一些操作没反应，建议使用页面生命周期的 onReady 代替应用生命周期mounted，onLoad代替created

uniapp 路由

uniapp 的路由全部都配置在pages.json文件中，跳转页面使用 uniapp 自带的方法：

• uni.navigateTo(OBJECT)保留当前页面，跳转到应用内的某个页面

• uni.redirectTo(OBJECT)关闭当前页面，跳转到应用内的某个页面

• uni.reLaunch(OBJECT)关闭所有页面，打开到应用内的某个页面

• uni.switchTab(OBJECT)跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

• uni.navigateBack(OBJECT)关闭当前页面，返回上一页面或多级页面

注意： 没有专门的$route和$router对象，只能在页面的生命周期里接收路由参数，且uni.switchTab(OBJECT)无法传参

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台

写法：以 #ifdef 或 #ifndef 加 %PLATFORM%  开头，以 #endif 结尾

%PLATFORM% 取值:

如果是多端开发，条件编译很关键，例如：小程序和 h5 自带头部导航栏，app 没有,就需要自定义一个头部导航栏，使用条件编译设置仅在 app 端时添加头部导航栏

安装插件

插件市场有大量插件，直接点击 使用 HBuilderX 导入插件 ，安装完项目根目录下会出现一个 uni_modules 文件夹，里面存放安装好的插件，直接使用就行了

运行

app 运行：根据手机系统选择安装基座

安装安卓基座需要在开发者模式打开 USB 调试和 USB 安装

ios 基座 emm......，自定义基座吧

小程序运行：点击运行到小程序模拟器，运行到你要运行的开发者工具上，注意要在 manifest.json 里配置好小程序 appid

h5 运行:

h5 运行需要新建入口文件 template.h5.html，将里面的代码复制进来，在小程序开发者工具里将开发模式更换为公众号网页调试，然后运行到浏览器将地址复制进去

注意事项

1.运行到微信小程序中，需要请求第三方网站数据时，都是直接调用 wx.request 接口的，但是当我们在程序中实际调用以上程序时，就会报错：“xxxxxxxxxx 不在合法域名列表中，为了简便开发，我们要在微信开发者工具点击详情->勾选不校验合法域名，但是这只是为了简化开发，当需要发布时，这种方式是行不通的。这个时候就需要去微信公众平台配置合法域名了

2.微信小程序的调试基础库也别设置太高了，可能会有莫名的错误，看哪个用户占比高就选哪个

3.小程序不能设置 background-image 为本地图片，应该使用 base64 格式或者 image 标签或者 https 连接的方式

4.app 图标只能为 png 格式

5.如果运行到小程序端出现莫名的错误，停止运行，关掉开发者工具，再重新运行，大概率没问题了

6.uniapp 中的 NavigationBar 导航栏和 TabBar 底部选项卡高度是固定的不可修改