微信目录集链接在此:
详细解析黑马微信小程序视频–【思维导图知识范围】 | 难度★✰✰✰✰ |
---|
不会导入/打开小程序的看这里:参考
让别人的小程序长成自己的样子-更换window上下颜色–【浅入深出系列001】 |
---|
文章目录
本系列校训
用免费公开视频,卷飞培训班哈人!打死不报班,赚钱靠狠干!
只要自己有电脑,前后项目都能搞!N年苦学无人问,一朝成名天下知!
学习资源的选择
黑马程序员微信小程序开发前端教程_零基础玩转微信小程序(130集)
https://www.bilibili.com/video/BV1nE41117BQ/
目录如下:
…
P303-微信小程序的环境准备08:21 00:00 到 05:16 获取APPid, 后面下载开发工具。
啥是wx:for
这个就是一个循环标签,感觉没法解释。
计算机比人优越的地方就是它可以循环,比如人用人脑来判断一下大致的选择,但是计算机可以用无限次循环来达到这个目的。
不过,循环里肯定要带着一些变化。比如颜色如下图1,比如 大小,如下图2
图1 颜色的变化 的循环
大小,或颜色,或形状的循环。
项目里的使用
轮播
其实,最先接触的 wx:for 就是轮播
最常见的轮播图代码
<swiper class="swiper_box" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange"
circular="circular">
<block wx:for="{{banners}}" wx:key="id">
<swiper-item>
<image bindtap="tapBanner" data-id="{{item.businessId}}" src="{{item.picUrl}}_m" class="slide-image" />
</swiper-item>
</block>
</swiper>
这是一般的小程序最常见的轮播图代码段。
用一个流程图来描述一下:
知识点复习
首先一点,如果你对小程序还是属于ABC阶段还是强列推荐看《让小程序动起来-轮播图的两种方式–【浅入深出系列003】》
swiper
具体请参见官方文档《微信官方文档. 小程序》 swiper一节
swiper
基础库 1.0.0 开始支持,低版本需做兼容处理。
微信 Windows 版:支持
微信 Mac 版:支持
渲染框架支持情况:Skyline (使用最新 Nighly 工具调试)、WebView
功能描述
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
通用属性
属性 类型 默认值 必填 说明 最低版本
indicator-dots boolean false 否 是否显示面板指示点 1.0.0
indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0
indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0
autoplay boolean false 否 是否自动切换 1.0.0
current number 0 否 当前所在滑块的 index 1.0.0
interval number 5000 否 自动切换时间间隔 1.0.0
duration number 500 否 滑动动画时长 1.0.0
circular boolean false 否 是否采用衔接滑动 1.0.0
vertical boolean false 否 滑动方向是否为纵向 1.0.0
display-multiple-items number 1 否 同时显示的滑块数量 1.9.0
easing-function string “default” 否 指定 swiper 切换缓动动画类型 2.6.5
合法值 说明
default 默认缓动函数
linear 线性动画
easeInCubic 缓入动画
easeOutCubic 缓出动画
easeInOutCubic 缓入缓出动画
bindchange eventhandle 否 current 改变时会触发 change 事件,event.detail = {current, source} 1.0.0
bindtransition eventhandle 否 swiper-item 的位置发生改变时会触发 transition 事件,event.detail = {dx: dx, dy: dy}。Skyline 仅支持非 worklet 的组件方法作为回调。 2.4.3
bindanimationfinish eventhandle 否 动画结束时会触发 animationfinish 事件,event.detail 同上。Skyline 仅支持非 worklet 的组件方法作为回调。 1.9.0
wx:for
列表渲染
wx:for
官方的帮助地址这里:https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html#block%20wx:for
在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
上面的循环对应于这样的数据:
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item 可以指定数组当前元素的变量名,
使用 wx:for-index 可以指定数组当前下标的变量名:
{{idx}}: {{itemName.message}} wx:for 也可以嵌套,下边是一个九九乘法表 {{i}} * {{j}} = {{i * j}}block wx:for
类似 block wx:if,也可以将 wx:for 用在标签上,以渲染一个包含多节点的结构块。例如:
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 input 中的输入内容,switch 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串,代表在 for 循环的 array 中 item 的某个 property,该 property
的值需要是列表中唯一的字符串或数字,且不能动态改变。 保留关键字 *this 代表在 for 循环中的 item 本身,这种表示需要
item 本身是一个唯一的字符串或者数字。 当数据改变触发渲染层重新渲染的时候,会校正带有 key
的组件,框架会确保他们被重新排序,而不是重新创建,以确保使组件保持自身的状态,并且提高列表渲染时的效率。如不提供 wx:key,会报一个 warning, 如果明确知道该列表是静态,或者不必关注其顺序,可以选择忽略。
好好分析一下官方的这个文档
wx:for 用于单纯的数组循环。一般数组的元素是数字或字符串 。
wx:for-item=‘变量名(随便起的)’ 它是指定循环数据当前的变量名,可以通过 {{变量名.属性}} 展示数组的元素。
wx:for-index=‘变量名(随便起)’,相当于给子元素起别名,如果缺省,默认值是 item,如果设置 wx:for-item=‘aName’,则可以在循环中通过 {{aName.属性名}} 来访问子元素的属性值。 如果没有这个wx:for-index,则访问的时候要像数组一样带下标。
例如,我要循环打印这个数组
那么,首先就是 wx:for=“{{GoodNumber}}” 其次,可以为变量取别名,比如说我觉得GoodNumber太长了,我可以用 wx:for-item=“Goods” 来简化它
<block wx:for="{{GoodNumber}}" wx:for-item="Goods">
<van-card num="{{ Goods.number }}" price="{{ Goods.price }}" desc="{{ Goods.desc }}" title="{{ Goods.name }}" thumb="{{ Goods.imageURL }}" />
</block>
本例的代码
页面数据
Page({
data: {
poetries: [{
name: "行路难",
snippet: "长风破浪会有时,直挂云帆济沧海"
},
{
name: "雨过山村",
snippet: "雨里鸡鸣一两家,竹溪村路板桥斜。"
},
{
name: "荆门西下",
snippet: "一夕南风一叶危,荆云回望夏云时。"
},
]
},
viewBindtap: function(e) {
var poetryIndex = e.currentTarget.dataset.poetryindex;
console.log(this.data.poetries[poetryIndex].name);
},
});
页面
<view>
<view class="label">
<text style="color:#ff0000">wx:for:用法</text>
</view>
<view class="control">
<view wx:for="{{ poetries }}" wx:for-index="poetryIndex" bindtap="viewBindtap" data-poetryIndex="{{ poetryIndex }}">
<image src="../../images/shu.jpg"></image>
<view>{{ poetries[poetryIndex].name }}</view>
<view>{{ poetries[poetryIndex].snippet }}</view>
<view style="height:2px;background-color:#ffccff"></view>
<view style="height:4px;background-color:#ffffff"></view>
</view>
</view>
</view>
效果图
这个例子可以说是最接近于项目的代码的无后端的代码了。毕竟不是每一个初学者都是有着良好的springBoot的基础。这也是为什么不推荐初学者,直接使用复杂例子的原因。看不动,一改N个错,那还怎么学习?
不得不流下伤心而又无奈的泪水。IT的程序员门槛貌似很低,但是从理解代码的角度上,从来不是各专业TOP!比啥啥电子的与非门,比啥啥信号的频域,傅立叶变换都难很多。
啥?你都没听说过? 呃,其实我也啥都没说,只说:加油,奥利给!
友情提示 可以使用资源管理器里的搜索功能,真的很好用。
其实,除了接口的部分跟PHP的有一点点不一样,前端的部分基本上就是不动的。
JSP后端PHP后端等
其实这个后端,只是一个轮播图,或者是列表的话,springboot, Jsp, PHP都差不多。
但是我还是打算写成不同的文章,
一个原因是学微信小程序的人可能只会其中一种。没有我这么全才的嘛,
另一个原因就是,这样看上去水三篇文章是不是感觉上要好很多?经验加1一下子变成了
呃,好象是如果再加上页面里的这种JS数据的,一共就可以水4篇了。经验+3 普拉思呀
这全套的活一整套下来
这不得整个大鸡腿?
配套资源
后端
小程序轮播图的两种后台方式(jsp)-jsp
https://download.csdn.net/download/dearmite/88111567
前端
小程序从轮播图到列表项(wx:for)–【浅入深出系列011】
https://download.csdn.net/download/dearmite/88211197
另外,本例中使用的鼠标指针方案是我最常用,最喜欢的方案
霓虹线条鼠标指针方案资源下载
https://download.csdn.net/download/dearmite/88211804
作业:
1 下载本文资源,将图片也用wx:for循环成不同的图片。
2 使用本例数组,将其放入案例的js中。并用页面展示出来
3 任选JSP后台,PHP后台,springBoot 后台,完成微信小程序的列表 (难度★★★★✫)