一，第一个微信小程序
1.1 注册开发账号
去微信公众平台注册一个小程序。
小程序目录
单独的页面放单独的文件夹，如首页index 里面有css js html，json等等 。
- index.json可以设置首页相关的样式
json
如果你要建多个页面在app.json中直接写路径自动就会生成里面的一些基础文件,如再建一个log文件
image.png
image.png
1.2wxml和html的对比
标签名称不同
| wxml | html | 表达 |
|---|---|---|
| view | div | 盒子 |
| text | span | 行内 |
| image | img | 图片 |
| navigator | a | 链接 |
属性节点不同
| wxml | html |
|---|---|
| <navigator url="地址"> | <a href="地址"> |
| text | span |
| image | img |
| navigator | a |
1.3wxss 和 css 对比
1.wxss新增一个rpx的尺寸单位 (不同屏幕大小自动进行换算)
2.全局样式和局部样式
3.支持部分css选择器
- .class和#id
- element
- 并集和后代选择器
- ::after和::before等伪类选择器
二,组件
2.1scroll-view滚动视图
<scroll-view>里面有scroll-y属性是垂直滚动
<scroll-view scroll-y>
<view>2</view>
<view>3</view>
<view>4</view>
</scroll-view>
2.2轮播图
<swiper>
<!-- 第1项 -->
<swiper-item>
<view>A</view>
</swiper-item>
<!-- 第2项 -->
<swiper-item>
<view>B</view>
</swiper-item>
</swiper>
轮播图小圆点属性 :indicator-dots
| 常用属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 显示指示板原点 |
| indicator-color | color | rgba(0,0,0 3) | 指示点颜色 |
| indicator-active-color | color | #000000 | 当前选中原点的颜色 |
| autoplay | Boolean | false | 是否自动切换 |
| interval | Number | 5000(毫秒) | 自动切换间隔时间 |
| circular | Number | 5000(毫秒) | 是否采用衔接滑动 |
2.1常用的基础组件
- 手机号长按选中
<text selectable>15049250234</text> - html转化为文本 （富文本） 商品详情
<rich-text nodes="<h1>裤子</h1>"/></rich-text>
2.2其他组件
1按钮组件
<button>按钮</button>
属性通过type="primary" size="尺寸" plain镂空按钮
2 图片组件
image的mode属性 指定图片的剪裁
| mode值 | 说明 |
|---|---|
| scaleToFill | 缩放模式-默认值-铺满 |
| aspectFit | 缩放模式-保持纵横比-长边完全显示 |
| aspectFill | 缩放模式-保持纵横比-短边完全显示 |
| widthFix | 缩放模式-宽度不变-高度自动-保持原图宽高比 |
| heightFix | 缩放模式-搞度不变-宽度自动-保持原图宽高比 |
