uniapp

全局

navigationBarBackgroundColor：‘’ // 导航条背景颜色

navigationBarTextStyle ：”“ // 导航条字体颜色

navigationBarTitleText：“” // 导航条标题

enablePullDownRefresh：true || false // 是否允许下拉

backgroundColor：”“ // 下拉的背景颜色

backgroundTextStyle：”“ //下拉的loading图标的颜色仅支持dark light

单独页面中设置样式

h5设置页面

"h5":{
	"pullToRefresh":{
		"color":”red”  //设置h5页面的下拉图标的颜色
 }
}

tabBar

最少2个最多5个tab

"tabBar":{
  "color":"", //设置未选中的tabbar 的字体颜色16进制
  "selectedColor":"", //设置选中字体颜色
  "backgroundColor":"",  //设置tabBar背景颜色
  "borderStyle":"", //设置tabBar上边框颜色 仅支持white和black
  "position":"" , // 设置tabBar 的位置，可选bottom和top  只有微信小程序支持top
  
  "list":[
    {
      "text":“”，  //分栏名称
      "pagePath":"", //页面路径
      "iconPath":"",  //未选中的图标路径
      "selectedIconPath":""  //选中的图标路径
    }
  ]
}

text组件

属性：

selectable 可以选中

space ensp中文字符一半大小 emsp中文字符大小 nbsp空格解析为一个字符空格

decode 布尔值解码例如&lt解析为<

view组件

属性：

hover-class 鼠标按下时样式改变的class

hover-stop-propagation 阻止冒泡

hover-start-time 按下后？毫秒数后开始改变样式

hover-stay-time 按下结束后，保持多久毫秒

button组件

size 大小默认为default ，可选mini

type 按钮的样式类型 primary default 白色 warn 红色

plain 按钮是否镂空

disabled 按钮是否禁用

loading 是否带有加载图标 appnvue平台在ios为雪花，android为圆圈

image组件

image 默认宽高320*240

属性：

mode 设置图片

aspectFix按照长边保持纵横比缩放

aspectFill按照短边边保持纵横比缩放会截图片

uniapp样式

rpx即响应式px，一种根据屏幕px自适应的动态单位，以750宽的屏幕为基准，750rpx正好为屏幕宽度，屏幕变宽，rpx实际显示效果变大
使用@import语句可以引入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用；表示结束@import url('a.css');
支持基本常用的选择器 class 、 id 、 element等
在uniapp中不能使用*选择器
page相当于body节点
定义在App.vue中的样式为全局样式，作用于每一个页面，在pages目录下的vue文件中定义的样式为局部样式，之作用在对应的页面，并且会覆盖App.vue中的样式
uniapp支持使用字体图标，使用方式与普通web项目相同，需要注意以下几点
- 字体文件小于40kbuniapp会自动将其转换为base64格式
- 字体文件大于40kb，需要开发者自己转换，否则使用将不生效
- 字体文件的引用路径推荐使用以~@开头的绝对路径
  1
  2
  3
  4
  @font-face{
  font-family:test1-icon;
  src:url('~@/static/iconfont.ttf')
  }

uni的生命周期

应用的生命周期

onLaunch 当uniapp初始化完成时触发

onShow 当uniapp启动，或从后台进入前台显示

onHide 当uniapp从前台进入后台

onError 当uniapp报错时触发

页面的生命周期

onLoad 监听页面加载，其参数为上个页面传递的参数，参数类型为Object（用于页面传参）

onShow 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点击返回露出当前页面

onReady 监听页面初次渲染完成

onHide 监听页面隐藏

onUnload 监听页面卸载

onPullDownrefrech 监听用户下拉刷新

下拉刷新

开启下拉刷新

在uniapp中有两种下拉刷新开启的方式

在pages.json里，找到当前页面的pages节，并且在style配置项中开启enablePullDownRefresh为true
通过调用uni.startPullDownRefresh()方法来下拉刷新

监听下拉刷线

通过onPullDownRefresh()生命周期监听

export default {
  data(){
    return {
      
    }
  },
  onPullDownRefresh(){
    console.log('触发下拉刷新了')
    setTimeout(()=>{
				this.list=['java','ui','前端','测试','大数据']
				uni.stopPullDownRefresh()
		},1000)
  }
}

关闭下拉刷新

uni.stopPullDownRefresh()关闭下拉刷新

<template>
  <view>
  	<button @click="startPull">点击下拉刷新</button>
  </view>
</template>

<script>
	export default {
    data(){
      return {
        list:[]
      }
    },
    methods:{
      startPull(){
        uni.startPullDownRefresh()
      }
    }
	}
</script>

页面触底上拉刷新

onReachBottom() 监听页面是否触底

onReachBottomDistance在pages.json中的pages配置项中，配置当前页面距离底部多少触发触底事件

网络请求

在uniapp中可以调用uni.request方法进行网络请求

需要注意的是：在小程序中网络相关的API在使用前需要配置域名白名单

发送get请求

uni.request({
  url:'',
  methods:'',
  data:{},
  success(res)=>{
  	console.log(res)
}
})

数据缓存

uni.setStorage

uni.setStorageSync

uni.SetStorage({
  key:'', //存储的名字
  data:'', //存储的内容
  success(res){}, //成功回调
  fail(errr){} //失败回调
})

uni.setStorageSync(key,val)

uni.getStorage()

uni.getStorageSync()

uni.getStorage({
  key:'', // 存储的名字
  success(res){},
  fail(err){}
})

const res=uni.getStorageSync(key)

uni.removeStorage()

uni.removeStorageSync()

uni.removeStorage({
  key:'',
  success(res){}
})

uni.removeStorageSync(key)

清除本地缓存数据

uni.clearStorage()

uni.clearStorageSync()

图片上传和预览

图片上传

uni.chooseImage()

uni.chooseImage({
  count:5,
  success:(res)=>{
    this.imgArr=res.tempFilePaths  // 谨记，success的this指向，写为箭头函数，res.tempFilePaths存储的是上传的图片的位置
  }
})

图片预览

uni.previewImage()

uni.previewImage({
  current:current, //当前图片的地址
  urls:imgArr, //图片数组
  indicator:'default || number ',  //默认为圆点，number为数字，app中才显示
  loop:true||false // 循环，app中才有效
})

条件注释实现跨端兼容

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

写法：以#ifdef 加平台标记开头，以#endif结尾

平台标记：

值	生效条件
VUE3	HBuilderX 3.2.0+ 详情（uni-app js引擎版）
APP	App
APP-PLUS	App（uni-app js引擎版）
APP-PLUS-NVUE或APP-NVUE	App nvue 页面
APP-ANDROID	App Android 平台仅限 uts文件
APP-IOS	App iOS 平台仅限 uts文件
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	抖音小程序
MP-LARK	飞书小程序
MP-QQ	QQ小程序
MP-KUAISHOU	快手小程序
MP-JD	京东小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/抖音小程序/飞书小程序/QQ小程序/360小程序
QUICKAPP-WEBVIEW	快应用通用(包含联盟、华为)
QUICKAPP-WEBVIEW-UNION	快应用联盟
QUICKAPP-WEBVIEW-HUAWEI	快应用华为

演示：dom

<!-- #ifdef H5 -->
<view>我希望只在h5页面中看见</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>我希望只在微信小程序页面中看见</view>
<!-- #endif -->

演示：js

onLoad() {
	// #ifdef H5
	console.log('我希望h5中打印');
	// #endif
	// #ifdef MP-WEIXIN
	console.log('我希望微信小程序中打印');
	// #endif
}

演示：style

view{
	/* #ifdef H5 */
	color: hotpink;
	/* #endif */
	/* #ifdef MP-WEIXIN */
	color: #0000Ff;
	/* #endif */
}

uni中的导航跳转

利用navigator进行跳转

跳转到普通页面

<navigator url="/page/about/about">
	<button>跳转到关于页面</button>  
</navigator>

跳转到tabBar页面

<navigator url="/page/message/message" open-type="switchTab">
  <button>跳转到message页面</button>
</navigator>

重定向跳转(无法返回)

<navigator url="/page/about/about" open-type="redirect">
  <button>跳转到关于页面</button>  
</navigator>

利用编程式导航跳转

利用navigateTo进行导航跳转

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack()可以返回原界面

<button @click="goAbout">跳转到关于页面</button>

通过navigateTo()跳转到普通页面

getAbout(){
  uni.navigateTo({
    url:"/pages/about/about"
  })
}

通过switchTab()跳转到tabBar页面

<button @click="goMessage">跳转到message页面</button>

goMessage(){
  uni.switchTab({
    url:'/pages/message/message'
  })
}

导航跳转传递参数

在导航跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收（onLoad(options){}）

传递参数的页面

goAbout(){
  uni.navigateTo({
    url:"/pages/about/about?age=1"
  })
}

接收参数的页面

<script>
  export default {
		onLoad(options){
      console.log(options)
    }
	}
</script>

uniapp中组件的创建

在uniapp中，可以通过创建一个后缀名为.vue的文件，即创建一个组件成功，其他组件可以将该组件import的方式导入，在通过componemts进行注册即可