小程序特点：体积小、方便获取与传播
app.js、app.json是必须文件
开发页面（静态页面）
修改首页：app.json文件的pages列表项中的第一项是小程序的首页
text类似与span标签
属性：
selectable文本是否可以被长按选中
space 是否显示空格
decode 是否解码   < 等
view 类似div 没有外边距
属性
hover-class 指定按下去的样式类
WXSS：
具有CSS大部分特性 并且对其进行了扩充
如：尺寸单位 样式导入
小程序中属性选择器必须使用data-开头
配置app.json
1.json文件中键值对的键名必须用 双引号 扩起来
2.json文件中键值对的键值如果是字符串类型，也必须使用双引号
3.空的json文件，保留一个空的 {}，不要将其删空
4.json文件中不能加注释
pages路由说明
pages中声明的路由必须要有对应的页面存在，否则会报错
window配置项
1.导航条配置：
导航条背景色：navigationBarBackgroundColor
导航条文字内容：navigationBarTitleText
导航条文字颜色：navigationBarTextStyle
2.页面背景配置：
窗口的背景色：backgroundColor
下拉loading样式：backgroundTextStyle
是否开启下拉刷新：enablePullDownRefresh
配置上拉加载的距离：onReachBottomDistance
3.tabBar配置项
在app.json中书写tabBar配置项
list tab的列表2-5
list里面 pagePath页面路径 texttab上的文字必填
position tab的位置
页面配置文件
页面级别的配置优先于全局配置生效
生命周期与生命周期函数
1. 生命周期：事物从诞生到消亡（计算机中某个对象从创建到消亡）
应用生命周期：特指小程序从启动->运行->销毁的过程
页面生命周期：特指小程序中，每个页面的加载->渲染->销毁的过程
小程序的应用生命周期函数：
onLaunch 小程序启动 只触发一次
onShow 小程序显示
onHide 小程序隐藏 (onError 报错 onPageNotFound 当跳转到一个未知的页面)
页面的生命周期函数：
onLoad (初次加载) 只触发一次
onShow (页面显示)
onReady (页面初次渲染完成)
onHide (页面隐藏时)
onUnload (页面卸载时)
数据绑定
1. 语法：使用{{变量}}的方式
2.文本节点中使用 <text>{{info}}</text>
3.属性节点中使用（只能写在属性值的位置，不能写在属性名的位置）
<view data-id="item-{{info}}"></view>
4.使用三元表达式
<text>{{info ? 'aaa' : 'ccc'}}</text>
<text>{{info || 'abc'}}</text>
使用三元运算符要注意，上面的info变量，尽量保持它是一个简单的布尔值，不要是一个表达式，
事件绑定
1.在组件上使用`bindtap="事件处理函数名字"`方式绑定事件，
2事件传参需要注意必须使用自定义属性的方式，属性名必须使用data-开头，自定义属性在ev.target.dataset中获取。
通过ev.target.value可以拿到文本框最新的值
3.要把数据从model层更新到view层，执行 this.setData({传递的数据属性名: 属性值})，
4.自定义属性必须使用data-开头，它的作用是用来做事件传参，因为小程序不支持<text bindtap="tapHandle('aaa')">aa</text>所以使用data-text='aaa'来传递 aaa 这个数据，然后通过event.target.dataset.参数名
WXS脚本：
1.没有兼容性
2.与JavaScript不同
3.具有隔离性 （与JavaScript比较）
基础语法：
1.使用module.exports向外共享是有变量与函数
2.使用repuire引入其他wxs模块 var aa = repuire（‘相对路径’）
3.在wxml中引入wxs脚本必须以<wxs></wxs>标签添加module和src属性
条件渲染
1. 使用`wx:if wx:elif wx:else 等判断语句去决定渲染内容。符合判断条件的内容将会被渲染
2. block标签可以对一组元素进行条件判断，如果满足条件，则输出这些元素，而block标签本身并不输出
条件显示
1. hidden=“{{值}}”属性的值如果是真，则隐藏，否则显示。
如果这个判断多次执行，就使用hidden。反之条件仅执行一次，使用wx:if）
循环渲染
1. wx:for 语法
<view wx:for="{{list}}" wx:key="index">{{item}}</view>
2. key的作用标示每一项的唯一性
4. 如果数组的每一项都是字符串，而且两两不想等，那就可以使用this
开发交互
下拉刷新
1. 需要在全局配置文件中或者当前页面配置文件中开启enablePullDownRefresh: true
2. 当用户手指往下拽动页面或者执行了 wx.startPullDownRefresh()时就会触发下拉刷新
3. 在页面的js文件中，添加 onPullDownRefresh监听函数，可以在它内部开发业务逻辑
4. 当业务逻辑完成(比如说获取网络数据，setData更新大量数据时要把终止操作写在this.setData的第二个回调函数内部)后，需要终止下拉刷新，调用 wx.stopPullDownRefresh()
上拉加载
1. 配置上拉触底距离，默认时50，可以在配置文件中重置onReachBottomDistance: 100 （注意：页面内容要超过一屏幕显示滚动条，才能出发判断，滚动条距离底部的距离小于等于100触发上拉加载事件）
2. 在页面的js文件中，添加 onReachBottom，在其中添加业务逻
3.onPageScroll 监听滚动条往下滑动了多少距离
onShareAppMessage函数是
用户点击转发行为所触发的函数
也可以通过给标签添加open-type=‘share’属性
1. onShareAppMessage 的参数obj
， 监听用户在哪些按钮 哪些页面进行了分享，
1. obj.from 获取分享的来源，是右上角的小程序自带的分享还是页面中的按钮的分享
2. obj.target来区分是哪个页面的哪个按钮进行的分享
如果点击右上角转发，则他from的值是undefined， 否则是button
定制分享的界面，
通过onShareAppMessage的返回值来实现（假设返回值名字叫ret）
return一个对象里面包含一下内容
1. ret.path 定义分享出去的地址，其他人打开该页面跳转到该地址
2. ret.title 定义分享的标题
3. ret.imageUrl 定义分享图片。默认图片是截取当前屏幕下的内容。
onTabItemTap tab菜单项的点击事件，
能够拿到当前点击的菜单项的索引index 文本内容text以及它的页面路径
pagepath
路由（页面跳转）
声明式导航，注意点：1）url地址需要在app.json的pages中声明
2）url地址以 / 开头
1.导航到普通页面：<navigator url="/pages/info/info">跳转到info页面</navigator>
2.导航到tab页面：<navigator url="/pages/home/home" open-type="switchTab">跳转到home页面</navigator>
3.后退
<navigator open-type="navigateBack" delta="1">后退</navigator>
编程式导航
1.导航到普通页面 wx.navigateTo({url: '/pages/info/info'})
2.导航到tab页面 wx.switchTab({url: '/pages/home/home'})
3.后退
wx.navigateBack({delta: n})
替换（重定向）: wx.redirectTo({url: '/pages/d/index'})
重新打开app: wx.reLaunch({url: '/pages/info/info'})
路由传参
1. 只有 跳转到普通页面可以传递参数
2. 传参格式跟网页中url地址后面的参数格式完全一样，
3. 接收参数，在页面的生命周期函数onLoad的options接收
4. 增加编译模式来调试具体某个页面，注意传递的参数，字符串不要再加引号，也不要在值的前后敲多余的空格
服务器域名配置要求：
1. 协议必须是加密协议https wss
不能使用IP地址或localhost，
2. 域名必须是经过备案的域名，且新备案的域名24小时后才可以使用，
3. 端口，如果是默认的443端口可以不写，不是默认端口则需要写上
4. 一般情况下不会配置到具体路径
发起请求
1.请求API: wx.request，参数跟$.ajax的参数完全一样
2.小程序中没有跨域
自定义组件
定义组件
1. 在项目的根目录下新建一个components文件夹，专门来存放所有的自定义组件
2. 在components下新建一个test文件夹
3. 在test文件夹上右键选择 新建component 写上组件的名字
使用组件
1. 在使用组件的页面配置文件/全局配置文件中定义组件
2. 使用 usingComponents:{'组件名字': '组件路径'}，组件路径可以用相对路径也可以使用绝对路径，组件名如果是多个单词组成的，尽量采用连字符形式
3. 调用上一步定义的组件，<组件名字></组件名字>或<组件名字 />
4. 美化组件: 尽量都采用class来定义样式
动态组件（私有数据+更新数据的方法）
页面的data定义在Page（）函数中
组件的data定义在Component（）函数中
1. 在组件的js文件中data属性上定义需要用的数据(name)
2. 在组件wxml上使用上一步定义的name数据, 使用方式 {{name}}
3. 在组件wxml上定义一个触摸事件，事件处理函数名字 fn
4. 在组件js文件中 methods节点下定义 fn 函数
5. 在fn函数内部可以使用 this.setData({name: 'ls'})
页面/组件通信
组件之间的三种基本通信方式
1.wxml数据绑定，用于父向子传递指定数据，仅能设置JSON兼容数据
2.事件：用于子向父传递数据
3.父组件通过this.selectComponent方法指定id或class选择器返回子组件实例对象
父=>子通信
1. 在子组件的js中的properties上声明外界可以传递的数据，声明方式有两种
1. 使用type和value来声明，{count: {type: Number, value: 9}}
2. 使用type来声明 {count: Number}`
2. 在父页面上调用子组件时，可以传递上一步声明的数据，<custom-test class='ct' count={count}></custom-test> (**注意，如果传递给组件的属性是两个及以上单词组成的，在wxml文件使用连字符方式书写，在组件的js文件使用该数据时使用驼峰的形式**)
3. 上一步的count数据是来自父页面的js文件中定义的count变量，父页面中该变量更新时，会触发父页面的更新，会自动更新当前页面调用的组件。
4. 如果是在子组件内部更新properties数据，更新方式`this.setData({数据名字: 数据的值})`。
数据取值：
data中的数据this.data.xxx来获取，
properties中的数据this.properties.xxx。
在组件内部更新properies或者data，只会影响当前组件的更新，不会影响组件外页面的更新。
5. 子=>父通信
1. 在父页面调用子组件的时候，给他传递一个事件`<test bind:eventName="callbackFn"></test>`
2. 在父页面的js文件中定义上一步的callbackFn函数
3. 在子组件中调用`this.triggerEvent('eventName', {a: 1, b: 2, c: 3})`
4. 父页面的callbackFn函数接收第3步传递的那个数据，数据callbackFn函数的形参ev.detail属性
6. 在父子组件/页面没有发生通信（父页面没有给子组件传递数据，子组件也没有回调给父页面传递数据）时，父页面想获取一下子组件的数据，在父页面内获取子组件的实例来实现。this.selectComponent方法指定id或class选择器返回子组件实例对象
组件的生命周期
1. 生命周期函数写在Component构造函数的第一级参数中，也可以在lifetimes节点下
重要的生命周期函数
1. created 组件创建后
不能调用setData，只能给组件this添加一些自定义属性字段
2. attached 组件挂载到页面后
此时this.Dsta已经初始化完毕，绝大多数工作可以在这个函数中进行
3. detached 组件销毁
3. 组件所在的页面的生命周期函数
Component({
pageLifetimes: {
show() {},
页面被展示
hide() {},
页面被隐藏
resize() {}
页面尺寸变化 }
})
监听组件所在的页面发生的一些（显示 隐藏 页面大小变化）变化时，组件可以这种情况下做一些逻辑的处理。
// 举例：比如当前组件承担一个倒计时任务，如果此时小程序退出、页面隐藏那么倒计时任务应该停止，小程序再切入前台时倒计时任务继续。
数据监听器特性
1.数据监听器特性（监听到数据的变化，作用：可以在其中填一些业务逻辑比如向外父页面传递数据、发送一些异步数据到后台）
1. 使用方式，在组件的js文件中和data平级添加一个属性 observers，值是对象. observers: {'name, count, xxx': function(name, count, xxx){}, }监听哪些数据，就把哪些数据的名字按照顺序写在function的参数上
2. 如果监听的数据是某一类数据，Component({
observers: {
'name, count': function (name, count) {
console.log('更新后的name值: ', name)
},
// 当前userinfo下的属性发生变化时触发，如果userinfo本身发生变化也会触发
'
userinfo.**': function(userinfo) {
// 函数参数userinfo 这里是这个对象自身，不会到这一层数据。总之数据是到的上一层节点
},
'user.addr.**': function(addr) {
}
}
})
3. 这个特性是基础库2.6.1开始支持
插槽
1. 组件内声明 <slot /> 作为一个占位符，将来会被真正的内容替换
2. 页面调用上一步的组件时，给他传递子节点，这些子节点就会替代组件中slot的位置
<test>
<view>111</view><view>222</view></test>
3. 多插槽
1. 开启
Component({
options: {
multipleSlots: true
}
})
2. 定义多插槽，在组件中声明多slot节点，使用name来区分
3. 页面调用组件时，将不同的内容使用slot来表示要替换哪个插槽。slot属性的值 和 组件中slot的name相同，前者替换到后者的位置上去。
// 组件中的wxml
<slot />
<slot name='a'></slot>
<slot name='b'></slot>
页面中调用组件
<test>
<view>1111</view>
<view slot='b'>3333</view>
<view slot='a'>2222</view>
</test>
4. 注意：尽量保持组件中slot节点和页面中要替换slot节点的这些元素的顺序一致
105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
