今日内容:
1.组件的使用
一、作业
1.wxml文件
<!-- 开灯关灯 -->
<view>
<view class="top">
开灯关灯
</view>
<view class="content">
<view bindtap="_click" data-index="{{ index }}"wx:for="{{ bulds }}" class="content-list">
<image src="{{ item.src }}"></image>
<view>{{ item.msg }}</view>
</view>
</view>
</view>
2.wxss文件
/* */
.top{
text-align: center;
border-bottom: 1px solid #ccc;
padding: 20px 0px;
}
.content{
border: 1px solid #ccc;
margin-top: 20px;
padding: 20px 0px;
display: flex;
justify-content: space-around;
}
.content image{
width: 40px;
height: 40px;
}
.content-list{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
3.js文件
Page({
/**
* 页面的初始数据
*/
data: {
bulds:[
{msg:"on",src:"/imgs/bulb.png"},
{msg:"on",src:"/imgs/bulb.png"},
{msg:"on",src:"/imgs/bulb.png"}
]
},
_click(e){
// 获取索引
let index = e.currentTarget.dataset.index;
// console.log(index)
// 如果是on则变为off,反之变成on
this.data.bulds[index].msg = this.data.bulds[index].msg == "off" ? "on" :"off";
this.data.bulds[index].src=this.data.bulds[index].src == "/imgs/bulbed.png" ? "/imgs/bulb.png" :"/imgs/bulbed.png";
this.setData({
bulds:this.data.bulds
})
}
})
二、组件的使用
1.基础组件概念
1.1基础组件/拓展组件
什么是组件:
- 组件是视图层的基本组成单元。
- 组件自带一些功能与微信风格一致的样式。
- 一个组件通常包括
开始标签
和结束标签
,属性
用来修饰这个组件,内容
在两个标签之内。
<tagname property="value">
Content goes here ...
</tagname>
注意:所有组件与属性都是小写,以连字符-
连接
1.2公共属性
id、class、style、hidden、data-*、 bind/catch
2.基础内容组件
1.text组件
<!--
text
user-select 是否允许文本被 选中
space 显示连续空格
decode 是否解码
-->
<text user-select="{{ true }}" space="nbsp">hello world</text>
<view></view>
<text decode="{{ true }}">hello > world!</text>
2.icon组件
<!--
icon
type 图表的类型
size 图标大小 默认是23
color 颜色
-->
<icon type="download"></icon>
<icon type="download" size="40"></icon>
<icon type="download" size="40" color="red"></icon>
3.rich-text 富文本
对比与vue中的v-html即可
1.字符串类型
<!-- 1.字符串形式 -->
<!-- <div><h2>我是H2标签</h2> </div> -->
<rich-text nodes="<h2>我是H2标签</h2>"></rich-text>
<rich-text nodes="<div><h2>我是H2标签</h2> </div>"></rich-text>
<rich-text nodes="{{ str }}"></rich-text>
2.数组类型
<!-- 2.数组的形式 -->
<!-- <h2 class="box">我是H2标签</h2> -->
<rich-text nodes="{{ arr }}"></rich-text>
// pages/page01/page01.js
Page({
/**
* 页面的初始数据
*/
data: {
str:"<h2>我是H2标签</h2>",
// <h2 class="box">我是H2标签</h2>
arr:[
{
type:"node", //是一个标签
name:"h2", // 标签的名字
attrs:{ // 标签的属性
class:"box"
},
children:[
{
type:"text",
text:"我是H2标签-数组形式"
}
]
}
]
},
})
3.视图容器
3.1views视图容器
<view class="box" hover-class="active" hover-start-time="1000" hover-stay-time="5000">
</view>
3.2swiper/swiper-item滑块视图容器
(1)基础用法
<!--
swiper 滑块视图容器
默认的大小 width 整个100% height 150px
规定: swiper 的直接子元素,必须是swiper-item
swiper-item默认的大小是 盛满整个swiper
-->
<swiper class="swiper"
indicator-dots="{{ true }}"
indicator-active-color="#fff"
indicator-color="#000"
autoplay="{{ true }}"
interval="1000"
circular="{{ true }}"
vertical="{{false}}"
display-multiple-items="1"
>
<block wx:for="{{ imgs }}">
<swiper-item>
<image src="{{ item }}"></image>
</swiper-item>
</block>
<!-- <swiper-item>
2
</swiper-item>
<swiper-item>
3
</swiper-item> -->
</swiper>
(2)封装样式
<!-- 封装 -->
<view class="container">
<!-- swiper图片内容 -->
<swiper class="swiper"
bindchange="_change"
autoplay="{{ true }}"
interval="1000"
circular="{{ true }}"
>
<block wx:for="{{ imgs }}">
<swiper-item>
<image src="{{ item }}"></image>
</swiper-item>
</block>
</swiper>
<!-- 自定义dots -->
<view class="custom-dots">
<text class="{{ activeIndex == index ? 'active' : '' }}" wx:for="{{ imgs }}"></text>
</view>
</view>
.swiper image{
width: 100%;
height: 150px;
}
.custom-dots text{
display: inline-block;
width: 10px;
height: 5px;
border: 1px solid #ccc;
border-radius: 2px;
margin-right: 10rpx;
}
.container{
position: relative;
}
.container .custom-dots{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
text-align: center;
}
.container .active{
border: 1px solid #f00;
}
// pages/page02/page02.js
Page({
/**
* 页面的初始数据
*/
data: {
imgs:[
"/imgs/1.jpg",
"/imgs/2.jpg",
"/imgs/3.jpg",
],
activeIndex:0, //默认是第一张图片
},
_change(e){
console.log(e)
// detail获取值,是当前组件私有的事件
let activeIndex = e.detail.current;
this.setData({
activeIndex
})
}
})
3.3scroll-view可滚动视图区域
(1)竖向滚动
y:
1.给scroll-view加固定的高度
2.scroll-y 为真
<scroll-view class="box" scroll-y="{{ true }}">
<view class="red">red</view>
<view class="green">green</view>
<view class="blue">blue</view>
</scroll-view>
.red{
width: 300px;
height: 300px;
background-color: red;
}
.green{
width: 300px;
height: 300px;
background-color: green;
}
.blue{
width: 300px;
height: 300px;
background-color: blue;
}
.box{
height: 400px;
width: 300px;
}
(2)横向滚动
X:
1.scroll-x 为真
2.给子元素设置行内的块状效果,父元素不能换行
<scroll-view class="box" scroll-x="{{ true }}">
<view class="red">red</view>
<view class="green">green</view>
<view class="blue">blue</view>
<view>删除</view>
</scroll-view>
.red{
width: 300px;
height: 100px;
background-color: red;
}
.green{
width: 300px;
height: 100px;
background-color: green;
}
.blue{
width: 300px;
height: 100px;
background-color: blue;
}
.box{
height: 100px;
width: 100%;
white-space: nowrap; // 父元素不能换行
}
.box view{
display: inline-block; // 子元素行内块状元素
}
(3)demo
<!-- 案例 -->
<view class="category">
<!-- 一级分类 -->
<scroll-view class="category-l" scroll-y="{{ true }}">
<block wx:for="{{ firstCate }}">
<view bindtap="_active" data-id="c{{ index}}">
{{ item.name }}
</view>
</block>
</scroll-view>
<!-- 二级分类 -->
<scroll-view class="category-r" scroll-y="{{ true }}" scroll-into-view="{{cateid}}">
<block wx:for="{{ secondCate }}" wx:for-item="val">
<view class="father" id="c{{ index }}">
<block wx:for="{{ val }}">
<view>
{{ item.name }}
</view>
</block>
</view>
</block>
</scroll-view>
</view>
/* 案例 */
.category{
display: flex;
height: 280px;
}
.category-l{
flex: 1;
/* border: 1px solid #f00; */
height: 100%;
}
.category-r{
flex: 3;
height: 100%;
}
.category-l view{
width: 100%;
height: 40px;
border: 1px solid #ccc;
line-height: 40px;
text-align: center;
}
.father{
width: 100%;
height: 160px;
background-color: lightcoral;
margin-bottom: 10px;
}
page({
data:{
cateid:"c0",
firstCate:[
{id:"c01",name:"电视"},
{id:"c02",name:"手机"},
{id:"c03",name:"电脑"},
{id:"c04",name:"冰箱"},
{id:"c05",name:"洗衣机"},
{id:"c06",name:"空调"},
{id:"c07",name:"热水箱"},
{id:"c08",name:"热水器"},
],
secondCate:[
[
{id:"u01",name:"小米电视"},
{id:"u02",name:"海尔电视"},
{id:"u03",name:"华为电视"},
],
[
{id:"u01",name:"小米手机"},
{id:"u02",name:"海尔手机"},
{id:"u03",name:"华为手机"},
],
]
},
_active(e){
let cateid = e.currentTarget.dataset.id;
console.log(cateid)
this.setData({
cateid,
})
}
})
4.表单组件
4.1input组件
type: 键盘类型 默认 text 文本输入
双向数据绑定:
vue 中 v-model
小程序: model:属性
<view class="container">
<view class="title">
请填写一下信息
</view>
<view class="name">姓名:</view>
<input class="username" bindinput="_input" placeholder="输入姓名" type="text" />
<view class="name">联系方式:</view>
<input class="username" model:value="{{ val }}" type="number" placeholder="输入联系方式" type="text" />
<view class="name">密码:</view>
<input class="username" maxlength="5" password type="number" placeholder="输入密码" type="text" />
</view>
<button bindtap="_search">搜索</button>
<view class="container">
<form bindsubmit="_formSubmit">
<view class="title">
请填写一下信息
</view>
<view class="name">姓名:</view>
<input class="username" name="username" bindinput="_input" placeholder="输入姓名" type="text" />
<view class="name">联系方式:</view>
<input class="username" name="phone" model:value="{{ val }}" type="number" placeholder="输入联系方式" type="text" />
<view class="name">密码:</view>
<input class="username" name="pass" maxlength="5" password type="number" placeholder="输入密码" type="text" />
<view class="name">您的性别是:</view>
<radio-group bindchange="_radioChange" name="sex">
<radio value="m" checked>男</radio>
<radio value="w" color="red">女</radio>
<radio value="n">保密</radio>
</radio-group>
<view class="name">您的爱好是:</view>
<checkbox-group bindchange="_checkboxChange" name="hobby">
<checkbox value="游戏">游戏</checkbox>
<checkbox value="睡觉">睡觉</checkbox>
<checkbox value="吃饭" checked>吃饭</checkbox>
<checkbox value="学习" color="red">学习</checkbox>
</checkbox-group>
<view class="name">您是否同意我们联系您本人:</view>
<!-- <switch bindchange="_switchChange" type="switch"></switch> -->
<switch name="isAgree" bindchange="_switchChange" type="checkbox"></switch>
<view>您的地址是:{{ region }}</view>
<picker mode="region" bindchange="_pickerChange" name="region">
选择:
</picker>
<button type="primary" form-type="submit" size="default">提交</button>
<button type="warn" form-type="reset" size="default">重置</button>
</form>
</view>
// pages/page03/page03.js
Page({
/**
* 页面的初始数据
*/
data: {
msg:"",
val:"",
region:[],
},
// 键盘输入
_input(e){
// console.log(e.detail.value)
// this.data.msg = e.detail.value
// this.data.val = e.detail.value
this.setData({
val:e.detail.value
})
},
// 搜索
_search(){
// console.log(this.data.msg)
// 发起数据请求
console.log(this.data.val)
},
// 单选按钮发生改变
_radioChange(e){
console.log(e)
},
// 多选按钮
_checkboxChange(e){
console.log(e)
},
// 开关选择器
_switchChange(e){
console.log(e)
},
_pickerChange(e){
// console.log(e)
this.setData({
region:e.detail.value
})
},
// 表单提交
_formSubmit(e){
console.log(e)
}
})
注意事项:
- 表单提交, 使用form, 给button设置 form-type属性, 值是submit 是提交,值为reset时候是重置
- 当点击按钮的时候,会触发 form表单的 bindsubmit及bindreset事件
- 做表单提交,要加name作为key
5.导航组件
5.1组件navigator
url: 跳转的地址
target: 跳转的方式 self miniprogram
open-type:如何跳转
navigate:
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层
redirect:
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
switchTab:
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
reLaunch:
关闭所有页面,打开到应用内的某个页面
navigateBack:
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈,决定需要返回几层
<navigator
target="self"
open-type="navigate"
url="../page03/page03"
>
<button>跳转page03-navigate</button>
</navigator>
<navigator
target="self"
open-type="redirect"
url="../page03/page03"
>
<button>跳转page03-redirect</button>
</navigator>
<navigator
target="self"
open-type="switchTab"
url="../index/index"
>
<button>跳转index-switchTab</button>
</navigator>
<navigator
target="self"
open-type="reLaunch"
url="../page03/page03"
>
<button>跳转index-reLaunch</button>
</navigator>
5.2路由api
<!-- 使用api进行跳转 -->
<button bindtap="_toPage03" type="warn">路由跳转api</button>
_toPage03(){
// 使用api进行跳转
// wx.navigateTo({
// url: '../page03/page03',
// })
// wx.redirectTo({
// url: '../page03/page03',
// })
wx.switchTab({
url: '../index/index',
success(res){
console.log(res)
}
})
}
5.3传递参数/接收参数
1.传递参数
<navigator
target="self"
open-type="navigate"
url="../page03/page03?id=100&name=lisi" //在url地址上进行拼接
>
<button>跳转page03-navigate</button>
</navigator>
js文件:
let name="admin",age=30;
wx.navigateTo({
url: `../page03/page03?name=${name}&age=${age}`,
})
2.接收参数
在目标页面,onLoad生命周期函数中,进行获取参数
onLoad(option){
console.log(option)
},
特殊情况:
switchTab 不能携带参数
5.4跳转到其他小程序
<navigator target="miniProgram" app-id="wx8fc369471215e8ae" >
<button>跳转到其他小程序</button>
</navigator>
三、模块化操作
1.commonjs规范
模块文件:config.js
const url="http://localhost";
const port = 3000;
// commonjs
module.exports = {
url,port
}
页面的js文件
// pages/page04/page04.js
// commonjs导入
let config = require('../../utils/config');
console.log(config)
2.ES6规范
模块文件:
const url="http://localhost";
const port = 3000;
// es6
// export {
// url,port
// }
export default {
url,port
}
页面js
// es6 导入
// import {url,port} from "../../utils/config"
import config from "../../utils/config"
console.log(config)
// console.log(url,port)