uni-app学习日记5

1.路由信息
解析：
[1]uni.navigateTo：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
[2]uni.redirectTo：关闭当前页面，跳转到应用内的某个页面
[3]uni.reLaunch：关闭所有页面，打开到应用内的某个页面
[4]uni.switchTab：跳转到tabBar页面，并关闭其他所有非tabBar页面
[5]uni.navigateBack：关闭当前页面，返回上一页面或多级页面

2.uni-link
解析：uni-link是一个外部网页超链接组件，在小程序内复制url，在app内打开外部浏览器，在h5端打开新网页。

说明：inWhiteList：如果在小程序的网址白名单中，会走内置webview打开，否则会复制网址提示在外部浏览器打开。

3.devServer.before
解析：webpack的devServer.before可以提供了一个在devServer内部的所有中间件执行之前的自定义执行函数。故可以采用此方法来模拟后台数据接口。

4.Vue中的$store
解析：$store是挂载在Vue实例上的，即Vue.prototype。

5.mapState
解析：当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性，让你少按几次键。

import {mapState} from "vuex"
computed:{...mapState(["city"])
}

如果要获取store里面的state的city属性，没有使用mapState的情况{{this.$store.state.city}}，使用mapState后{{this.city}}。

6.mapMutations
解析：可以在组件中使用this.$store.commit(‘xxx’)提交mutation，或者使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

7.onPullDownRefresh
解析：监听用户下拉动作。

8.onReachBottom
解析：小程序拥有页面上拉触底事件的处理函数onReachBottom。

9.renderjs
解析：renderjs是一个运行在视图层的js，它只支持app-vue和h5：
[1]大幅降低逻辑层和视图层的通讯损耗，提供高性能视图交互能力
[2]在视图层操作dom，运行for web的js库

10.ComponentDescriptor定义
解析：

方法	参数	描述
selectComponent	selector对象	返回组件的ComponentDescriptor实例。
selectAllComponents	selector对象数组	返回组件的ComponentDescriptor实例数组。
setStyle	Object/string	设置组件样式，支持rpx。设置的样式优先级比组件wxml里面定义的样式高。不能设置最顶层页面的样式。
addClass/removeClass/hasClass	string	设置组件的class。设置的class优先级比组件wxml里面定义的class高。不能设置最顶层页面的class。
getDataset	无	返回当前组件/页面的dataset对象
callMethod	(funcName:string, args:object)	调用当前组件/页面在逻辑层（App Service）定义的函数。funcName表示函数名称，args表示函数的参数。
requestAnimationFrame	Function	和原生requestAnimationFrame一样。用于设置动画。
getState	无	返回一个object对象，当有局部变量需要存储起来后续使用的时候用这个方法。
triggerEvent	(eventName,detail)	和组件的triggerEvent一致。
getComputedStyle	Array.<string>	参数与SelectorQuery的computedStyle一致。
setTimeout	(Function,Number)	与原生setTimeout一致。用于创建定时器。
clearTimeout	Number	与原生clearTimeout一致。用于清除定时器。
getBoundingClientRect	无	返回值与SelectorQuery的boundingClientRect一致。

11.WXS数据类型
解析：
[1]number：数值
[2]string：字符串
[3]boolean：布尔值
[4]object：对象
[5]function：函数
[6]array:数组
[7]date：日期
[8]regexp：正则

12.uView默认单位
解析：
[1]uView1.x默认单位为rpx。
[2]uView2.x默认单位为px。

13.uView文字颜色
解析：
[1]main-color主要颜色：可以用于标题等需要重颜色的场景
[2]content-color内容颜色：可以用于一般性内容的场景
[3]tips-color提示颜色：可以用于浅颜色的提示语的场景
[4]light-color：为比tips-color更浅的颜色，可以和tips-color搭配使用

14.uView主题色
解析：
[1]$u-primary为蓝色，uView的主色彩，代表热情，友好，积极，向上之意。
[2]$u-warning为黄色，代表警告之意。
[3]$u-success为绿色，代表成功之意。
[4]$u-error为红色，代表错误之意。
[5]$u-info为灰色，代表一般信息之意。

15.深拷贝对象
解析：

function deepClone(obj) {if (obj === null) return null;if (typeof obj !== 'object') return obj;if (obj instanceof Date) {let date = new Date();date.setTime(obj.getTime());return date;}if (obj instanceof RegExp) {let re = new RegExp(obj.source);re.lastIndex = obj.lastIndex;return re;}let newObj = new obj.constructor();for (let key in obj) {if (obj.hasOwnProperty(key)) {newObj[key] = deepClone(obj[key]);}}return newObj;
}

16.对数组分组
解析：把若干数组按指定的字段名进行分组：

function groupBy(list, propName) {return list.reduce((acc, item) => {const key = item[propName];if (!acc[key]) {acc[key] = [];}acc[key].push(item);return acc;}, {});
}

17.提取数组属性
解析：提取若干数组中指定字段组合成一个新数组：

function extractProps(arr, prop) {return arr.map((item) => item[prop]);
}

18.提取对象属性
解析：提取对象中的指定的属性，返回一个新对象：

function pickProps(obj, props) {if (typeof obj !== 'object') {return obj;}const newObj = {};props.forEach((prop) => {newObj[prop] = obj[prop];});return newObj;
}

19.uView基础组件
解析：
[1]Color色彩
[2]Icon图标
[3]Image图片
[4]Button按钮
[5]Text文本
[6]Layout布局
[7]Cell单元格
[8]Badge徽标数
[9]Tag标签
[10]LoadingIcon加载动画
[11]LoadingPage加载页

20.uView表单组件
解析：
[1]Form表单
[2]Calendar日历
[3]Keyboard键盘
[4]Picker选择器
[5]DatetimePicker选择器
[6]Rate评分
[7]Search搜索
[8]NumberBox步进器
[9]Upload上传
[10]Code验证码输入框
[11]Input输入框
[12]Textarea文本域
[13]Checkbox复选框
[14]Radio单选框
[15]Switch开关选择器
[16]Slider滑动选择器
[17]Album相册

21.uView数据组件
解析：
[1]List列表
[2]LineProgress线形进度条
[3]CountDown倒计时
[4]CountTo数字滚动

22.uView反馈组件
解析：
[1]Tooltip长按提示
[2]ActionSheet操作菜单
[3]Alert警告提示
[4]Toast消息提示
[5]NoticeBar滚动通知
[6]Notify消息提示
[7]SwipeAction滑动单元格
[8]Collapse折叠面板
[9]Popup弹出层
[10]Modal模态框

23.uView布局组件
解析：
[1]ScrollList横向滚动列表
[2]Line线条
[3]Overlay遮罩层
[4]NoNetwork无网络提示
[5]Grid宫格布局
[6]Swiper轮播图
[7]Skeleton骨架屏
[8]Sticky吸顶
[10]Divider分割线

24.uView导航组件
解析：
[1]Tabbar底部导航栏
[2]BackTop返回顶部
[3]Navbar自定义导航栏
[4]tabs标签
[5]Subsection分段器
[6]IndexList索引列表
[7]Steps步骤条
[8]Empty内容为空

25.uView其它组件
解析：
[1]Parse富文本解析器
[2]CodeInput验证码输入
[3]LoadMore加载更多
[4]ReadMore展开
[5]Gap间隔槽
[6]Avatar头像
[7]Link超链接
[8]Transition动画

参考文献：
[1]uniapp官网：https://uniapp.dcloud.io/
[2]微信小程序日期转换、比较、加减：https://www.cnblogs.com/nanyang520/p/11122492.html
[3]Learn Vuex：https://scrimba.com/learn/vuex
[4]Vuex官方文档：https://vuex.vuejs.org/zh/
[5]状态管理Vuex：https://uniapp.dcloud.net.cn/vue-vuex
[6]HTML5+API Reference：https://www.html5plus.org/doc/h5p.html
[7]UniPush使用指南：https://ask.dcloud.net.cn/article/35622
[8]Grace User Interface：https://www.graceui.com/
[9]uni-app TUIKit：https://github.com/tencentyun/TIMSDK/blob/master/uni-app/README.md
[10]reactiveui/refit：https://github.com/reactiveui/refit
[11]uni-app保持登录状态：https://www.bbsmax.com/A/xl56n1go5r/
[12]云开发项目框架：https://ext.dcloud.net.cn/plugin?id=4652
[13]vuex：弄懂mapState、mapGetters、mapMutations、mapActions：https://zhuanlan.zhihu.com/p/100941659
[14]图片转BASE64编码：https://c.runoob.com/front-end/59/

uni-app学习日记5相关推荐

HBuilder X ——Uni app 学习笔记（一）
HBuilder X --Uni app 学习笔记(一) 1.pages.json配置 *pages数组中第一项表示应用启动页,数组中其他项为项目中所有页面路径. enablePullDownRefr ...
Flutter学习日记之底部导航栏BottomNavigationBar组件的使用
本文地址:https://blog.csdn.net/qq_40785165/article/details/116953235,转载需附上此地址大家好,我是小黑,一个还没秃头的程序员~~~ 空袋子 ...
FireBird Embedded学习日记
FireBird Embedded学习日记 FireBird简介 Firebird是一个真正的关系数据库,支持存储过程.视图.触发器.事务等大型关系数据库的所有特性:不用考虑授权费用(免费),不用 ...
Vue2源码的学习日记（3）
组件化 (在文章中的一切源码大部分都是只给出头部,因为源码是开源的(Vue2.6),我认为在自己去边查找边看的过程也能提升到自己) 续学习日记(2)后,便开始慢慢走向vue这个框架的核心,希望能帮到大 ...
HbuilderX:uni app踩坑之uView-ui
HbuilderX:uni app踩坑之uView-ui 最近在自学uniapp,想找一个ui框架提高一下学习和开发的效率,于是就网上冲浪,浪来浪去,最后选择了uView-ui这款.其实有些框架我是有 ...
ffmpeg学习日记17-获取MP4视频流的帧率
ffmpeg学习日记17-获取MP4视频流的帧率参考各位大佬的文章,终于磕磕绊绊的理解,写出了获取MP4视频流的帧率等信息的代码 win10系统下运行代码如下: getMp4FrameNum.pr ...
安卓开发学习日记第三天_新手怪button_莫韵乐的欢乐笔记
安卓开发学习日记第三天--新手怪button (不是buttercup,虽然里面好像也有button,心中已经响起那段音乐了) 前情提要: 第一天学习日记之安装Android Studio3.6 第二 ...
安卓开发学习日记第四天_会爬就会跑_莫韵乐的欢乐笔记
安卓开发学习日记第四天_会爬就会跑前情提要安卓开发学习日记第一天Android Studio3.6安装安卓开发学习日记第二天_破坏陷阱卡之sync的坑安卓开发学习日记第三天_新手怪button ...
Activity学习日记(一)
Activity学习日记(一) 学习目标 android的发展历史,以及android和java的关系掌握android开发环境搭建创建第一 ...
android学习日记 RecyclerView的简单使用
android学习日记 RecyclerView的简单使用文章目录 android学习日记 RecyclerView的简单使用一.如何使用RecyclerView? 二.使用步骤 1.首先在bui ...

uni-app学习日记5

uni-app学习日记5相关推荐

最新文章

热门文章