微信小程序

1.1 微信小程序

1.11 基本的项目目录

1. pages 页面文件夹

   1. index 首页文件夹

      文件类型	必需	作用
      js	是	页面逻辑
      wxml	是	页面结构
      json	否	页面配置
      wxss	否	页面样式表

   2. logs日志文件夹

2. utils 第三方工具 js

3. app.js 项目的全局 入口文件

4. app.json 全局配置文件

5. app.wxss 全局样式文件

6. project.config.json 项目的配置文件

7. sitemap.json 微信索引配置文件

1.12 配置文件

1.12.1 全局配置

1.12.2 页面配置

1.12.3 sitemap配置

1.13 模板语法

• 自定义属性：data-xxx="{{}}"
• 循环 wx:for"{{数组或对象}}"，wx:for-item="对象的值"，wx:for-index="对象的属性"，wx:key="唯一值"（ 提高列表渲染时的效率）
• block 不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
• 条件渲染：wx:if="{{}}"，（把标签直接从页面移除）wx:elif="{{}}"，wx:else="{{}}"，属性hidden（通过添加样式的方式来切换显示）
• bind绑定事件，输入框input事件，bindinput="事件名"，this.setData({num: e.detail.value})给data数据赋值
• 无法在小程序中直接传参，需要通过自定义属性
• calc属性,用来计算，calc()
• rpx单位

1.14 常用组件

• view标签 相当与div

• text标签 文本标签，相当与span，只能嵌套text，长按文字可以复制（属性selectable），解码（属性decode）

• image标签，默认宽度320px，高度240px，src属性：图片资源地址，属性mode决定图片内容宽高适配，lazy-load图片懒加载

• swiper轮播图

• navigator 导航组件

• rich-text 富文本标签，将字符串解析成对应标签，类似vue中v-html功能

• button 标签

• icon 标签

• radio 标签，搭配父元素radio-group使用

• checkbox 属性，搭配父元素checkbox-group使用

1.15 自定义组件

1. 创建组件
2. 声明组件 json中usingComponents中添加{"组件名":"路径"}
3. 使用组件
4. 父向子传递数据 （父组件通过属性的方式向子组件传递参数）（父组件标签中设置属性，属性值(数据)在data中设置；子组件properties中设置 属性名:{type:类型,value:"默认值"}）,页面中使用{{属性名}}）
5. 子向父传递数据 （子组件通过事件的方式向父组件传递参数）（this.triggerEvent("父组件自定义事件的名称",要传递的参数)）
6. 插槽slot

1.16 应用生命周期

属性	类型	默认值	必填	说明
onLaunch	function		否	监听小程序初始化
onShow	function		否	监听小程序启动或切前台
onHide	function		否	监听小程序切后台
onError	function		否	错误监听函数
onPageNotFound	function		否	页面不存在监听函数

1.17 页面生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	function	生命周期函数—监听页面加载
onShow	function	生命周期函数—监听页面显示
onReady	function	生命周期函数—监听页面初次渲染完成
onHide	function	生命周期函数—监听页面隐藏
onUnload	function	生命周期函数—监听页面卸载
onPullDownRefresh	function	监听用户下拉动作
onReachBottom	function	页面上拉触底事件的处理函数
onShareAppMessage	function	用户点击右上角分享
onPageScroll	function	页面滚动触发事件的处理函数
onResize	function	页面尺寸改变时触发，详见响应显示区域变化
onTabitemTap	function	当前是tab页面时，点击tab时触发