1.全局配置
pages字段
用于描述当前小程序所有页面路径
window字段
用于定义小程序所有页面的顶部背景颜色,文字颜色定义等
tabbar字段
用于定义客户端页面底部或顶部的菜单栏
networkTimeout字段
各类网络请求的超时时间,单位均为毫秒。
2. 页面配置
3. sitemap配置
小程序根目录下的 sitemap.json 文件用于配置小程序及其页面是否允许被微信索引,文件内容为一个 JSON 对象,如果没有 sitemap.json ,则默认为所有页面都允许被索引;
4.数据绑定
每一个小程序页面都有三个文件:index.wxml、index.wxss、index.js。
在index.js中的page字段的data属性里我们可以定义变量,然后在index.wxml中进行引用。
5.wx:for循环渲染
wx:for不仅可以渲染数组,还可以渲染对象
数组渲染
wx:for="{{数组}}"
wx:for-item="循环项的名称"
wx:for-index="循环项的索引"
wx:key="唯一的值" 用来提高列表渲染的性能
对象渲染
wx:for="{{对象}}"
wx:for-item="对象的属性的值"
wx:for-index="对象的属性"
wx:key="唯一的值" 用来提高列表渲染的性能
6.条件渲染
- wx:if
和vue中的条件渲染用法一样
分别是 wx:if (v-if) 、 wx:elif (v-else-if) 、 wx:else (v-else) - hidden
- 直接在标签中添加hidden属性
- hidden="{{表达式}}"
- 根据使用场景选择
- 频繁切换显示的时候使用hidden 因为它是通过更改样式的方式来切换显示
- 不频繁的切换显示的使用使用wx:if 因为它是通过直接把标签从页面结构中移除来切换显示的
- 就相当于vue 中的v-if和v-show一样
7.事件绑定
绑定关键字是 bind
例如输入框绑定输入事件
<input type="text" bindinput="handleInput"/>
改变:
- click事件改成了tap事件
- 给index.js中page字段的data数据赋值
Page({
data:{
num:0
},
handleInput(e){
this.setData({
num:e.detail.value
})
}
})
不能像vue中直接通过this赋值:this.num=e.detail.value
获取值的方法也改为:this.data.num 相比于vue多了个data
- 不能在事件中直接传值,需要通过自定义属性的方式来传递参数,然后在事件中获取自定义属性
8.尺寸单位
rpx,可以根据屏幕宽度自适应。规定所有的屏幕宽度为750rpx。然后在根据屏幕实际宽度有多少px,换算1rpx等于多少px。
例如:iphone6的屏幕宽度为375px,共有750个物理像素,那么1rpx=0.5px=1物理像素
9.wxss选择器不支持*通配符
10.小程序标签
- view 代替 div
- text
- 文本标签
- 只能嵌套text
- 长按文字可以复制 selectable属性
- 可以对空格 回车 进行编码
- image
- 默认宽度320px,高度240px
- 常用属性:
1. lazy-load:图片懒加载,在即将进入一定范围(上下三屏)时才开始加载
2. mode:图片的裁减、缩放模式
3. show-menu-by-longpress:开启长按图片显示识别小程序码菜单
- swiper 轮播图组件
- navigator(是块级元素) 类似超链接标签
- url:要跳转的页面路径 绝对路径 相对路径
- target: 默认值self 跳转自己小程序的页面 , miniProgram其他小程序的页面
- open-type:跳转方式
- rich-text 富文本标签,类似v-html
- button
- size:按钮尺寸
- type:样式
- open-type:
1. contact:直接打开 客服对话功能 需要在微信小程序的后台配置
2. share:转发当前的小程序 到微信朋友中
3. getPhoneNumber:获取当前用户的手机号码信息
4. getUserInfo 获取当前用户的个人信息
5. launchApp:打开APP
6. openSetting:打开授权设置页
7. feedback:打开“意见反馈”页面
- radio
- 可以通过color属性修改选中颜色
- 绑定事件需要结合radio-group使用
- checkbox
11.自定义组件
- 父组件向子组件传递数据
- 在父组件使用子组件时绑定数据
- 在组件的js文件中定义绑定数据的数据类型和值
- 在父组件使用子组件时绑定数据
- 子组件向父组件传递数据
- this.triggerEvent(“父组件事件”,要传递的参数);
- 在父组件中为子组件绑定事件:
- slot插槽
12.应用生命周期
- onLaunch:应用第一次启动就会触发的事件
- onShow: 当应用被用户看到时(切手机页面如何再回来)
- onHide:当应用被隐藏时(切手机页面)
- onError:应用代码发生报错了就会触发
- onPageNotFound:应用第一次启动的时候,找不到第一个入口页面的时候就会触发
13.页面生命周期
- data:页面的初始数据
- onLoad:监听页面加载
- onShow:监听页面显示
- onReady:监听页面初次渲染完成
- onHide:监听页面隐藏
- onUnload:监听页面卸载
- onPullDownRefresh:监听用户下拉动作
- onReachBottom:页面上啦触底事件的处理函数
- onShareAppMessage:用户点击右上角转发
- onPageScroll:页面滚动触发事件的处理函数
- onResize:页面尺寸改变时触发
- onTabItemTap:当前是tab页时,点击tab时触发