一，第一个微信小程序

1.1 注册开发账号

去微信公众平台注册一个小程序。

小程序目录

单独的页面放单独的文件夹，如首页index 里面有css js html，json等等。

index.json可以设置首页相关的样式

json

如果你要建多个页面在app.json中直接写路径自动就会生成里面的一些基础文件,如再建一个log文件

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	缩放模式-搞度不变-宽度自动-保持原图宽高比