wtml
<!--
1、 长按文字复制
2、对文本内容进行解码
-->
<text user-select="true" decode>pages/demo5/demo5.wxml
123;
</text>
image
!-- 图片标签image
1、src 指定要加载图片的路径
图片存在默认的宽度和高度 320*240
2、mode 决定 图片内容 如何 和 图片标签 做适配
scaleToFill 默认值 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素
aspectFit 缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。
页面轮播图 常用
其余可看微信官方文档
3、小程序当中大的图片 直接就支持 懒加载 lazy-load
lazy-load 会自己判断 当图片 出现在 视口 上下三屏高度之内的时候 自己开始加载
-->
<image mode="aspectFit" lazy-load src="https://img0.baidu.com/it/u=374248271,322086601&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=334"
/>
自动轮播图
wxml
!--
1、轮播图外层容器 swiper
2、每一个轮播项 swiper—item
3、swiper标签存在 默认样式
1、width 100%
2、height 150px image存在默认宽度和高度 320*240
3、swiper无法实现内容撑开
4、先找出来 原图的宽度和高度 等比例 给swiper定宽度和高度
原图的宽度和高度是 351*468
swiper 宽度/swiper 高度=原图的宽/原图的高度
swiper 高度 =swiper 宽度*原图的高度 / 原图的宽度
height:750rpx*468/351 //100vw
5、自动轮番 autopaly 自动轮播
6、interval 修改轮播修改的时间
7、衔接循环轮播
8、indicator-dots 显示 指示器 分页器 索引器
-->
<swiper autoplay="true" interval="2000" circular="true" indicator-dots="true" >
<swiper-item>
<image mode="widthFix" src="https://img.alicdn.com/imgextra/i2/1782660161/O1CN01LzId9S1D3mU7sSjgR_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="https://img.alicdn.com/imgextra/i1/119701626/O1CN01bxJQXM1NskihZx8oy_!!0-saturn_solar.jpg_468x468q75.jpg_.webp"/>
</swiper-item>
<swiper-item>
<image mode="widthFix" src="https://img.alicdn.com/imgextra/i3/1880990057/O1CN013NGiEQ1CI9IAat1Ne_!!0-saturn_solar.jpg_468x468q75.jpg_.webp" />
</swiper-item>
</swiper>
wxss
swiper{
width:100%;
height:100vw*468/351;
}
image{
width:100%;
}
导航栏
<!-- 导航组件 navigator
0 块级元素 默认会换行 可以直接加宽度和高度
1、url要跳转的路径 相对路径 绝对路径
2、target 要跳转到当前的小程序 还是其他的小程序的页面
self 默认自己的小程序的页面
miniProgram 其他的小程序的页面
3、open-type 跳转的方式
navigate 默认值 保留当前页面,跳转到应用内的某个页面,但是不能跳转到 tabbar页面
redirect 关闭当前页面,跳转到应用内的某个页面,但是不允许跳转到tabbar页面
switch 跳转到tabBar页面,并关闭其他所有非tabBar页面
reLaunch 关闭所有页面,打开应用内的某个页面
-->
<!-- //有返回按钮 -->
<navigator url="/pages/demo1/demo1">轮播页面</navigator>
<!-- /没反应 -->
<navigator url="/pages/index/index">直接跳转到tabbr页面</navigator>
<!-- //没有返回按钮 -->
<navigator open-type="redirect" url="/pages/demo1/demo1">小车神</navigator>
<!-- 跳转到tabBar页面 -->
<navigator open-type="switchTab" url="/pages/index/index">直接跳转到tabBar页面</navigator>
<!-- 可以随便跳转 -->
<navigator open-type="reLaunch" url="/pages/index/index">可以随便跳转</navigator>
按钮
<!-- button标签
1、外观属性
size:控制按钮的大小
default:默认大小
mini:小尺寸
2、type:用来控制页面颜色的
default:灰色
primary:绿色
warn:红色
3、plain:按钮是否镂空
4、名称前是否带loading图标
-->
<button>默认按钮</button>
<button size="mini">mini 默认按钮</button>
<button type="primary">绿色 默认按钮</button>
<button type="warn">红色 默认按钮</button>
<button type="warn" plain>plain红色 默认按钮</button>
<button type="primary" loading> loading绿色 默认按钮</button>
显示
button的开放能力
<!-- button的开放能力
open-type:
1、
contact 打开客服会话,如果用户在会话中点击消息卡片后返回小程序,可以从 bindcontact 回调中获得具体信息,具体说明 (小程序插件中不能使用)
share 触发用户转发,到微信朋友中,不能把小程序分享到朋友圈
getPhoneNumber 获取用户手机号,结合一个事件来使用 不是企业的小程序账号 没有权限来获取用户的手机号码 可以从bindgetphonenumber回调中获取到用户信息,具体说明 (小程序插件中不能使用)
1、绑定一个事件 bindgetphonenumber
2、在事件的回调函数中获取参数信息
3、获取到的信息已经加密过了
需要用户自己搭建小程序的后台服务器中进行解析 手机号码,返回到小程序中 就可以看到信息了
getUserInfo 获取用户信息,可以从bindgetuserinfo回调中获取到用户信息 (小程序插件中不能使用)
使用方法:
1、类似于用户的手机号码
2、可以直接 获取 不存在加密的字段
launchApp 打开APP,可以通过app-parameter属性设定向APP传的参数具体说明
1、需要现在app中 通过某个连接打开小程序
2、在小程序 中 在通过这个功能重新打开一个app
3、找到京东的app和京东的小程序
openSetting 打开小程序内置的 授权设置页
1、授权页面中只会出现用户曾经点击过的 权限
feedback 打开“意见反馈”页面,用户可提交反馈内容并上传日志,开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容
1、只能通过真机调试来打开
-->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>