小程序 基础事件 组件以及插槽讲解

一. 基础认知:

(一). 事件:

1.表单事件: bindinput = ‘自定义名称’

获取事件源对象 自定义事件中的第一个参数 例如:e.detail.value
把输入框的值赋值: 注意:不能直接赋值

this.setDate({
 	num:e.detail.value
})

2.点击事件: bindtap=“自定义事件1”

注意:不能直接传参,通过自定义属性的方式

<button bindtap="add" data-operation="{{1}}" >
<button bindtap="add" data-operation="{{-1}}" >
<view>{{num}}</view>

//js
add(e){
	console.log(e)
	//获取自定义的属性operation
	const operation = e.currentTarget.dataset.operation;
	this.setDate({
 		num:this.data.num+operation
	})
}

(二)引入样式:

1. 通过 @import 来引入
   注意:路径只能写相对路径

   @import "../../style/common.wxss";
   

2. 使用less

   原生小程序不支持less，其他基于小程序的框架大体都支持，如 wepy , mpvue,taro等。
   但是仅仅因为一个less功能，而去引入一个框架。肯定是不可取的。因此可以用以下方式来实现:
   (1). 编辑器是vscode
   (2). 安装插件easy less
   (3) .在vs code的设置中加入如下。配置

   "less.compile":{
   	"outExt": ".wxss"
   }
   

   (4). 在要编写样式的地方，新建less文件，如index.less ,然后正常编辑即可。

二.组件:

(一).image组件:

1. src指定要加载的图片的路径
2. mode决定图片内容如何和图片标签宽高做适配

<image mode= "bottom" lazy-load src="https://tva2.sinaimg.cn/large/0e7DFXOhgy1g51j]1zfb41j305ke2s0sp.jpg"/>

mode属性:

属性	功能
scaleToFill	默认值不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image 元素
aspectFit	保持宽高比确保图片的长边显示出来页面轮播图常用
aspectFill	保持纵横比缩放图片，只保证图片的短边能完全显示出来.(少用)
widthFix	以前web的图片的宽度指定了之后高度会自己按比例来调整(常用)
top	不缩放图片。只显示图片的顶部区域
bottom	不缩放图片。只显示图片的底部区域
center	不缩放图片。只显示图片的中间区域
left	不缩放图片。只显示图片的左边区域
right	不缩放图片。只显示图片的右边区域
top left	不缩放图片，只显示图片的左上边区域
top right	不缩放图片。只显示图片的右上边区域
bottom left	不缩放图片。只显示图片的左下边区域
bottom right	不缩放图片。只显示图片的右下边区域

(二).button 组件

基础按钮:
1.外观的属性

(1) size控制按钮的大小1 default 默认大小 mini 小尺寸

(2) type用来控制按钮的颜色1 default 灰色

2 .primary绿色 warn红色

3 .plain按钮是否镂空，背景色透明

4 .loading 名称前是否带loading图标

<button>默认按钮</button>
<button size="mini">mini默认按钮</ button>
<button type="primary"> primary按钮</button>
<button type="warn"> warn按钮</ button>
<button type="warn" plain> plain按钮</button>
<button type="primary" loading> loading按钮</button>

效果图:

开发能力:
open-type属性

1. contact直接打开客服对话功能―需要在微信小程序的后台配置
   ​ (1).将小程序的appid由测试号改为自己的 appid
   ​ (2).登录微信小程序官网, 添加 客服–微信

2. share转发当前的小程序到微信朋友中不能把小程序分享到朋友圈

3. getPhoneNumber 获取当前用户的手机号码信息结合一个事件来使用不是企业的小程序账号没有权限来获取用户的手机号码

   (1)绑定一个事件 bindgetphonenumber

   (2)在事件的回调函数中通过参数来获取信息

   (3)获取到的信息己经加密过了需要用户自己待见小程序的后台服务器，在后台服务器中进行解析手机号码，返回到小程序中就可以看到信息了

4. getuserInfo获取当前用户的个人信息1使用方法类似获取用户的手机号码2可以直接获取不存在加密的字段

5. launchApp 在小程序当中直接打开 app

   (1)需要现在app中通过app的某个链接打开小程F

   (2)在小程序中再通过这个功能重新打开 app

   (3)找到京东的app 和京东的小程序

6. opensetting打开小程序内置的授权页面1授权页面中只会出现用户曾经点击过的权限

7. feedback打开小程序内置的意见反馈页面1只能够通过真机调试来打开

<button open-type="contact">contact</button>
<button open-type="share" >share</button>

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>

<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">1aunchApp</button>
<button open-type="openSetting">opensetting</button>
<button open-type="feedback">feedback</button>

//js文件
Page({
	//获取用户手机号码信息
	getPhoneNumber(e){
		console.log(e);
	},
	//获取用户个人信息
	getUserInfo(e){
		console.log(e)
	}
})

效果图:

(三).swiper 组件

1. 轮播图外层容器 swiper
2. 每一个轮播项swiper-item
3. swiper标签存在默认样式
   (1) width 100%
   (2) height 150px image存在默认宽度和高度320* 240
   (3) swiper 高度无法实现由内容撑开
4. 先找出来原图的宽度和高度等比例给swiper定宽度和高度

组件属性:

属性	作用
autoplay	自动轮播
interval	修改轮播时间
circular	衔接轮播
indicator-dots	显示指示器分页器索引器
indicator-color	指示器的未选择的颜色
indicator-active-color	选中的时候的指示器的颜色

<swiper autoplay interval="1000" circular indicator-dots indicator-color "#-04ff" indicator-active-color "ff094">
	<swiper-item> <image mode= "widthFix" src="//gw.alicdn.com/imgextra/i1//010N113ZKZ711CcEyG5bAeF _1 !4-9-lubanu .jpg" /></swiper-item>
	<swiper-item><image mode= "widthFix" src="/aecpm.alicdn.com/simba/img/T81CwF9Kp03buXpXxsutbFXx.jpg_Q50.jpg"/>
	</swiper-item>
	<swiper-item> <image mode="widthFix" src= "//gw.alicdn.com/imgextra/12/37/01CNe1syHZx51C32CF3j976_1l37-0-1uban .jpg" />
	</swiper-item>
</swiper>

//wxss
swiper{
	width: 100%;
	/* height: calc(1eevw * 352/1125);*/
	height:31.28vm;
}
image{
	width:100%
}

(四). 导航组件

块级元素默认会换行可以直接加宽度和高度

基本属性:

属性	作用
url	要跳转的页面路径绝对路径相对路径
target	要跳转到当前的小程序还是其他的小程序的页面
self	默认值自己小程序的页面
miniProgram	其他的小程序的页面
open-type	跳转方式

open-type的值:

属性	作用
navigate	默认值―保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar页面
redirect	关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面。
switchTab	跳转到tabBar页面，并关闭其他所有非tabBar页面
reLaunch	关闭所有页面,打开到应用内的某个页面

(五). 自定义组件:

1. 创建components文件夹,

2. 在文件夹内components/Tabs下 创建组件名为tabs(新建文件时可使用右键的新建Component,这样工具会给你配置好)

3. 使用组件时在使用者内填写被使用组件的路径

//使用者json文件中
{
	"usingComponents":{
		"Tabs":"../../components/Tabs/Tabs"  //被使用组件的路径
	}
}

//xml
<Tabs></Tabs>  //组件标签

注意:若组件js中存放事件回调函数时必须放在methods文件中

1.父传子:

(1). 父组件(页面)向子组件传递数据通过标签属性的方式来传递

<Tabs aaa="aaaa"></Tabs>

(2).在子组件上进行接收(子组件js文件中)

properties: {
	//要接收的数据的名称
	aaa:{
		// type要接收的数据的类型
		type:string,
		/value默认值
		value :""
	}
}

(3).子组件把这个数据当成是data中的数据直接用即可

<view>{{aaa}}</view>

2.子传父:

(1).子组件内定义 父组件自定义事件,传递参数给父组件 (js文件)

this.tiggerEvent("父组件自定义事件",参数)

例如:

this.tiggerEvent("itemChange",{index})

(2).父组件自定义事件来接收子组件传递过来的数据

handleItemchange(e){
	console.log(e);
}

(3).页面标签页(wxml)绑定自定义事件

<Tabs tabs="{{tabs}}" binditemChange="handleItemchange"></Tabs>

三. 插槽:

slot标签其实就是一个占位符插槽,等到父组件调用子组件的时候再传递标签过来最终这些被传递的标签就会替换slot插槽的位置

其他属性:

---

总结:

今天基于上篇文章继续了解了小程序的基础知识,且还有小程序的组件及插槽讲解.后期还会讲解小程序,下期见…