1. 首页
  2. 文章中心
  3. 小程序

小程序进阶学习03一、组件的使用二、模块化操作

66 阅读 0 评论
我是靠谱客的博主 苹果橘子，这篇文章主要介绍小程序进阶学习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
是否允许文本被 选中
space
显示连续空格
decode 是否解码
-->
<text user-select="{{ true }}" space="nbsp">hello
world</text>
<view></view>
<text decode="{{ true }}">hello &gt; 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=" "></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.1 views视图容器

<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>

（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;
}

// 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)
}
})

注意事项：

  1. 表单提交， 使用form， 给button设置 form-type属性， 值是submit 是提交，值为reset时候是重置
  2. 当点击按钮的时候，会触发 form表单的 bindsubmit及bindreset事件
  3. 做表单提交，要加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)

最后

以上就是苹果橘子最近收集整理的关于小程序进阶学习03一、组件的使用二、模块化操作的全部内容，更多相关小程序进阶学习03一、组件内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(44)

相关文章

修改UIWebView中字体的大小
修改UIWebView中字体的大小
开发问题记录JavaScriptvueuni-appvue3中 使用ts时报错解决
开发问题记录JavaScriptvueuni-appvue3中 使用ts时报错解决
uni-app的canvas设置文字居中对齐center
uni-app的canvas设置文字居中对齐center
iOS设置改变UILabel、UIButton的多种颜色和字体大小(非常好用)
iOS设置改变UILabel、UIButton的多种颜色和字体大小(非常好用)
小程序进阶学习03一、组件的使用二、模块化操作
小程序进阶学习03一、组件的使用二、模块化操作
UIButton上字体的对齐方式
UIButton上字体的对齐方式
easyui之自定义字体图标（鼠标覆盖时切换颜色）
easyui之自定义字体图标（鼠标覆盖时切换颜色）
EasyUI入门（LinkButton，Tabs）
EasyUI入门（LinkButton，Tabs）

评论列表共有 0 条评论

立即
投稿
返回
顶部