自学uniapp听课笔记

  1. 自定义组件命名:驼峰法。例如:keChengXingqing

  1. 微信小程序:设置-安全设置-服务器端口要打开

  1. scss:

内边框:(外边框会导致页面超出屏幕)box-sizing: border-box;

宽度:(全屏)width: 750rpx;

下边三个常一起用:

a. 弹性布局:display: flex;

b. 水平居中(与弹性布局常一起使用,呈现下图效果):justify-content: center

c. 居中对齐弹性盒的各项 元素:align-items: center;

平均分布:flex:1

强制元素不换行(一般给父级元素加):white-space: nowrap;

  1. swiper(banner图常用)

常用属性:indicator-dots:是否轮播; autoplay:自动播放; interval:间隔时间; duration:动画执行周期; indicator-dots 轮播图下的点

swiper下的每一个swiper-item都是一个滑块

v-for循环输出bannner图。

  1. image 本身自带默认宽高,使用时一般需要设置。

<image mode="aspectFit"></image>:保持纵横比缩放图片,可以将图片完整显示出来

  1. (1)tabBar(原生)

通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页,在 pages.json 中提供 tabBar 配置。

tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

对应页面:"pagePath": "pages/tabbar/classly/classly",

图标:

a. "iconPath": "static/image/fenlei.png",

选中后图标:"selectedIconPath": "static/image/fenleion.png",

文字:"text": "分类"

b. iconfont优先级大于iconPath

与iconfont配合使用。

iconfontSrc:将下载下来的图标库,引入文件

text:图标(字库 Unicode 码,在iconfont中复制{在iconfont中将加入购物车的图标添加进项目中即可看到})

&#xe669; 将码变为\ue669 &#x去掉后加\u

selectedText:选中后的图标(选中后字库 Unicode 码)

color:颜色

selectedcolor:选中后的颜色

(2)uni.setTabBarItem(OBJECT)

动态设置 tabBar 某一项的内容

uni.setTabBarStyle(OBJECT)

动态设置 tabBar 的整体样式

uni.hideTabBar(OBJECT)

隐藏 tabBar

uni.showTabBar(OBJECT)

显示 tabBar

uni.setTabBarBadge(OBJECT)

为 tabBar 某一项的右上角添加文本。

uni.removeTabBarBadge

移除 tabBar 某一项右上角的文本。

uni.showTabBarRedDot(OBJECT)

显示 tabBar 某一项的右上角的红点。

uni.hideTabBarRedDot(OBJECT)

隐藏 tabBar 某一项的右上角的红点。

uni.onTabBarMidButtonTap(CALLBACK)

监听中间按钮的点击事件

Tip

  • tabbar是原生的,层级高于前端元素

  • 如果想要一个中间带+号的tabbar,在HBuilderX中新建uni-app项目、选择 底部选项卡 模板

  • 以上大部分操作 tabbar 的 API 需要在 tabbar 渲染后才能使用,避免在 tabbar 未初始化前使用

7. 页面跳转

a. navigator

页面跳转。只能跳转本地页面。目标页面必须在pages.json中注册。

注意:只能跳转非tabBar页面

如需跳转页面则可设置属性:open-type="reLaunch"。

注意:reLaunch可携带参数,如果跳转页面为tabBar页面,则不可携带参数。

<script>
export default{
	onLoad:function(option){  //option为object类型,会序列化上个页面传递的参数
		console.log(option.id);  //打印出上个页面传递的参数。
		console.log(option.name);  //打印出上个页面传递的参数。
	}}
</script>

b. uni.navigateTo (API)

success注意要用箭头函数。

注意:

  • 页面跳转路径有层级限制,不能无限制跳转新页面

  • 跳转到 tabBar 页面只能使用 switchTab 跳转

  • 路由API的目标页面必须是在pages.json里注册的vue页面。

uni.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。

8. data必须为函数类型,return中可以返回:数组,字符串,对象,数字,布尔值等。

export default {

data() {

return {

topBanner:[],

index_banner:{},

}

}

}

9. v-if ,v-else-if ,v-else 必须紧挨着写。

v-else后面不用加判断。

v-show与v-if区别:

v-if判断为false的内容在页面与代码都不显示

v-show判断为false的内容在页面不显示,代码中显示,只是以css形式添加了display=“none”

用法:<v-if="判断"><v-else>;

用法:<v-show="判断"><v-show="!判断">;

10. v-for

a. 循环输出数组:

item:作为每个元素;

index:其下标(0 1 2 3 4 ..........);

topbanner:哪个数组的名字;

key:作为每一个元素的索引(唯一标识符)

v-for="(item,index) in teaList" :key="index"

例如:循环输出轮播图数组中的图片

b. 循环输出对象:

value:值;

index:其下标(0 1 2 3 4 ..........);

name:名称;

obj:对象名字(自定义);

key:作为每一个元素的索引(唯一标识符)

v-for="(value,name,index) in obj" :key="index"

{{index}}-{name}}-{{value}}

11. v-html 可以渲染html标签。

小程序不支持直接写html标签

使用方法:v-html="code" (code是带html标签的变量,例return中:code=“<h1>我是内容</h1>”)

12. v-bind:动态绑定标签属性。简写为

13. v-on:事件指令。简写为 @

用法a:v-on:click="触发的点击事件名称,自定义abc"

用法b:@click="触发的点击事件名称,自定义abc"

methods:{

abc(){

}

}

14. 标签内写动态style时,冒号后边的内容要加单引号

:style="'color: black;"

15. let color(自定义)="#"+String(Mach.random()).substr(3,6);

//自定义颜色名称=随机random(),substr(3,6)第三位开始,截取六位随机数,String类型才可截取。此方法截取的颜色都偏暗,因为没有abcdef。

16. 动态绑定class类。myactive:自定义类名; state:判断true false

a. :class=“{myactive:state}”

b. :class=“state?‘myactive’:‘’”

为真执行myactive,为假执行空‘’或者其他,看情况而定

17. 表单:form

a. 表单提交

@submit

携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''},report-submit 为 true 时才会返回 formId。

@reset

表单重置时会触发 reset 事件

e中为表单中传过来的值。

b. radio-group

单项选择器,内部由多个 <radio> 组成。通过把多个radio包裹在一个radio-group下,实现这些radio的单选。

c. picker

从底部弹起的滚动选择器。支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器。

属性:range。 mode为 selector 或 multiSelector 时,range 有效

value。 value 的值表示选择了 range 中的第几个(下标从 0 开始)

@change value 改变时触发 change 事件

普通选择器

mode = selector

多列选择器

mode = multiSelector

时间选择器

mode = time

日期选择器

mode = date

省市区选择器

mode = region

18. input标签

@input 当键盘输入时,触发input事件

18. easycom自动导入自定义组件。

传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目根目录或uni_modules的components目录下,并符合components/组件名称/组件名称.vue或uni_modules/插件ID/components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。(不用再向下列传统步骤引入)

第三步:模板应用组件

19. props与emit与data同级。

a. props

父组件传递数据,子组件通过props接收父组件传过来的数据。

父组件传给子组件的值,不允许修改(单向下行绑定),如果要修改父的值,需要子组件将获得的值传给父组件,然后在父组件进行修改。

父组件:

子组件:注明接收到的数据类型 type

数组一定要定义function函数

b. emit

子组件一般不处理数据,所以当子组件拿到数据时,将数据传回父组件。

弹窗用子传父很重要。

(1)子组件myevent在方法中拿到值后:

this.$emit(“自定义事件名”,需要传给父组件的值)

例:this.$emit(“myenv”,123123123)

也可传对象和时间戳等等

(2)父接收值

第一种方法:

引入子组件并接收值

<myevent @myenv="onmyenv"></myevent>

触发子组件myenv事件,onmyenv是在组件内自定义的方法名。

第二种方法:

详见sync修饰符的使用。

20. 修饰符

.native

以上19知识点为例,在父组件中引入子组件,可以直接调用自定义事件,但不可直接引入原生事件。

想要在一个组件的根元素上直接监听一个原生事件。可以使用 @事件的 .native 修饰符:

.synv(响应式)

当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。 .sync 它会被扩展为一个自动更新父组件属性的 v-on 监听器。

注意:$emit中的update必须写。

21.生命周期函数

执行顺序:creatde onLaunth onshow mounted (小程序用onLoad)

注意:如果页面需要传参,就必须用onLoad

uni.navigateBack与vueroute类似

返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈,决定需要返回几层。

22.交互反馈

uni.showToast(OBJECT)

显示消息提示框。

uni.hideToast()

隐藏消息提示框。

uni.showLoading

显示 loading 提示框。

uni.hideLoading()

隐藏 loading 提示框。

uni.showModal

显示模态弹窗,可以只有一个确定按钮,也可以同时有确定和取消按钮。类似于一个API整合了 html 中:alert、confirm。

uni.showActionSheet

从底部向上弹出操作菜单

23. 设置导航条(当前页面设置)

uni.setNavigationBarTitle

动态设置当前页面的标题。

uni.setNavigationBarColor

文字颜色只能是白色和黑色#ffffff和#000000

设置页面导航条颜色。如果需要进入页面就设置颜色,请延迟执行,防止被框架内设置颜色逻辑覆盖

uni.showNavigationBarLoading

在当前页面显示导航条加载动画。

ni.hideNavigationBarLoading

在当前页面隐藏导航条加载动画。

24. 网络请求 API接口与获取数据

uni.request 向服务器发送请求(通过端口)

success 接收服务器返回的数据(注意要用箭头函数)

return 获取返回数据类型(必须)

为了方便,可以写到方法中,这样可以被多次调用。

请求接口等待时间长时,可以加入uni.showloading,请求返回数据后隐藏(uni.hideloading)

例子:

两种带参数变量的方法,第二种是ES6写法

25. 数据缓存

异步接口:

uni.setStorage(OBJECT)

将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口

uni.getStorage(OBJECT)

从本地缓存中异步获取指定 key 对应的内容。

uni.getStorageInfo(OBJECT)

异步获取当前 storage 的相关信息。

uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

uni.clearStorage()

清理本地数据缓存。

同步接口:

** uni.setStorageSync(KEY,DATA)

将 data 存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个同步接口。

** uni.getStorageSync(KEY)

从本地缓存中同步获取指定 key 对应的内容。

存,取

uni.getStorageInfoSync()

同步获取当前 storage 的相关信息。

** uni.removeStorageSync(KEY)

从本地缓存中同步移除指定 key。

uni.clearStorageSync()

同步清理本地数据缓存。

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

魏依一

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值