一、项目基本组成结构
二、与原来语言的区别
三、标签的不同
在小程序中行内标签需要用text，块级标签需要用view
view类似与div容器 scroll-view是滚动效果的 但是需要设置滚动的方向 scroll-x、或者是scroll-y。
轮播图效果几张图片就可以用几个swiper-item<swiper><swiper-item></swiper-item></swiper>
展示小圆点indicator-dots小圆点颜色indicator-color小圆点激活颜色 indicator-active-color
自动播放autoplay 间隔时间 interval circular 是否采用衔接滑动
四、正式进入小程序
一、数据绑定
1.{{数据值}}（可以不预先定义，不会报错，数据统一放在pages里的data中）
2.在标签内也可以使用
基础内容组件
text：文本组件类似于html中的span标签是一个行列内元素，selectable长按选中，只支持手机端操作
rich-text ：富文本组件，支持把html字符串渲染为wxml结构，nodes属性节点，可以把html字符串渲染为对应的ui结构
<rich-text nodes="<h1 style='color:red'></h1>"
button:按钮组件，可以通过open-type来调用微信提供的各个功能例如：客服转发，获取用户授权，获取用户信息等
按钮的使用
type指定按钮类型，size指定按钮尺寸，plain镂空按钮
image：图片组件 默认宽度为300px，高度为240px
image的使用同img，node使用 scaleToFill拉伸填满整个容器 aspectFit 等比例缩放图片可能不会填满 aspectFill等比例缩放超过的区域裁剪
widthFIx 宽度不变高度自适应 heightFix高度不变宽度自适应
navigator：页面导航组件，类似于html中的a标签
二、列表渲染
1.wx:for="{{数组名}}" wx-key=“index” item是对象值 index是数组的下标（固定写法）
2.wx:for-item="currentitem" wx:for-index="currentindex" 这样就可以使用currentindex和currentitem了
注：id=[1,2,3]
三、条件渲染
1.wx:if="{{}}" 2.hidden="{{}}"
<text wx:if="{{ishidden}}">我是wx:if</text>
<text wx:else>我是wx:else</text>
<text hidden="{{iscreate}}">我是hidden</text>
//ishidden:false,
//iscreate:false,
//ishidden:true,
//iscreate:true,
3.二者的区别wx：if是点击之后创建而hidden则是通过display：none
四、事件绑定
用法：bind+事件官方文档
改变数据需要用setdata
<!--index.wxml-->
<text>{{name}}</text>
<button type="primary" bindtap="showname">点我更换名字 </button>
//pages中
showname(){
this.setData({name:'张三'})
},
事件绑定：事件是渲染层到逻辑层的通讯方式，通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理
小程序常用的事件：tap手指触摸后 bindtap或者bind:tap进行绑定
input文本输入 bindinput或bind:input
change状态改变 bindchange或bind:change
事件触发，收到的事件对象event 常用 target（一些属性值的集合，触发该事件的源头组件）currentTarget(当前事件所绑定的组件) detail（额外的信息）
修改data里面的值：this.setData()接收一个对象 例如 countAdd(){this.$data({count:this.data.count+1})}
事件传参：不能在绑定数据的同时为事件处理函数传递参数，需要用data-*来自定义属性传参，*是参数的名字 例如data-info={{Hello World}}
可以通过event.target.dataset参数名就可以拿到具体参数的值 拿到文本框里面的值 e.detail.value
五、实现小程序的双向绑定
条件渲染：wx:if="{{}}" wx:elif="{{}}" wx:else不需要加条件 一次性控制多个组件的展示与隐藏可以使用一个<block></block>将多个组件包装起来
hidden="{{}}"
二者的区别：①运行方式不同，wx:if是以动态创建和移除元素的方式，控制元素的显示和隐藏，hidden：切换样式的方式display:block/none控制元素的显示与隐藏
②频繁切换的时候使用hidden
列表渲染：wx:for="{{}}" wx:for-index:来改变当前索引的变量名 wx:for-item:来改变当前数组每一项的值 wx:for-key提高渲染效率
六、api三大类
时间监听类的api：以on开头的用来监听某些事件的触发
同步api ：①以sync结尾的api都是同步api②同步的api的执行结构，可以通过函数返回值直接获取，如果执行出错会抛出异常
异步api：需要通过success，fail，complete来接受调用的结果
数据绑定①data中定义数据
②在wxml里面使用数据mustache语法主要的应用场景如下：①绑定内容通过{{}}的形式
②绑定属性 例如 img src="{{imgsrc}}"
③运算 number1:Math.random()*10 {{number1>5?:}}
七、wxss和css的区别
wxss多了rpx解决屏适配的尺寸单位 @import 引入其他的wxss
全局样式：定义在app.wxss中 局部样式：在页面.wxss中定义的样式为局部样式 如果全局和局部冲突，根据就近原则，局部会覆盖全局样式 局部权重>=全局样式局部覆盖去全局
app.json来改变全局配置文件 页面配置在每一个页面下的json进行配置
小程序的组成部分：最上面到退出部分的是导航栏区域navigationBar，下拉展示的背景区域background 页面的主体区域wxml
例如改变 navigationBar 可以去app.json中window下去改变 下拉刷新 enablePullDownRefresh：true 上拉触底（距离底部多少像素刷新下一页）：onReachBottomDistance：100px
tabBar是移动端常见的页面效果，用于实现多页面的快速切换，分为底部tabBar和顶部tabBar 最少2个，最多5个，存储在list中，顶部tabBar只显示文本不显示图标
必须包含list（数组形式，pagePath：页面路径，页面必须预先在pages中定义好，text，tab上面的文字list:[{"pagePath":,"text":},{"pagePath":,"text":},{"pagePath":,"text":}]
tabBar的配置：backgroundColor：背景色，selectIconPath选中时的图片路径，iconPath未选中图片路径borderStyle：上边框的颜色 selectedColor：旋转时文字的颜色 color：未选中的颜色
网络数据请求
为了安全性会有有一些限制:①只能请求https类型的接口，必须将接口的域名添加到信任列表中（小程序开发管理后台->开发->服务器域名->request合法域名
注意：①只支持https②域名不能使用ip地址或localhost③域名必须经过icp备案，④服务器域名一个月最多进行5次修改
发送get请求wx.request()方法 wx.request({url:,method:"GET",data,success:()=>{}}) 发送post请求 wx.request({url:,method:"POST",data,success:()=>{}})
页面刚加载就请求数据 onLoad 可以在微信开发者工具->详情->本地设置->不校验https来关闭校验HTTPs（仅限于开发和调试阶段）
关于跨域和ajax的说明 不存在跨域只有浏览器会跨域 没有ajax请求