【黑马程序员前端微信小程序开发教程,微信小程序从基础到发布全流程_企业级商城实战(含uni-app项目多端部署)】 https://www.bilibili.com/video/BV1834y1676P/?p=9&share_source=copy_web&vd_source=03c1dc52eeb3747825ecad0412c18ab1
这个系列是用来放代码的,方便
这个是盒子里装四个小块ABCD的效果
<!-- wxml -->
<view class="container1 contain">
<view>A</view>
<view>B</view>
<view>C</view>
<view>D</view>
</view>
/* wxss */
.contain{
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.contain view{
height: 100px;
width: 100px;
text-align: center;
line-height: 100px;
margin: 10px;
}
.contain view:nth-child(1){
background-color: burlywood;
}
.contain view:nth-child(2){
background-color: rgb(135, 158, 222);
}
.contain view:nth-child(3){
background-color: rgb(135, 222, 135);
}
.contain view:nth-child(4){
background-color: rgb(219, 57, 57);
}
注意:
scroll-y 竖向滚动,使用竖向滚动时需要给scroll-view 固定高度
scroll-x 横向滚动
这是一个竖向滚动的效果
<!-- wxml -->
<scroll-view class="container2 contain" scroll-y="true" >
<view>A</view>
<view>B</view>
<view>C</view>
<view>D</view>
</scroll-view>
/*前面应该有view那部分的wxss代码*/
.container2{
height: 120px;
border: 1px solid black;
width: 120px;
}
这是个轮播图效果
<!-- wxml -->
<!-- 轮播图 -->
<!-- 有几个swiper_item就有几个内容组成 -->
<swiper class="swiper-container"
indicator-dots="true"
indicator-color="white"
autoplay="true"
indicator-active-color="gray"
circular="true"
>
<!-- 第一项 -->
<swiper-item>
<view class="item">
A
</view>
</swiper-item>
<!-- 第二项 -->
<swiper-item>
<view class="item">
B
</view>
</swiper-item>
<!-- 第三项 -->
<swiper-item>
<view class="item">
C
</view>
</swiper-item>
</swiper>
/*wxss*/
.swiper-container{
/*轮播图容器的高度 */
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: lightblue;
}
swiper-item:nth-child(2) .item{
background-color: lightgreen;
}
swiper-item:nth-child(3) .item{
background-color: lightyellow;
}
一些常用的属性
文本组件
类似于 HTML 中的 span 标签,是一个行内元素
长按选中文本内容的效果 ,使用 user-select
富文本组件
支持把 HTML 字符串渲染为 WXML 结构
按钮组件
功能比 HTML 中的 button 按钮丰富
type、size、plain、disabled、loading….
通过 open-type 属性可以调用微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等)
图片组件
image 组件默认宽度约 300px、高度约 240px
src 图片资源地址
mode 图片裁剪、缩放的模式 默认scaleToFill
空图片也会显示,虽然空白,但是占位置
这个图片的地址,第一个斜杠是表示根目录下,/images/,就是指根目录下的文件夹images中的东西
一些mode属性
scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。
widthFix 宽度不变,高度自动变化,保持原图宽高比不变
heightFix 高度不变,宽度自动变化,保持原图宽高比不变
还有按位置缩放的,top,left等等
/* wxss */
image{
border: solid 1px slateblue;
}
小程序中的 API 是由宿主环境提供的,通过这些丰富的小程序 API,开发者可以方便的调用微信提供的能力,
例如:获取用户信息、本地存储、支付功能等
事件监听 API
特点:以 on 开头,用来监听某些事件的触发
举例:wx.onWindowResize(function callback) 监听窗口尺寸变化的事件
同步 API
特点1:以 Sync 结尾的 API 都是同步 API
特点2:同步 API 的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
举例:wx.setStorageSync('key', 'value') 向本地存储中写入内容
异步 API
特点:类似于 jQuery 中的 $.ajax(options) 函数,需要通过 success、fail、complete 接收调用的结果
举例:wx.request() 发起网络数据请求,通过 success 回调函数接收数据
手机扫一扫
移动阅读更方便
你可能感兴趣的文章