小程序进阶学习03
一、组件的使用
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="{{ true }}" space="nbsp">hello worldtext>
<view>view>
<text decode="{{ true }}">hello > world!text>
2.icon组件
<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.字符串类型
<rich-text nodes=" ">rich-text>
<rich-text nodes="我是H2标签
">rich-text>
<rich-text nodes="{{ str }}">rich-text>
2.数组类型
<rich-text nodes="{{ arr }}">rich-text>
// pages/page01/page01.js
Page({
/**
* 页面的初始数据
*/
data: {
str:"我是H2标签
",
// 我是H2标签
arr:[
{
type:"node", //是一个标签
name:"h2", // 标签的名字
attrs:{ // 标签的属性
class:"box"
},
children:[
{
type:"text",
text:"我是H2标签-数组形式"
}
]
}
]
},
})
3.视图容器
3.1 views视图容器
<view class="box" hover-class="active" hover-start-time="1000" hover-stay-time="5000">
view>
3.2swiper/swiper-item滑块视图容器
（1）基础用法
<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>
（2）封装样式
<view class="container">
<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>
<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;
}
// 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">redview>
<view class="green">greenview>
<view class="blue">blueview>
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">redview>
<view class="green">greenview>
<view class="blue">blueview>
<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 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-navigatebutton>
navigator>
<navigator
target="self"
open-type="redirect"
url="../page03/page03"
>
<button>跳转page03-redirectbutton>
navigator>
<navigator
target="self"
open-type="switchTab"
url="../index/index"
>
<button>跳转index-switchTabbutton>
navigator>
<navigator
target="self"
open-type="reLaunch"
url="../page03/page03"
>
<button>跳转index-reLaunchbutton>
navigator>
5.2路由api
<button bindtap="_toPage03" type="warn">路由跳转apibutton>
_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.传递参数
<button>跳转page03-navigatebutton>
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)