uniapp 基础简要描述
-
微信小程序调试配置
安装HBuilderX
需要安装、运行微信开发者工具
Appid用以真机调试 -
引入公共css
uni.css
-
引入自定图标
iconfont.css
-
引入css3动画库
animate.css
-
设置全局属性
pages.json文件可以配置单独页面或者全局的功能组件样式
pages.json中的globalStyle// page.json { "globalStyle": { "navigationBarTextStyle": "black", // 导航栏标题颜色 "navigationBarTitleText": "uni-app", // 导航栏标题文字内容 "navigationBarBackgroundColor": "#F8F8F8", // 导航背景色 "backgroundColor": "#F8F8F8", // 窗口的背景色 "enablePullDOwnRefresh": true, // 全局开启下拉 "onReachBottomDistance": 50 // 设置下拉触底事件的距离 } } -
底部导航的配置
pages.json中的tabBar
// page.json { "tabBar": { "color": "", // 字体颜色 "selectedColor": "", // 选中颜色 "backgroundColor": "", // 背景色 "borderStyle": "", // 边框颜色 "list": [ { "pagePath": "", "", // 页面路径 "text": "", // 按钮文字 "iconPath": "", // 图标路径 40kb 80px*80px "selectedIconPath": "" // 选中的icon图片路径 } ], // 选项 "position": "" // 底部、头部 } } -
condition
开发过程中有用，没有入口位置，起到直达的效果，开发者工具会多一个详情页选项
{ "condition": { "current": 0, // 当前索引 "list": [ { "name": "详情页", // 名称 "path": "pages/detail/detail", // 启动路径 "query": "id=80" // 参数 } ] } } -
view、text组件和动画使用
-
view视图容器
块元素
hover-class // 按下的样式 hover-stop-propagation // 阻止点击态冒泡 hover-start-time // 多久后出现 hover-stay-time // 保持多长时间 -
text
行内元素
支持 \n 换行selectable // 是否可选 space // 是否显示连续空格 ensp 中文字符一半大小 emsp 中文字符空格大小 nbsp 英文字符空格大小 decode // 是否解码
-
-
button
size: default mini type: default primary warning plain: 镂空的按钮 disabled: 禁用 loading: 加载中 -
image
src: 图片路径 默认大小 300px 225px mode: apspectFit 长边完全显示，完整显示 apspectFill 短边完全显示，长边截取 -
uni-app的样式
- rpx 响应式px 750宽为基准满屏
- @import 外联样式表
-
iconfont 字体图标的引入
@import url("./static/fonts/iconfont.css"); -
引入scss
插件中下载scss/sass编译
-
数据绑定
-
条件渲染
-
列表渲染
-
绑定事件/自定义事件与触发
-
监听属性
-
计算属性
-
uni的生命周期
onLaunch 小程序启动后渲染完成触发 onShow 显示触发 onHide 隐藏触发 onError 错误触发页面的生命周期
onLoad 页面加载 onShow 页面显示 onReady 初次渲染完成 onUnload 页面卸载 onPullDownRefresh 触发下拉刷新动作（uni.stopPullDownRefresh()在请求到结果后调用） onReachBottom 页面触底事件 (onReachBottomDistance: 200 pages.json设置下拉触底距离) -
网络请求
// uni.request(OBJECT) methods: { get() { uni.request({ url: "", success: (res) { console.log(res); } }) } } -
本地数据缓存
-
uni.setStorage
uni.setStorage({ key: 'name', data: 'mkl', success () { console.log('设置成功'); } }) -
uni.setStorageSync
同步接口
-
uni.getStorage
uni.getStorage({ key: 'name', success (res) { console.log('获取成功'); console.log(res); } }) -
uni.getStorageSync
-
uni.removeStorage
-
uni.removeStorageSync
-
-
图片上传与预览
-
uni.chooseImage实现文件上传
页面端无法用count限制选择图片数
<template> <view> <button type="primary" @click="chooseImg">上传文件</button> </view> </template> <script> export default { data(){ return { imgArr: [] } } methods: { chooseImg: () => { uni.chooseImage({ count: 1, success(res) { console.log(res); this.imgArr = res.tempFilePaths; } }) } } } </script> -
uni.previewImage实现图片预览
<template> <view> <button type="primary" @click="chooseImg">上传文件</button> <image v-for="item in imgArr" :src="item" @click="previewImg(item)"></image> </view> </template> <script> export default { data(){ return { imgArr: [] } } methods: { chooseImg: () => { uni.chooseImage({ count: 1, success(res) { console.log(res); this.imgArr = res.tempFilePaths; } }) }, previewImg: (current) => { uni.previewImage({ current, urls: imgArr, loop: true, // 图片可循环展示 仅在app使用 indicator: default // 底部显示原点 仅在app使用 }) } } } </script>
-
-
跨端兼容 条件注释
- 组件条件注释
<!-- #ifdef H5 --> 仅在H5可见 <-- #endif --> <!-- #ifdef MP-WEIXIN --> 仅在微信小程序可见 <-- #endif --> - api条件注释
<script> onLoad () { // ifdef H5 console.log('H5中打印'); // endif // ifdef MP-WEIXIN console.log('微信小程序中打印'); // endif } </script>
- 组件条件注释
-
导航跳转与传参
-
声明式导航跳转
open-type指定跳转页面的类型
<navigator url="/pages/detail/detail"> 跳转至详情页 </navigator> <navigator url="/pages/message/message" open-type='switchTab'> 跳转至信息页页 </navigator> <navigator url="/pages/detail/detail" open-type='redirect'> <!-- 没有返回箭头，因为关闭的当前页面 --> 跳转至详情页 </navigator> -
编程式导航跳转
uni.navigateTo 保留当前页跳转
methods: { goDetail () { uni.navigateTo({ url: 'pages/detail/detail' }) } }uni.switchTab 关闭所有非tabBar页面跳转至tabBar页面
methods: { geMessage () { uni.switchTab({ url: 'pages/detail/detail' }) } }uni.redirectTo 关闭当前页跳转
methods: { goDetail () { uni.redirectTo({ url: 'pages/detail/detail' }) } } -
导航跳转传参
<navigator url="/pages/detail/detail?id=1">接收参数 onl oad(options){}
<script> export default { onl oad(options) { console.log(options); } } </script>
-
-
组件和组件生命周期函数、通信方式
-
生命周期函数
created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
-
通信方式
-
父传子
<!-- 父 --> <component-name :title=title></component-name> <!-- 子 --> props: ['title'] -
子传父
<!-- 子 --> <button @click="sendN" @myEven="getN"></button> methods: { sendN: () => { console.log(1) this.$emit('myEven', 'data') // 触发父组件方法，传递参数 } } <!-- 父 --> methods: { getN: (data) => { // 父组件方法 console.log(data) } } -
兄弟传值
import testA from '../../components/a.vue' import testA from '../../components/b.vue' <!-- 父组件 --> components: { "test-a": testA, "test-b": testB } <!-- 子组件a --> <button @click="addN">修改B组件数据</button> methods: { addN: () => { uni.$emit('updateN', 10) } } <!-- 子组件b --> created () { uni.$on('updateN', (d) => { // 注册全局事件 this.n += d }) }
-
-
-
uni-ui组件库