微信小程序框架(二)-全面详解（学习总结---从入门到深化）
2024-05-07 08:20:46
目录
组件_基础视图
容器 view
文本 text
图片 image
组件_滑块视图容器
基本实现
Swiper常用属性说明
组件_滚动视图区域
水平滚动
垂直滚动
常用属性
组件_icon
图标使用
字体图标属性
组件_progress
基本进度条
属性说明
组件_表单
登录页面
组件_button
按钮属性
type 属性说明
size 属性说明
组件_输入框
实现基本输入框
输入框属性
type 属性详解
confirm-type 属性详解
组件_picker
普通选择器
多列选择器
时间选择器
日期选择器
省市区选择器
组件_slider
基本实现
常用属性
组件_表单其他常用组件
复选框 checkbox
radio
label
switch
属性列表
textarea
组件_navigator
组件_audio
组件_video
组件_camera
组件_map
组件_基础视图
小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页 开发相比有很大的相似性。但是二者还是多少有些许区别的，例如：小程序提供了一系列的视图组件代替 html 中的标签
容器 view
视图容器，用来承载视图块，类似 div 的功能，所以要写在 wxml 视 图文件之中
我们在项目中增加一个页面 views ，并指定为默认页面
<!-- views.wxml --> <view>视图1</view> <view>视图2</view>view 是块级元素
文本 text
文本，承载页面文本信息，类似 span 的功能
<text>文本1</text> <text>文本2</text>text 是行内元素
图片 image
图片。支持 JPG、PNG、SVG、WEBP、GIF 等格式
<image src="../../images/1.webp"></image>
mode属性说明
<image src="../../images/1.webp" mode="heightFix"></image>1. 在小程序中，显示文本信息应该使用的组件是：text
组件_滑块视图容器
滑块视图容器（焦点轮播图）
基本实现
我们增加一个全新的页面 swiper 来实现轮播图效果
<!-- swiper.wxml --> <view><swiper><swiper-item><image src="../../images/1.png"></image></swiper-item><swiper-item><image src="../../images/2.jpg"></image></swiper-item><swiper-item><image src="../../images/3.jpg"></image></swiper-item></swiper> </view>为了更美观，可以让图片宽度充满全屏,并保持图片不变形
<!-- swiper.wxml --> <view><swiper class="swiper"><swiper-item><image mode="widthFix" src="../../images/1.png"></image></swiper-item><swiper-item><image mode="widthFix" src="../../images/2.jpg"></image></swiper-item><swiper-item><image mode="widthFix" src="../../images/3.jpg"></image></swiper-item></swiper> </view>同时设置图片样式充满全屏，因为图片默认大小：宽度320px、高度240px
/* swiper.wxss */ image{width: 100%; }
Swiper常用属性说明
<!-- swiper.wxml -->
<view><swiperclass="swiper"indicator-dotsindicator-color="#fff"indicator-active-color="#f00"autoplayinterval="5000"duration="1000"circularvertical><swiper-item><image mode="widthFix" src="../../images/1.png"></image></swiper-item><swiper-item><image mode="widthFix" src="../../images/2.jpg"></image></swiper-item><swiper-item><image mode="widthFix" src="../../images/3.jpg"></image></swiper-item></swiper>
</view>属性值来源于逻辑文件
我们可以在逻辑文件 swiper.js 中动态配置属性值
// news.js Page({data: {swiperOptions:{indicatorDots:true,indicatorColor:"#fff",indicatorActiveColor:"#f00",autoplay:true,interval:5000,duration:1000,circular:true,vertical:true}} })<!-- swiper.wxml --> <view><swiperclass="swiper"indicator-dots="{{ swiperOptions.indicatorDots }}"indicator-color="{{ swiperOptions.indicatorColor }}"indicator-active-color="{{ swiperOptions.indicatorActiveColor }}"autoplay="{{ swiperOptions.autoplay }}"interval="{{ swiperOptions.interval }}"duration="{{ swiperOptions.duration }}"circular="{{ swiperOptions.circular }}"vertical="{{ swiperOptions.vertical }}"><swiper-item><image mode="widthFix" src="../../images/1.png"></image></swiper-item><swiper-item><image mode="widthFix" src="../../images/2.jpg"></image></swiper-item><swiper-item><image mode="widthFix" src="../../images/3.jpg"></image></swiper-item></swiper> </view>1. 在小程序中，下列那个属性可以设置滑块视图容器自动滚动：autoplay
组件_滚动视图区域
可滚动视图区域。可实现容器内元素水平和垂直方向滚动
水平滚动
给容器设置 scroll-x ，可实现水平滚动
<!-- scroll.wxml -->
<view><scroll-view class="scroll-view_H" scroll-x="true"><view class="scroll-view-item demo-text-1"></view><view class="scroll-view-item demo-text-2"></view><view class="scroll-view-item demo-text-3"></view></scroll-view>
</view>当然要配合样式实现
/* scroll.wxss */
.scroll-view_H{/* 规定容器内元素不进行换行 */white-space: nowrap;
}
.scroll-view-item {display: inline-block;width: 100%;height: 300rpx;
}
.demo-text-1{background-color: red;
}
.demo-text-2{background-color: green;
}
.demo-text-3{background-color: blue;
}垂直滚动
给容器设置 scroll-y ，可实现垂直滚动
<!-- scroll.wxml -->
<view><scroll-view class="scroll-view_V" scroll-y="true"><view class="scroll-view-item demo-text-1"></view><view class="scroll-view-item demo-text-2"></view><view class="scroll-view-item demo-text-3"></view></scroll-view>
</view>当然要配合样式实现
/* scroll.wxss */
.scroll-view-item {width: 100%;height: 300rpx;
}
.demo-text-1{background-color: red;
}
.demo-text-2{background-color: green;
}
.demo-text-3{background-color: blue;
}
.scroll-view_V{height: 300rpx;
}常用属性
<view><!-- 水平滚动 --><scroll-view refresher-enabled scroll-left="50" class="scroll-view_H" scroll-x="true"><view class="scroll-view-item demo-text-1"></view><view class="scroll-view-item demo-text-2"></view><view class="scroll-view-item demo-text-3"></view></scroll-view><!-- 垂直滚动 --><scroll-view refresher-enabled scroll-top="50" class="scroll-view_V" scroll-y="true"><view class="scroll-view-item demo-text-1"></view><view class="scroll-view-item demo-text-2"></view><view class="scroll-view-item demo-text-3"></view></scroll-view>
</view>1. 在小程序中，下列那个属性可以设置滚动视图容器垂直方向滚动：scroll-y
组件_icon
图标组件,其实就是字体图标效果，但是这里所提供的只有最常用的几个
图标使用
<icon type="success"></icon>
字体图标属性
<icon type="success" size="50" color="red"></icon>
<icon type="success_no_circle" size="50"></icon>
<icon type="info" size="50"></icon>
<icon type="warn" size="50"></icon>
<icon type="waiting" size="50"></icon>
<icon type="cancel" size="50"></icon>
<icon type="download" size="50"></icon>
<icon type="search" size="50"></icon>
<icon type="clear" size="50"></icon>1. 在小程序中，下列那个属性可以设置字体图标为搜索：search
组件_progress
基本进度条
<progress percent="20"/>属性说明
<progress percent="20"/>
<progress percent="20" show-info/>
<progress percent="20" show-info font-size="30"/>
<progress percent="20" show-info font-size="30" stroke-width="20"/>
<progress percent="20" border-radius="5"/>
<progress percent="20" border-radius="5" activeColor="#f00"/>
<progress percent="20" border-radius="5" activeColor="#f00" backgroundColor="#00f"/>
<progress percent="20" border-radius="5"
activeColor="#f00" backgroundColor="#00f" active/>
<progress percent="20" border-radius="5" activeColor="#f00" backgroundColor="#00f"
active duration="90"/>1. 在小程序中，设置进度条组件的进度条，进度增加的时间是：duration
组件_表单
表单，将用户输入的信息提交到服务器
小程序的表单与 html 的表单基本一致
登录页面
创建一个登陆页面 login ,在 login.wxml 中实现基本结构
<view class="login"><form><input placeholder="请输入用户名" /><input placeholder="请输入密码" /><button type="primary">登录</button></form> </view>为了美观，我们需要在 login.wxss 文件中添加样式
.login{margin-top: 100rpx; }input{border: 1px solid #999;border-radius: 5px;margin: 10px;padding-left: 10px;height: 70rpx; }1. 在微信小程序中，下列不属于表单元素的是：image
组件_button
小程序的 button 按钮与 html 的非常类似，但是小程序的功能要更强大一些
<button>按钮</button>
按钮属性
type 属性说明
size 属性说明
<button>按钮</button>
<button type="default">按钮</button>
<button type="primary">按钮</button>
<button type="warn">按钮</button>
<button type="primary" size="default">按钮</button>
<button type="primary" size="mini">按钮</button>
<button type="primary" plain>按钮</button>
<button type="primary" disabled>按钮</button>
<button type="primary" loading>按钮</button>
<button type="primary" form-type="submit">按钮</button>1. 在微信小程序中，下列那个属性是按钮组件设置镂空属性：plain
组件_输入框
输入框是 input , 与 html 的输入框类似，但是增加了很多新的功能
实现基本输入框
<input />
为了展示效果，需要配合样式
input{border: 2px solid red;
}输入框属性
type 属性详解
confirm-type 属性详解
<input />
<input value="测试信息"/>
<input placeholder="请输入用户名"/>
<input placeholder="请输入密码" password/>
<input placeholder="请输入密码" disabled/>
<input placeholder="文本" maxlength="10"/>
<input placeholder="文本" focus/>
<input placeholder="文本" type="text"/>
<input placeholder="文本" type="number"/>
<input placeholder="文本" type="idcard"/>
<input placeholder="文本" type="digit"/>
<input placeholder="文本" type="nickname"/>
<input placeholder="文本" type="text" confirm-type="send"/>
<input placeholder="文本" type="text" confirm-type="search"/>
<input placeholder="文本" type="text" confirm-type="next"/>
<input placeholder="文本" type="text" confirm-type="go"/>
<input placeholder="文本" type="text" confirm-type="done"/>配合样式更美观
input{border: 1px solid #999;height: 80rpx;margin: 10px;padding-left: 10px;
}1. 在微信小程序中，下列那个属性是输入框组件设置键盘右下角按钮的文字：confirm-type
组件_picker
从底部弹起的滚动选择器
选择器有很多种类，分别是
普通选择器
指定 mode 属性为 selector ,或者默认不指定 mode
<view>普通选择器</view> <picker bindchange="bindPickerChange" value=" {{index}}" range="{{array}}"><view class="picker">当前选择：{{array[index]}}</view> </picker>选择器展示效果需要配合逻辑
Page({data: {array: ['美国', '中国', '巴西', '日本'],index: 0},bindPickerChange(e) {this.setData({index: e.detail.value})} })
多列选择器
指定 mode 属性为 multiSelector
<view>多列选择器</view> <picker mode="multiSelector" bindchange="bindMultiPickerChange" value=" {{multiIndex}}" range="{{multiArray}}"><view class="picker">当前选择：{{ multiArray[0] [multiIndex[0]] }}，{{ multiArray[1] [multiIndex[1]] }}， {{multiArray[2] [multiIndex[2]]}}</view> </picker>Page({data: {multiArray: [['无脊柱动物', '脊柱动物'],['扁性动物', '线形动物', '环节动物','软体动物', '节肢动物'],['猪肉绦虫', '吸血虫']],multiIndex: [0, 0, 0],},bindMultiPickerChange: function (e) {this.setData({multiIndex: e.detail.value})} })
时间选择器
指定 mode 属性为 time
<view>时间选择器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01"
bindchange="bindTimeChange"><view class="picker">当前选择: {{time}}</view>
</picker>Page({data: {time: '12:01'},bindTimeChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({time: e.detail.value})}
})日期选择器
指定 mode 属性为 date
<view>日期选择器</view>
<picker mode="date" value="{{date}}" start="2000-09-01" end="2030-09-01" bindchange="bindDateChange"><view class="picker">当前选择: {{date}}</view>
</picker>Page({data: {date: '2030-09-01'},bindDateChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({date: e.detail.value})}
})省市区选择器
指定 mode 属性为 region
<view>省市区选择器</view>
<picker mode="region" bindchange="bindRegionChange" value="{{region}}"><view class="picker">当前选择：{{region[0]}}，{{region[1]}}，{{region[2]}}</view>
</picker>Page({data: {region: ['广东省', '广州市', '海珠区']},bindRegionChange: function (e) {console.log('picker发送选择改变，携带值为', e.detail.value)this.setData({region: e.detail.value})}
})1. 在微信小程序中，实现底部弹起的省市滚动选择器，需要指定 mode 的值为：region
组件_slider
滑动选择器
基本实现
<slider />常用属性
<slider />
<slider step="20"/>
<slider show-value/>
<slider min="50" max="200" show-value/>
<slider min="50" max="200" show-value disabled/>
<slider show-value value="30"/>
<slider show-value value="30" backgroundColor="red"/>
<slider show-value value="30" backgroundColor="red" activeColor="blue"/>
<slider block-color="red"/>1. 在微信小程序中，滑动选择器中修改滑块颜色的属性是：block-color
组件_表单其他常用组件
复选框 checkbox
多选项目，与 html 复选框基本一致
<checkbox checked="true"/>选中checked 表示初始状态为选中(true) 或 未选中(false)
配合 checkbox-group 形成一组
<checkbox-group><checkbox checked="true" />读书<checkbox checked="true" />打游戏<checkbox />听音乐 </checkbox-group>
radio
单选项目,与 html 单选框基本一致
<radio checked="true"/>选中checked 表示初始状态为选中(true) 或 未选中(false)
配合 radio-group 形成一组
<radio-group><radio checked="true"/>选项1<radio checked="false"/>选项2<radio checked="false"/>选项3<radio checked="false"/>选项4 </radio-group>
label
用来改进表单组件的可用性,与 html 的 label 基本一致
<label for="menu"><checkbox id="menu" checked="true"/>选中 </label>
switch
开关选择器,有着比较美观的展示效果
<switch />属性列表
<switch />
<switch checked="true"/>
<switch checked="true" disabled/>
<switch checked="true" type="checkbox"/>
<switch checked="true" color="red"/>
textarea
多行输入框,与 html 多行输入框基本一致
<textarea />为了可见性，我们需要增加样式
textarea{border: 1px solid red; }
<textarea value="文本内容" /> <textarea placeholder="占位符" /> <textarea maxlength="10" /> <textarea disabled /> <textarea focus /> <textarea auto-height/>1. 在微信小程序中， textarea 如何实现自动增高：auto-height
组件_navigator
navigator 实现页面之间的跳转
<navigator url="/pages/other/other" >跳转其他页面</navigator>常用属性说明
<navigator url="/pages/other/other" >跳转其他页面</navigator> <navigator url="/pages/slider/slider" open-type="redirect">在当前页打开</navigator>
扩展：生命周期函数
onUnload 在之前的讲解中无法测试，现在有了 navigator ，我们可以进行测试了
在 navigator 的属性 open-type 设置为 redirect 时，我们可以观察输入结果
Page({onUnload() {console.log("卸载");} })1. 在微信小程序中， navigator 的属性 open-type="redirect" 时，作用是：在当前页打开
组件_audio
音频
<audio src="https://music.163.com/song/media/outer/url?id=1961763339" controls></audio>属性说明
<audioid="myaudio"poster="https://p2.music.126.net/6yUleORITEDbvrOLV0Q8A==/5639395138885805.jpg"name="妈妈的话"author="zyboy忠宇"src="https://music.163.com/song/media/outer/url?id=1961763339"controlsloop>
</audio>切换音乐
通过修改 audio 的属性，切换音乐
<audioid="{{ audioOptions.id }}"poster="{{ audioOptions.poster }}"name="{{ audioOptions.name }}"author="{{ audioOptions.author }}"src="{{ audioOptions.src }}"controls="{{ audioOptions.controls }}"loop="{{ audioOptions.loop }}">
</audio>
<button type="primary" bindtap="changeMusicHandle">切换</button>Page({data: {audioOptions:{id:"myAudio",name:"妈妈的话",author:"zby忠宇",poster:"https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",src:"https://music.163.com/song/media/outer/url?id=1961763339",controls:true,loop:true}},changeMusicHandle(){this.setData({audioOptions:{id:"myAudio",Page({data: {audioOptions:{id:"myAudio",name:"妈妈的话",author:"zby忠宇",poster:"https://p2.music.126.net/6y-
UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",src:"https://music.163.com/song/media/outer
/url?id=1961763339",controls:true,loop:true}},changeMusicHandle(){this.setData({audioOptions:{id:"myAudio",name:"时光洪流",author:"程响",poster:"https://p2.music.126.net/6y-UleORITEDbvrOLV0Q8A==/5639395138885805.jpg",src:"https://music.163.com/song/media/outer
/url?id=1868943615",controls:true,loop:true}})}
})1. 在微信小程序中， audio 的属性 controls 作用是：是否显示默认控件
组件_video
视频
<video src="http://iwenwiki.com/api/livable/livable.mp4"></video>为了美观，我们将视频宽度充满全屏
video{width: 100%;
}属性说明
<videoid="myVideo" src="http://iwenwiki.com/api/livable/livable.mp4"duration="100"controlsautoplayloopmutedinitial-time="10"show-mute-btntitle="制作歌曲"danmu-list="{{ danmuList }}"danmu-btnenable-danmu></video><button type="primary" bindtap="sendDanmuHandle">发送弹幕</button>// pages/audio/audio.js
Page({data: {danmuList: [{text: '第 1s 出现的弹幕',color: '#ff0000',time: 11}]},onReady() {this.videoContext = wx.createVideoContext('myVideo')},sendDanmuHandle() {this.videoContext.sendDanmu({text: "真好看",color: "#00ff00"})}
})1. 在微信小程序中， video 的属性 initial-time 作用是：指定视频初始播放位置
组件_camera
系统相机。扫码二维码功能
<camera style="width: 100%; height: 300px;"></camera>属性说明
<camera mode="normal" device-position="back" flash="on" style="width: 100%; height:
300px;"></camera>
<button type="primary" bindtap="takePhotoHandle">拍照</button>
<view>预览</view>
<image mode="widthFix" src="{{src}}"></image>
属性说明
Page({data:{src:""},takePhotoHandle() {const ctx = wx.createCameraContext()ctx.takePhoto({quality: 'high',success: (res) => {this.setData({src: res.tempImagePath})}})}
})1. 在微信小程序中， camera 的属性 mode 作用是：模式调整，扫码或相机
组件_map
地图，小程序地图实现功能相对比基础一些，如果要实现完整的地 图能力，请参考腾讯地图
温馨提示
腾讯地图：https://lbs.qq.com/product/miniapp/home/
<map latitude="23.099994" longitude="113.324520"></map>
属性说明
<maplatitude="{{latitude}}"longitude="{{longitude}}"scale="12"min-scale="10"max-scale="18"
></map>// pages/map/map.js
Page({data: {latitude: 23.099994,longitude: 113.324520,}
})1. 在微信小程序中， map 的属性 scale 作用是：缩放级别，取值范围为3-20
微信小程序框架(二)-全面详解（学习总结---从入门到深化）相关推荐
- 微信小程序框架(五)-全面详解（学习总结---从入门到深化）
目录 UI框架_TDesign 引入TDesign UI框架_TDesign组件 Rate 评分 Toast 轻提示 UI框架_Vant 使用方式 引入组件 UI框架_Vant组件 Overlay 遮 ...
- 微信小程序框架(四)-全面详解（学习总结---从入门到深化）
目录 路由_navigateTo 页面跳转 携带参数 返回上一级页面 路由_redirectTo 页面跳转 路由_reLaunch 页面跳转 路由_switchTab 实现 tabbar 页面跳转 交 ...
- 微信小程序框架(一)-全面详解（学习总结---从入门到深化）
目录 小程序与普通网页开发的区别 体验小程序 微信小程序账号申请 微信小程序开发者工具 下载安装 创建项目 开发者工具说明 小程序目录结构 描述整体的 app 描述各自页面的 page 全局配置_Pa ...
- php小程序onload,微信小程序 loading 组件实例详解
这篇文章主要介绍了微信小程序 loading 组件实例详解的相关资料,需要的朋友可以参考下 loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否 主要属性: wxml 显 ...
- 微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
- 微信小程序系列4——传值详解
前言 在开发程序过程中,会遇到各种各样的传值的情景,例如:页面之间的传值.回调.代理.通知等.而在微信小程序中,传值的方式和Android和iOS的方式有一定的异同. 微信小程序使用的数据传值方式 ...
- 微信小程序（三）详解篇
一.什么是小程序(了解) 小程序是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或者搜一下即可打开应用.也体现了"用完即走"的理念 ...
- 微信小程序上传文件详解
做微信小程序难免会遇到上传文件的问题.今天就给大家说一个简单的上传文件的例子吧 wxml代码 <button bindtap="upload">上传文件</but ...
- 微信小程序--基础内容（详解）（一）
一.常用标签 1.view 标签 view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示: <view>这是view标签< ...
最新文章
- 拦截PHP各种异常和错误，发生致命错误时进行报警，万事防患于未然
- PyQt5 技术篇-QWidget、QDialog程序窗口关闭closeEvent()触发事件方法重写
- 编译detours注意
- Google Cloud API 验证
- centos php 开启socket,CentOS 配置PHP支持socket扩展
- 3月第2周安全回顾 微软修补12个漏洞 ***盯上企业FTP
- [css] 固定的外框尺寸，里面的图片尺寸不固定，如何让图像自适应外框呢？
- Silverlight4.0教程之WebBrowser控件（Silverlight内置HTML浏览器控件）
- mysql 开发 生产_在没有表锁定的情况下在巨大的MySQL生产表...
- servlet中实现页面跳转return “r：”和return “f：
- 架构设计 | 基于电商交易流程，图解TCC事务分段提交
- iOS nav加角标
- 探讨一下常见支付系统的对外接口
- 程序员如何打破 30 岁职业瓶颈？
- SQL Server 2008R2 连接本地数据库引擎
- javascript小白学习指南3
- 搅动PC市场风云，荣耀何以成为破局者？
- Linux下为Calibre书库打中文目录名与文件名补丁
- 华为可信专业级认证是什么？
- 《算法》中的红黑树实现