一、什么是uniapp
由dcloud 公司开发的 多端融合框架
1次开发 多端运行
竞品：apiCloud ，appCan ，Codova
技术架构
Vue语法+小程序的api
端
Hybrid混合开发
App端
- HTML+
- nvue（原生view）
- native.js(js原生沟通的桥梁)
- weex
- 内置ios/安卓的模块使用
H5端
- h5专用api
- 各种小程序（微信为主）
二、准备工作
1、准备工具
- Hbuilderx （开发与编译工具）
- 微信小程序开发工具（微信小程序预览测试）
- 安卓模拟器/真机 运行app
2、界面
3、新建项目
三、配置
1、 H5
2、 小程序
1 、打开开发工具的服务端口
2 、HBuilderx配置 微信开发工具的地址
3 、配置微信小程序id 
4 、运行到微信小程序 
3、App
1 、打开模拟器或者手机
2、 配置模拟器的端口
- 夜神模拟器端口号：62001
- 海马模拟器端口号：26944
- 逍遥模拟器端口号：21503
- MuMu模拟器端口号：7555
- 天天模拟器端口号：6555
3 、运行到模拟器
4、注意项
- hbuilder可能需要下载对应的插件
- 运行到安卓模拟器，有视图差别
- 运行可以需要一定的诗句
四、 Vue语法
1、模板语法
文本渲染
{{表达式}}
v-text=“表达式”
表达式
简单的js运算
{{2+3}}
js方法调用
{{title.length}}
{{title.split("").reverse().join("")}}
三元运算符
<view>{{title.length>15?'长度很长':'字少事大'}}</view>
v-html 富文本
条件渲染
v-if
v-else-if
v-else
v-show
通过三元运算符
列表选项
字符串，数字，列表，对象都可以遍历
<view v-for="(item,index) in list" :key="index">{{index+1}} {{item}}</view>
一定要保证兄弟元素间的key值是唯一
属性绑定
<button v-bind:disabled=“true”>
<button :disabled="true">
表单绑定
默认
:value="单向绑定"
input
v-model=“双向绑定”
@change=“$event.detail.value”
事件，事件的值$event.detail.value
事件
事件绑定： <view v-on:click="响应"
简写绑定：<view @click="事件响应"
事件行内处理
<view @click="num++"
事件响应函数
(函数在methods定义)
<view @click="say"
<view @click="say"
事件传参
不写参数
@click="say"
等同于
@click=“say()”
等同于
@click=“say($event)”
$event 是一个固定写法 代表事件对象
@click=“doit(str)”
doit(str="你好"){
uni.showModal({title:str})
}
事件对象
$event/e
function say(e){
}
target目标对象
dataSet 组件传参
<view :data-title="title" @click="say">
function say(e){
e.target.dataset.title
}
响应方法
2、uni-app页面
- 新建页面
- 页面配置 pages.json
globalStyle 全局样式
默认页面的样式会应用全局样式页面写了style 配置，那么用的配置覆盖全局的配置
pages页面 path页面路径 style 页面样式
3、vue选项
- data 数据
- methods 方法
- computed 计算
- watch监听
- directive指令
- filter过滤
4、uni-app的生命周期
1、Vue的生命周期
1、 创建
beforeCreate
created 可以使用this，没有dom
作用：1. 初始数据
2. 注册监听事件
3. 开启定时器
4. ajax请求
2、挂载
beforeMount
mounted
可以操作dom（节点）
作用：
1. 操作dom
2. ajax请求
3、更新
beforeUpdate
updated
4、卸载
beforeDestroy
作用：
1. 移除事件监听
2. 移除停止定时器
destroyed
2、 小程序的生命周期
onLoad 加载
能够获取页面的参数
开启ajax，定时器，事件监听
像vue的created
onShow 显示
播放媒体
onReady准备
获取节点信息
像vue的mounted
onHide 后台运行
停止播放媒体
onUnload 卸载
停止事件监听与定时器
3、 小程序的全局方法
- onPullDownRefresh 下拉刷新
- onReachBottom() 触底更新
- onShareAppMessage 右上角分享
- onPageScroll 页面滚动
- onShareTimeline 分享到朋友圈
4、app的全局方法
- onBackPress手机的返回键被点击
- onNavigationBarButtonTap导航栏按钮被点击
5、组件 表单
button 按钮
- type ：primary主要 warn警告 default 默认
- size="mini"
- disabled 是否可用
input
- value值
- v-model对表单双向绑定
- @change="$event.detail.value"
- placeholder 提示文本
picker
mode 模式
- time时间
- date 日期
- region地区
- 日期 start="09:01" end="21:01"
value值
@change="$event.detail.value"
slider滑块
- value 值 max 最大 min 最小
- @change="$event.detail.value"
五、路由
1、路由组件
navigator导航
1、url 跳转页面的地址
2、open-type 打开类型
navigate跳转
redirect重定向（当前页面不留历史记录）
navigateBack返回
relauch 重启
switchTab 跳转底部栏
2、路由传参
传递 url:path?name=mumu&age=18
接收
onLoad(option){}
option的值{name:"mumu",age:18}
3、路由api
- uni.navigateTo({url}) 跳转
- uni.redirectTo({url}) 重定向
- uni.navigateBack() 返回
- uni.switchTab() 底部栏切换
- uni.reLaunch() 重启
4、路由配置
tabBar
{
"pages": [{
"path": "pages/component/index",
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面，必选
}]
},
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "演示",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8",
"usingComponents":{
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait", //横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
"rpxCalcMaxDeviceWidth": 960,
"rpxCalcBaseDeviceWidth": 375,
"rpxCalcIncludeWidth": 750
},
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"iconfontSrc":"static/iconfont.ttf", // app tabbar 字体.ttf文件路径 app 3.4.4+
"list": [{
"pagePath": "pages/component/index",
"iconPath": "static/image/icon_component.png",
"selectedIconPath": "static/image/icon_component_HL.png",
"text": "组件",
"iconfont": { // 优先级高于 iconPath，该属性依赖 tabbar 根节点的 iconfontSrc
"text": "\ue102",
"selectedText": "\ue103",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}, {
"pagePath": "pages/API/index",
"iconPath": "static/image/icon_API.png",
"selectedIconPath": "static/image/icon_API_HL.png",
"text": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": {
"autoscan": true, //是否自动扫描组件
"custom": {//自定义扫描规则
"^uni-(.*)": "@/components/uni-$1.vue"
}
},
"topWindow": {
"path": "responsive/top-window.vue",
"style": {
"height": "44px"
}
},
"leftWindow": {
"path": "responsive/left-window.vue",
"style": {
"width": "300px"
}
},
"rightWindow": {
"path": "responsive/right-window.vue",
"style": {
"width": "300px"
},
"matchMedia": {
"minWidth": 768
}
}
}
5、获取当前页面 getApp
01 在App.vue
定义globalData:{num:100}
02 要使用的页面获取app
var app = getApp()
03获取globalData的值
onShow(){
this.num = app.globalData.num
}
04 更新globalData值
addNum(){
app.globalData.num++;
this.num = app.globalData.num
}
6、获取页面栈
getCurrentPages
var page = getCurrentPages();
获取当前的页面栈，是一个数组（1-5）
uni.navigateBack({delta:page.length})
page[page.length-1] 获取当前页面的信息
（不要去修改）
六、条件编译
目的:不同的平台展示不同特性与功能
1、模板条件编译
格式
<!-- #ifdef H5 -->
内容
<!-- #endif -->
条件
- APP App端
- H5 网页
- MP 小程序
- MP-WEIXIN 微信小程序
2、css条件编译
/* #ifdef APP */
.active{color:red}
/* #endif */
3、js条件编译
// #ifdef APP-PLUS
uni.showModal({
title:"你好App用户"
})
// #endif
4、条件配置
pages.json
“style”:{
"h5":{
"titleNView":{
"titleText":"我是H5"
}
},
"app-plus": {
"titleNView":false //隐藏导航栏
}
}
// #ifdef MP-WEIXIN || APP
{
"path":"pages/condition/we",
"style":{
"navigationBarTitleText": "小程序专有页面"
}
},
// #endif
七、vuex
1、uniapp中有自带vuex插件，直接引用即可
2、、在项目中新建文件夹store,在main.js中导入
在根目录下新建文件夹store,在此目录下新建index.js文件
// 导入vuex
import Vuex from "vuex";
//导入vue
import Vue from "vue";
//使用vuex
Vue.use(Vuex);
export default new Vuex.Store({
//状态
state: {
gTitle: {
text: '你好vuex',
color: "#000",
fontSize: "24",
background: "#f70"
}
},
//改变状态的唯一方法
mutations: {
setSize(state, data) {
state.gTitle.fontSize = data + 'px'
}
},
//异步api操作
actions: {},
//内部计算
getters: {},
//模块
modules: {}
})
- 在main.js中导入挂载vuex
全局使用改变字体大小与背景颜色
<template>
<view>
<view class="title">vuex数据</view>
<view class="" :style="$store.state.gTitle">
{{$store.state.gTitle.text}}
</view>
<navigator url="fontSize">修改文字大小</navigator>
<navigator url="backgroundColor">修改背景</navigator>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
</style>
字体大小
<template>
<view class="">
<view class="title">
修改文本大小
</view>
<view>
<slider :value="ontSize" @change="sizeChange" />
</view>
</view>
</template>
<script>
export default {
data() {
return {
fontSize: parseInt(this.$store.state.gTitle.fontSize)
}
},
methods: {
sizeChange(e) {
this.fontSize = e.detail.value;
//更新vuex中的数据
this.$store.commit("setSize", e.detail.value)
}
}
}
</script>
<style>
</style>
其余知识请参考官方文档
https://uniapp.dcloud.net.cn/
311
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
