uni-app DAY09

复习:

1、uni-app中常用组件

内置组件:页面(page)、视图(view)、滚动视图(scroll-view)、文本(text)、富文本(rich-text)、图片(image)、输入框(input)、按钮(button)、导航器/超链接(navigator)、轮播(swiper)、拾取器/下拉菜单/选择器(picker)、单选按钮(radio-group/radio)、复选按钮(checkbox-group/checkbox)、视频(video)、地图(map)、摄像头(camera)
扩展组件(uni-ui库):图标(uni-icons)、宫格(uni-grid)、卡片(uni-card)、导航条(uni-nav-bar)、日期格式化(uni-dateformat)、列表(uni-list/uni-list-item)、标题字(uni-title)、简单输入框(uni-easyinput)、弹出式对话框(uni-popup)、加载更多(uni-load-more)
自定义组件:卡片(zh-card)、导航条(zh-nav-bar)、返回顶部(zh-go-top)

2、uni-app中常用API

(1)五种页面跳转方法

uni.navigateTo() / uni.navigateBack() / uni.redirectTo() / uni.switchTab() / uni.reLaunch

(2)四种消息弹出框

uni.showToast() / uni.showModal() / uni.showLoading()&uni.hideLoading() / uni.showActionSheet()

(3)异步请求

uni.request()

(4)客户端存储的设置/读取/删除/清空

uni.setStorageSync() / uni.getStorageSync() / uni.removeStorageSync() / uni.clearStorageSync()

(5)获得全局App对象

getApp()

(6)获得窗口/系统信息

uni.getSystemInfoSync()

(7)修改标题栏中的文本内容

uni.setNavigationBarTitle()

(8)返回页面顶部

uni.pageScrollTo()

(9)请求客户端付款

uni.requestPayment()

(10)创建地图上下文对象

uni.createMapContext()

(11)停止下拉刷新动画

uni.stopPullDownRefresh()

3、uni-app中的生命周期方法

第一组:整个应用级生命周期方法(App.vue):
启动、显示、隐藏
第二组:页面级生命周期方法(pages):
加载(有形参)、显示、就绪、隐藏、卸载、页面滚动、滚动到底、下拉刷新
第三组:组件级生命周期方法(components):
创建2、挂载2、更新2、卸载2

一、uni-app项目的最终发布部署

项目的两种运行模式:
①调试模式/开发模式/运行模式(Development Mode)——类似于Vue.js中的 npm start:
代码没有经过压缩和优化,所以代码体积比较大 —— 会自动连接开发服务器,即时更新
②生产模式/部署模式/发行模式(Production Mode)——类似于Vue.js中的 npm run build:
代码经过优化和压缩,所以代码体积比较小 —— 不能再自动连接开发服务器

演示1:把uni-app发布为“生产模式”的H5网站
点击当前项目,点击工具栏“发行”>“网站-PCWeb或手机H5”;
成功后,编译后的结果保存在 @/unpackage/dist/build/h5 目录下,该目录下的内容复制到任意真实的云服务器上的WEB服务器上即可。

演示2:把uni-app发布为“生产模式”的App
编辑项目清单文件manifest.json,修改应用名称 和 图标 和 高德地图Key 和 App权限配置(勾选);如果想安装到夜神模拟器,还需要勾选“App常用其它设置>支持CPU类型>x86”
点击当前项目,点击工具栏“发行”>“原生App-云打包”>修改“使用测试证书”>选择“安心打包”>点击“开始打包”;项目开始自动编译,完成后自动提交到DCloud服务器进行打包;等待一段时间…
打包成功后,会提示“APK文件创建成功,保存在@/unpackage/dist/build/apk”目录下;
可以重命名.apk文件,发布到应用商店 或者 放到自己的网站上供人下载 或者 直接把安装文件拷贝(用数据线或QQ)到自己的手机中,开始安装&启动App…

二、移动端项目中“列表页”编写的固定思路

三个功能
①页面加载时显示第一页数据
②页面滚动到底部时继续加载下一页,前面的内容要保留,最新内容追加在后面
③页面顶部下拉刷新,删除已加载的,重新显示第一页
五个变量:
①kw:要显示的数据包含的关键字;如果没有则默认显示全部数据
②dataList:加载到的所有的记录集合
③pageCount:符合条件的记录的总页数
④pageNum:当前加载到哪一页数据了,即页号
⑤isLoading:当前是否正在加载数据
一个方法三处调用:
loadNextPageData( ):加载下一页数据
①onLoad() ②onReachBottom() ③onPullDownRefresh()

三、uni-app中图片的缩放模式

1、mode=“widthFix” 宽度使用固定值,高度等比例缩放
2、mode=“heightFix” 高度使用固定值,宽度等比例缩放
3、mode=“scaleToFill” 不等比缩放图片,使图片刚好覆盖指定的区域
4、mode=“aspectFit” 图片等比例缩放,较长的边刚好放下,较短的边可能会留白

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
下面是一个简单的Uni-app手写日历组件的实现步骤: 1. 创建一个日历组件,可以使用uni-calendar或者自己手写一个日历组件。 2. 在data中定义一个calendarData对象,用于存储日历相关的数据,比如当前年月、当前月有多少天等。 ``` data() { return { calendarData: { year: 2021, month: 9, days: [] } } } ``` 3. 在created生命周期中,初始化日历数据。 ``` created() { this.initCalendarData(); }, methods: { initCalendarData() { const date = new Date(); const year = date.getFullYear(); const month = date.getMonth() + 1; const days = this.getDaysOfMonth(year, month); this.calendarData = { year, month, days }; }, getDaysOfMonth(year, month) { const days = []; const date = new Date(year, month - 1, 1); const weekDay = date.getDay(); const lastMonthDays = this.getDaysOfLastMonth(year, month); const thisMonthDays = this.getDaysOfMonth(year, month); const nextMonthDays = 42 - thisMonthDays - weekDay; for (let i = weekDay - 1; i >= 0; i--) { days.push({ day: lastMonthDays - i, type: 'lastMonth' }); } for (let i = 1; i <= thisMonthDays; i++) { days.push({ day: i, type: 'thisMonth' }); } for (let i = 1; i <= nextMonthDays; i++) { days.push({ day: i, type: 'nextMonth' }); } return days; }, getDaysOfMonth(year, month) { return new Date(year, month, 0).getDate(); }, getDaysOfLastMonth(year, month) { if (month === 1) { year--; month = 12; } else { month--; } return this.getDaysOfMonth(year, month); } } ``` 4. 在日历组件中,使用v-for循环渲染日历。 ``` <template> <view class="calendar"> <view class="calendar-header">{{ calendarData.year }}年{{ calendarData.month }}月</view> <view class="calendar-body"> <view class="calendar-week"> <view class="calendar-day">日</view> <view class="calendar-day">一</view> <view class="calendar-day">二</view> <view class="calendar-day">三</view> <view class="calendar-day">四</view> <view class="calendar-day">五</view> <view class="calendar-day">六</view> </view> <view class="calendar-days"> <view class="calendar-day" v-for="(day, index) in calendarData.days" :key="index"> <view class="day-text" :class="day.type">{{ day.day }}</view> </view> </view> </view> </view> </template> ``` 5. 根据需要,可以为不同日期设置不同的样式。 ``` .day-text { width: 50px; height: 50px; line-height: 50px; text-align: center; } .lastMonth { color: #999; } .thisMonth { color: #333; } .nextMonth { color: #999; } ``` 6. 最后,可以为日历组件添加一些交互事件,比如点击某个日期时,弹出该日期对应的课程安排等。 以上就是一个简单的Uni-app手写日历组件的实现步骤,具体实现可以根据需求进行优化和改进。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值