一、初步认识
- HBuilderX官方IDE下载地址: http://www.dcloud.io/hbuilderx.html
- 选择版本: 下载App开发版,可开箱即用;
- 如使用cli方式创建项目,可直接下载标准版
- 创建uni-app: 工具栏里的文件 -> 新建 -> 项目 -> 选择uni-app,输入工程名
- 运行uni-app: 快捷键 ctrl+r 选择运行方式
- 显示项目目录: 视图 -> 显示文档结构图
- 发布为微信小程序:
- 申请微信小程序AppID
- 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信",输入小程序名称和appid点击发行即可在 unpackage/dist/build/mp-weixin 生成微信小程序项目代码
- 在微信开小程序发者工具中,导入生成的微信小程序项目
- 测试项目代码运行正常后,点击“上传”按钮,之后按照 “提交审核” => “发布” 小程序标准流程,逐步操作即可
- 不建议使用vue-cli创建项目:必须使用vue-cli3.X,vue-cli更新快于HBuilderX
npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project //运行并发布微信小程序版uni-app
npm run dev:mp-weixin
npm run build:mp-weixin - 学习uni-app路径:
- uni-app首页介绍 https://uniapp.dcloud.io/quickstart
- 快速上手 https://uniapp.dcloud.io/quickstart
- 3节官方教程 https://ke.qq.com/course/343370?taid=2788142445051210
- 白话uni-app http://ask.dcloud.net.cn/article/35657
- 培训实战视频 https://ke.qq.com/course/379043?from=800006421
- 不太需要专门去学习小程序开发,只看uni-app官网即可
- 注意vuejs可以在html中使用,而uni-app里没有HTML,直接就是vue文件。
- 另外vue的路由、npm可以不学
- uni-app官方教程学习手记 https://segmentfault.com/a/1190000017020710
- 跨端开发注意每个端,有每个端的管理规则
- H5端的浏览器有跨域限制;
- 微信小程序会强制要求https链接,并且所有要联网的服务器域名都要配到微信的白名单中;
- uni-app基于Vue 2.0实现,虽然使用vue,但在app和小程序里,不是spa,而是mpa
二、框架简介
- 开发规范:
- 页面文件遵循 Vue 单文件组件 (SFC) 规范。每个 .vue 文件包含三种类型的顶级语言块 <template>、<script> 和 <style>,还允许添加可选的自定义块
- 组件标签靠近小程序规范
- 接口能力(JS API)靠近微信小程序规范,但需将前缀 wx 替换为 uni
- uni-app API文档:https://uniapp.dcloud.io/api/README
- uni.on 开头的 API 是监听某个事件发生的 API 接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。
- 如未特殊约定,其他 API 接口都接受一个 OBJECT 作为参数。
- OBJECT 中可以指定 success,fail,complete 来接收接口调用结果。
- 数据绑定及事件处理同 Vue.js 规范,同时补充了App及页面的生命周期
- 为兼容多端运行,建议使用flex布局进行开发
三、目录结构
┌─components uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─hybrid 存放本地网页的目录,详见
├─platforms 存放各平台专用页面的目录,详见
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用静态资源(如图片、视频等)的目录,注意:静态资源只能存放于此
├─wxcomponents 存放小程序组件的目录,详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置,用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息,详见
└─pages.json 配置页面路由、导航条、选项卡等页面类信息,详见
注意:
- static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
- css、less/scss 等资源同样不要放在 static 目录下,建议这些公用的资源放在 common 目录下。
- 有效目录: h5 -> H5 、mp-weixin -> 微信小程序
四、生命周期
- 应用生命周期:
- onLaunch 当uni-app初始化完成时触发(全局只触发一次)
- onShow 当uni-app启动,或从后台进入前台显示
- onHide 当uni-app从前台进入后台
- onUniNViewMessage 对nvue页面发送的数据进行监听(与微信小程序不同的,nvue向vue的通讯)
- 注意: 应用生命周期只可以在App.vue中监听,其它页面监听无效
- 页面生命周期
- onLoad、onShow、onReady、onHide、onUnload、onResize
- onPullDownRefresh、onReachBottom、onShareAppMessage、onBackPress……
五、路由
- 在pages.json里配置每个路由页面的路径及页面样式,不支持 Vue Router
{
"pages": [
{
"path": "pages/index/index",
"style": { ... }
}, {
"path": "pages/login/login",
"style": { ... }
}
]
} - 路由跳转
- 使用navigator组件跳转 https://uniapp.dcloud.io/component/navigator
<template>
<view>
<view class="page-body">
<view class="btn-area">
<navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
<button type="default">跳转到新页面</button>
</navigator>
<navigator url="redirect/redirect?title=redirect" redirect hover-class="other-navigator-hover">
<button type="default">在当前页打开</button>
</navigator>
</view>
</view>
</view>
</template> - 调用Api跳转
uni.navigateTo(OBJECT): 保留当前页面,跳转到应用内的某个页面 // -----> uni.navigateBack: 返回原页面 uni.navigateTo({
url: 'test?id=1&name=uniapp'
}); uni.redirectTo(OBJECT):关闭当前页面,跳转到应用内的某个页面 uni.reLaunch(OBJECT):关闭所有页面,打开到应用内的某个页面 uni.switchTab(OBJECT):跳转到tabBar页面,并关闭其他所有非tabBar页面 // -----> pages.json: {
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},{
"pagePath": "pages/other/other",
"text": "其他"
}]
}
} // ------> other.vue: uni.switchTab({
url: '/pages/index/index'
}); uni.navigateBack(OBJECT):关闭当前页面,返回上一页面或多级页面。 可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。
- 注意:
- 页面跳转路径有层级限制,不能无限制跳转新页面
- 路由API的目标页面必须是在pages.json里注册的vue页面。
- 如果想打开web url,H5平台使用 window.open;小程序平台使用web-view组件(url需在小程序的联网白名单中)
- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定,即只要是定义为 tabBar 的页面,底部都有 tabBar。
- 不能在 App.vue 里面进行页面跳转
六、页面栈
- 与微信小程序相同,框架以栈的形式管理当前所有页面, 当发生路由切换的时候,会有页面出栈、入栈变化
- 初始化、打开新页面:新页面入栈
- 页面重定向:当前页面出栈、新页面入栈
- 页面返回:页面全部出栈、只留下新的Tab页面
- Tab切换、重加载:页面全部出栈、只留下新的页面
- 运行环境判断
- 开发环境和生产环境: 通过process.env.NODE_ENV判断 'development'/'production'
- 在HBuilderX 中,点击“运行”编译出来的代码是开发环境,点击“发行”编译出来的代码是生产环境
- 页面样式与布局
- 尺寸单位
- px 即屏幕像素
- upx 是uni-app提供的一种根据屏幕宽度自适应的动态单位。【以750宽的屏幕为基准,屏幕变宽,upx实际显示效果会等比放大】
- vh 是视窗高度的百分比
- upx转换: 设计稿 1px / 设计稿基准宽度 = 框架样式 1upx / 750upx
- 页面元素宽度: 750 * 元素在设计稿中的宽度 / 设计稿基准宽度
- HBuilderX中自动转换px为upx工具 :https://ask.dcloud.net.cn/article/35445
- upx2px
- upx是编译器处理的,手机端静态赋值生效,动态赋值无法生效。
- 可使用 uni.upx2px(Number) 转换为 px 后再赋值。
<script>
export default {
computed: {
halfWidth() {
return uni.upx2px(750 / 2) + 'px';
}
}
}
</script>
- 样式导入
<style>
@import "../../common/uni.css";
</style>
- 内联样式: 尽量避免将静态的样式写进 style 中,以免影响渲染速度
<view :style="{color:color}" /> <view class="normal_view" />
- 选择器: .class、#id、element、element, element
- 特殊:
- ::before、 ::after —— eg: view::after 在 view 组件后边插入内容,仅微信小程序和5+App生效
- 在uni-app中不能使用*选择器
- page相当于body节点
page {
background-color:#ccc;
}
- 背景图片: 与普通web项目相同 background-image: url('~@/static/logo.png');
- 注意: 支持base64格式图片;支持网络路径图片
- 使用本地路径背景图片需注意:
① 图片小于 40kb,uni-app 会自动将其转化为 base64 格式;
② 图片大于等于 40kb, 需开发者自己将其转换为base64格式使用,
或将其挪到服务器上,从网络地址引用。
③ 本地背景图片的引用路径仅支持以 ~@ 开头的绝对路径(不支持相对路径)
- <template/> 和 <block/>并不是一个组件,它们仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性
- 条件渲染
<template>
<view>
<template v-if="test">
<view>test 为 true 时显示</view>
</template>
<template v-else>
<view>test 为 false 时显示</view>
</template>
</view>
</template> - 列表渲染
<template>
<view>
<block v-for="(item,index) in list" :key="index">
<view>{{item}} - {{index}}</view>
</block>
</view>
</template>
注:以上内容来自UniApp官网