微信小程序开发基础组件

话不多说直接开干

1. 从微信公众平台下载微信开发者工具
2. 把cloudfunctions文件夹里面的文件删除完，把miniprogram文件夹里面的images文件夹里的图片删除完，把pages文件夹里的文件删除完，点开miniprogram的文件夹下面的app.json文件，将里面的pages数组删完。因为那些都是我们创建这个项目时自带的东西，我们把它们删除了就可以开始写我们的东西了。
3. pages文件夹就是放的我们的页面，每个页面由一个文件夹组成，点开app.json文件夹，在pages数组里面写"pages/demo1/demo1"就可以创建一个新的页面了
4. app.json文件夹(全局配置)里面的window：里面的配置项：
5. view可以当做html的div来用 其实很简单 怎么写html页面就怎么写小程序页面就行啦

wxss的引用： @import "相对路径"

1. text

<view>
	<text>1</text>
	<text>2</text>
	<text>3</text>
</view>
//放在组件中就是行内元素
	<text>1</text>
	<text>2</text>
	<text>3</text>
//不放在组件中就是块级元素
//这个也是今天才发现有改动的

2. button 按钮

<button>普通按钮</button>
//属性：type="default" 白色按钮
//type="primary" 黑色的按钮
//type="warn"  红色的按钮
//有点像 bootstrap
//size="default"默认按钮大小
//size="mini"变小的按钮
//按钮在小程序中不好管控
//loading="true"定义了一个加在效果
//plain="true"镂空按钮
//disabled="true"取值为true 设置为按钮不可用

3. input

//我直接写有哪些组件了
//小程序里面没有单标签，必须要闭合，不然会报错
<input type="text" value=""></input>
value:输入框初始内容
type:text是文本输入框、number会自动弹出数字键盘、idcard是身份证输入键盘、digit是带小数点的数字键盘
password设置为密码类型
placeholder、placeholder-style=“red” 可以直接改placeholder的样式
placeholder-class可以更改占位符的很多个样式（直接在wxss里面写样式 class相当于css的class）*注意权值问题*
disable 禁用
maxlength="10"设置最大长度

4.picker

//picker是从底部弹起的滚动选择器
<picker range="{{arr}}" value="{{index}}" mode="selector">
	<button>点击<button>
</picker>
//value就是从下标为几开始初始值选中 默认为0
//mode默认值selector普通选择器
//mode的multiSelector多列选择器
//只有这上面两个需要绑定value
//mode=“time”的时候是时间选择器、region是省市区的选择器
(
	在js中data：{
		array:["陈小玲玲"，"大镁铝"],
		index:0
	}
)

5. video

//小程序中的视频和音频 和 网页中的不太一样
<video src="相对路径（可以放在images里面）" duration="100"></video>
属性：
duration 指定视频时长(s) 这个时间其实是假的 我们必须获取这个视频的时间，然后来放在这里
controls 显示默认的播放控件，默认就是直接显示的（在网页里面可没有哦）
autoplay=“true” 自动播放
loop="true" 循环播放
muted="true" 静音播放
danmu-list="{{danmulist}}" enable-danmu="true"(初始化弹幕) 弹幕列表 需要用内容进行绑定 danmulist:[{text:第一条弹幕,color:颜色,time:弹幕出现的时间},{第二条弹幕}](array[object])
danmu-btn="true" 弹幕按钮

6.audio

<audio src=""></audio>
controls="true" 默认的播放控件  音频必须加 不然就看不见播放的控件了
loop=“true” 设置循环播放
name="" 音频名称
author="作者" 
poster=“”默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效

7. swiper 轮播组价

<swiper>
	<swiper-item>
		<image src=""></image>
	</swiper-item>
	<swiper-item>
		<image src=""></image>
	</swiper-item>
	<swiper-item>
		<image src=""></image>
	</swiper-item>
</swiper>
indicator-dots="true"
indicator-color="blue" 轮播图小点点颜色
indicator-active-color="blue" 选中图片的小点点
autoplay="true"自动切换
current  初始加载时，指示点所在的位置 number类型 0,1,2，...
circular="true" 自动衔接
interval 设置自动切换的时间间隔 ms
duration 切换时间 也是ms
vertical=“true” 改为纵向的轮播图
previous-margin="100rpx" 漏出前一张图片的一部分
next-margin  漏出后一张图片的一部分