微信小程序--基础内容(详解)(一)
一、常用标签
1、view 标签
view 标签是一个块级元素,类似于 div(小程序里面没有div标签),里面可以放任何内容或者插值表达式,如下所示:
<view>这是view标签<view>
<view>{{num}}</view>
2、text 标签
text 标签是一个文本标签,行内标签,类似于 span 标签(小程序没有span标签),Tips:可以添加selectable 属性,长按选中,仅 text 标签支持,如下:
<text selectable>这是一段优美的文字</text>
3、scroll-view 标签
scroll-view 标签表示滚动,scroll-x 是水平方向滚动,scroll-y 是垂直方向滚动。
水平方向滚动:
<scroll-view scroll-x class="scroll">你是小可爱你是小可爱你是小可爱你是小可爱
你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱
你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱</scroll-view>
垂直方向滚动:
<scroll-view scroll-y class="scroll">你是小可爱你是小可爱你是小可爱你是小可爱
你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱
你是小可爱你是小可爱你是小可爱你是小可爱你是小可爱</scroll-view>
Tips:wxss 样式书写:
.scroll{width: 200rpx;height: 200rpx;/* 水平方向滚动时,需加上以下一行代码 *//* white-space: nowrap; */
}
4、swiper 标签
swiper 标签是轮播图效果,swiper 标签包裹 swiper-item 标签,该标签身上的属性有以下几种:
indicator-dots 小圆点
indicator-color=“black” 未激活小圆点的颜色
indicator-active-color=“white” 已激活小圆点的颜色
autoplay 自动切换
interval=“3000” 切换时间(3000毫秒)
circular 衔接滑动
5、button 标签
button 标签是按钮标签,button 身上有以下几种属性:
type 属性修改按钮类型,有 primary、warn、default
size 属性可以设置按钮的大小,有 mini
plain 镂空效果,无背景色,有边框
实例:
<button type="default">default按钮</button>
<button type="primary">primary按钮</button>
<button type="warn">warn按钮</button>
<button size="mini">小按钮</button>
<button plain>镂空按钮</button>
6、image 标签
image 标签用来引入图片,可添加 mode 属性,可选值:aspectFit(保持纵横比)
aspectFill(填充,等比例放大)
widthFix(宽不变,高度自适应)
heightFix(高不变,宽度自适应)
<image src="/images/01.png" mode="aspectFill"></image>
7、rich-text 标签
rich-text 标签内部可以嵌套 html 标签,如下所示:
<rich-text nodes="<h1>一级标题</h1>"></rich-text>
其余可参考官方文档:微信官方文档
二、数据绑定
Mustache 语法 {{ }},又叫插值表达式,用来动态绑定数据。
1、简单绑定
<view> {{ message }} </view>
Page({data: {message: 'Hello!'}
})
2、事件绑定
(1)bindtap
手指触摸后离开触发事件,类似于 click 点击事件。
<view>点击按钮数字 + 1:{{num}}</view>
<!-- 点击事件绑定 -->
<button type="default" bindtap="addNum" data-val="{{10}}">+1</button>
Page({data: {num:0,},addNum(){this.setData({num: this.data.num += 1})}
})
Tips: 微信小程序的 js 文件中,获取数据使用 this.data.xxx
修改数据,给数据赋新值必须在 this.setData({ }) 内部书写
bindtap 可传递参数,
传参:data-名称= {{}}
接收参数:event.target.dataset.名称
<button type="default" bindtap="getNum" data-val="{{10}}">+1</button>
可以打印出 10
getNum(e){console.log(e.target.dataset.val),},
(2)bindinput
文本框输入时触发事件,可以实现数据双向绑定,在小程序内部,没有 v-model 语法糖,可以使用 value 属性和 input 事件实现双向绑定。
<input type="text" value="{{txtVal}}" bindinput="addTxt"/>
<view>{{txtVal}}</view>
Page({data: {txtVal: '默认值'},addTxt(e){this.setData({txtVal: e.detail.value})}
})
三、条件渲染
条件渲染相当于 html 里面的 if 语句,在小程序里是这样:
wx:if 还有与之配套的wx:elif 和 wx:else
1、单条件渲染
wx:if 和 wx:else 可以实现显示与隐藏效果:
<button type="primary" wx:if="{{!isCollect}}" bindtap="changeIsCollect">收藏</button>
<button type="warn" wx:else bindtap="changeIsCollect">取消收藏</button>
Page({data: {isCollect: false},changeIsCollect(){this.setData({isCollect: !this.data.isCollect})}
})
默认显示收藏按钮
点击之后,显示取消收藏按钮
hidden 可实现相同效果,具体如下:
<button type="primary" bindtap="hidden">显示与隐藏</button>
<button hidden="{{hiddenName}}">测试hidden隐藏效果</button>
Page({data: {hiddenName:false,},hidden(){this.setData({hiddenName: !this.data.hiddenName})}
})
2、多条件渲染
<view wx:if="{{myValue==='a'}}">张三</view>
<view wx:elif="{{myValue==='b'}}">李四</view>
<view wx:elif="{{myValue==='c'}}">王二</view>
<view wx:else>麻子</view>
Page({data: {myValue: 'b',},
因为当前设置的 myvalue 值是 ‘b’ ,所以显示的是李四
四、列表循环
语法:wx:for 一般搭配 wx:key , key 值一般设置为 id ,如果没有 id ,可设置 index 索引,key 值不设置会有警告 。item 项就是内容,数组和 item 项一般都用Mustache语法{{ }}包裹,可以动态渲染。
1、简单遍历数组
<!-- 列表循环,循环数组 -->
<view wx:for="{{arr1}}" wx:key="index">内容是:{{item}}</view>
Page({data: {arr1: [10,20,30]}
})
2、遍历二维数组
<!-- 二维数组 -->
<view wx:for="{{arr2}}" wx:key="id">{{item.name}}今年{{item.age}}岁了</view>
Page({data: {arr2: [{id: 1, name: '欧阳', age: 21},{id: 2, name: '上官', age: 22},{id: 3, name: '司徒', age: 23}],}
})
3、多维数组遍历方式
多维数组渲染的时候,给内部数组加了一个 wx:for-item=“student” , 只是为了增强可读性,加不加都可以,如果不加,可以直接渲染 {{ item }} 即可。
<view wx:for="{{arr3}}" wx:key="id">
{{item.className}}班的学生有:
<text wx:for="{{item.students}}" wx:key="index" wx:for-item="student">{{student}}</text>
</view>
Page({data: {arr3: [{id: 1,className: '一班',students: ['小花,小草,小林']},{id: 2,className: '二班',students: ['叶子,木子,虎子']},{id: 3,className: '三班',students: ['洋洋,姗姗,盈盈']}]}
})
4、修改数据
修改对象或者数组中的属性:
修改对象数据 [ ’ 对象名 .键名 ’ ]
修改数组数据 [ ’ 数组名[索引] . 键名 ']
<!-- 修改数据 -->
<view>{{obj1.name}}已经{{obj1.age}}岁了,工作是: {{obj1.job}}</view>
<button bindtap="changeData">点击修改数据</button>
Page({data: {arr2: [{id: 1, name: '欧阳', age: 21},{id: 2, name: '上官', age: 22}],obj1: {name: '张三',age: 20,job: 'web开发'}},changeData(){this.setData({// 每点击一次,让张三的年龄 + 1['obj1.age']: this.data.obj1.age + 1,// 把数组2中欧阳的姓名改成南宫['arr2[0].name']: '南宫'})},
})
点击按钮之前:
点击按钮之后:
时间有限,这些是微信小程序基础入门,后期还会继续更新~~
微信小程序--基础内容(详解)(一)相关推荐
- 微信小程序详解 php,微信小程序列表开发详解
本文主要和大家分享微信小程序列表开发详解,主要以代码的形式和大家分享,希望能帮助到大家. 一.知识点 (一).列表渲染 wx:for tip:wx:for="array"可以等于参 ...
- php小程序地图处理,微信小程序 地图map详解及简单实例
微信小程序 地图map 微信小程序map 地图属性名类型默认值说明longitudeNumber中心经度 latitudeNumber中心纬度 scaleNumber1缩放级别 markersArra ...
- 小程序向Java传值,微信小程序 页面传值详解
微信小程序 页面传值详解 一. 跨页面传值. 1 . 用 navigator标签传值或 wx.navigator, 比如 这里将good_id=16 参数传入detail页面, 然后detail页面的 ...
- 微信小程序底部菜单详解
微信小程序底部菜单详解 只需要在app.json里面修改配置,即可 {"pages":["pages/index/index","pages/logs ...
- php 微信小程序 循环 多选,微信小程序 for 循环详解
1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wx ...
- 微信小程序——短链接详解
微信小程序短链接 今天看到朋友分享的一个链接,点开后可以直接打开学校疫情防控小程序的结果,简单了解发现这是微信推出的小程序短链接功能,可以快速分享微信小程序的内容.其具体格式有如下两种: mp://( ...
- 【迷宫】地下迷宫游戏-微信小程序开发流程详解
可曾记得,小时候上学路边买的透明铅笔盒,里面内嵌了一个小球,它用重力可从起点滚动到终点,对小朋友来说是感觉有趣的,在这个游戏的基础上,弄一款微信小程序的迷宫探索游戏试试,在不同关卡的迷宫中解开机关与谜 ...
- 微信小程序退款功能(详解完整)
微信小程序支付->退款 微信小程序退款的时候如果是线上,就会涉及到Linux读取打包后项目存放文件路径失败问题,获取不到其中的微信退款证书,在这里就需要使用流的方式进行读取路径,经大佬指点才最终 ...
- 微信小程序中 setData 详解
虽互不曾谋面,但希望能和您成为笔尖下的朋友 以读书,技术,生活为主,偶尔撒点鸡汤 不作,不敷衍,意在真诚吐露,用心分享 点击左上方,可关注本刊 标星公众号(ID:itclanCoder) 如果不知道如 ...
最新文章
- Linux服务器网络故障诊断
- 【笔记】windows10安装linux(ubuntu)双系统教程(可能是现今最简单方法)
- flask-mail异步发送邮件_.NET Core使用FluentEmail发送邮件
- JAVA Swing——设置JButton按钮样式
- 慎用SELECT INTO复制表
- 学习笔记——作业的知识点与注意事项
- __strong、__weak 与 __unsafe_unretained区别
- 哪些计算机的应用需采用多媒体技术,计算机多媒体技术的应用现状与发展前景...
- 【问题11】Redis分布式锁-SETNX实现
- android设置动画循环播放,Android动画之AnimatorSet如何循环执行
- 2022-2028全球针织捆包网行业调研及趋势分析报告
- 记录mysql中如何统计日周月季度年
- Django应用与分布式路由
- 【媒体聚焦】“我们为什么要为景安点赞”——记景安网络十四年峥嵘岁月
- 自家电脑架设网站服务器方法
- 张赐荣 | 浅谈 UIAutomation 自动化技术在读屏软件中的应用
- 本地通过配置代理访问远端服务器
- 头歌平台-人工智能导论实验(盲目搜索算法)
- 求最大值最小值c语言指针,用C语言指针如何求最大值最小值
- wf工作流java_WF Workflow 状态机工作流 开发
热门文章
- [数理知识]统计决策理论——贝叶斯决策与两类错误率
- mysql中的resultt框没有了_mysql中的zentao.zt_config表格消失了
- 学习笔记5--高精地图技术
- 如何用python批量识别图片上的文字(一)
- 【Unity精灵】2D精灵图片替换常见的问题
- 旧笔记本装linux系统
- excel取消密码_Excel的各种加密技巧,让你的数据更安全
- 行业洞察|如何更好地建设数据中台?IT和业务要“齐步走”
- HDU 5514 Frogs
- mac系统清理优化软件iMacCleaner Mac中文版