uni-app应用开发基础

前言

学完上一节uni-app的基础知识后就可以跟着本小册开始学习uniCloud云开发了。本节内容不是学习本小册必备的，但有助于更加深入了解uni-app的能力。

页面和生命周期

移动端的应用程序都是由一个或多个页面组织成的，uni-app的页面文件遵循 Vue 单文件组件 (SFC) 规范，数据绑定及事件处理和 Vue.js 规范相同，同时补充了App及页面的生命周期

应用的主要生命周期

• onLaunch

当uni-app 初始化完成时触发（全局只触发一次）

• onShow

当 uni-app 启动，或从后台进入前台显示

• onHide

当 uni-app 从前台进入后台

应用生命周期仅可在App.vue中监听，在其它页面监听无效

页面的主要生命周期

• onLoad（页面被加载）
• onShow（页面被显示）
• onReady（页面初次渲染）
• onHide（页面隐藏）
• onUnload（页面卸载）
• onPullDownRefresh（下拉刷新时）
• onReachBottom（滚动到页面底部时）
• onShareAppMessage（分享到聊天对话时）

image.png

NPM支持

uni-app支持使用npm安装第三方包。

初始化npm工程

由HBuilderX创建的uni-app项目，默认没有使用npm管理依赖（项目根目录下无package.json文件），我们需要先在项目根目录执行命令来初始化npm工程：

npm init -y

安装依赖

在项目根目录执行命令安装npm包：

npm install packageName --save

导入和使用

安装完即可使用npm包，js中引入npm包：

import package from 'packageName'
const package = require('packageName')

注意事项

大部分npm的包并不是面向uni-app使用的，为兼容性考虑，建议优先从uni-app插件市场 搜索可用的插件。在使用npm库的兼容性问题大部分会在使用第三方ui库时遇到，由于我们使用uni-app多数是面向跨端开发，所以你最好了解下《关于uni-app的ui库、ui框架、ui组件》

条件编译

uni-app所支持的每个平台都有自己的一些特性，因此会存在一些无法跨平台的情况。所以 uni-app 提供了条件编译的方式，可以在一个工程里优雅的完成平台个性化的实现。

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

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

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM% ：平台名称

比如目前只有微信小程序平台才有的关注公众号组件，我们可以用条件编译使得这个组件仅在编译到微信小程序时才会包含进去

<view> 
    <view>微信公众号关注组件</view>
    <view> 
    <!-- uni-app未封装，但可直接使用微信原生的official-account组件--> 
    <!-- #ifdef MP-WEIXIN --> 
    <official-account></official-account> 
    <!-- #endif --> 
    </view> 
</view>

支持的文件

• .vue
• .js
• .css
• pages.json
• 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

注意：

• 条件编译是利用注释实现的，在不同语法里注释写法不一样，js使用 // 注释、css 使用 /* 注释 */、vue/nvue 模板里使用 <!-- 注释 -->；
• 条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；
• 使用条件编译请保证编译前和编译后文件的正确性，比如json文件中不能有多余的逗号；
• VUE3 需要在项目的 manifest.json 文件根节点配置 "vueVersion" : "3"

微信小程序转uni-app

如果你已经使用微信小程序原生框架编写了小程序项目，可以通过以下方式将微信小程序项目转为uni-app项目

npm install miniprogram-to-uniapp -g

wtu -i 微信小程序项目目录

转换插件仓库：https://github.com/zhangdaren/miniprogram-to-uniapp