微信小程序基础

微信小程序的项目的目录结构

pages:

wxml: 编写小程序界面结构的地方

wxss: 编写小程序样式的地方

json：编写界面配置的地方

js：编写界面逻辑的地方

utils: 编写工具类的地方

app.js：创建程序实例的位置

app.json: 编写全局配置地方

app.wxss: 编写全局样式的地方

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

sitemap.json：配置哪些网站可以被检索到

如何配置tabbar

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",      路径

      "text": "首页",     名字

      "iconPath": "assets/icons/index.png",    未选中时候的图标

      "selectedIconPath": "assets/icons/index-active.png"    选中时候的图标

    }]

  },

注意：tabbar最少要有2个，最多有5个

微信小程序的语法

view标签：相当于Html中的div

text标签：相当于Html中的span

image标签：相当于我们Html中的img

rich-text标签：可以解析富文本，需要搭配nodes

引用数据通过{{}}的方式可以引用数据

逻辑渲染

wx:if="{{condition}}"来判断是否需要渲染该代码块

可以搭配wx:else if 和 wx:else 使用，wx:else if 可以简写成wx:elif

处理wx:if以为还可以通过hidden来隐藏显示，false是显示，true是隐藏

列表渲染

wx:for控制属性绑定一个数组默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名

wx:key是用来指定列表中项目的唯一的标识符

wx:key 的值以两种形式

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变

保留关键字 this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字

Template

可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

Import

可以在该文件中使用目标文件定义的 template

在 item.wxml 中定义了一个叫 item的 template

include

include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

微信小程序的wxss样式

尺寸单位

在WXSS中，引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单

在小程序中，规定所有手机的屏幕宽度都是750rpx，所以在不同尺寸的屏幕下1rpx的宽度都不同。

1rpx = （屏幕宽度/750）px

在iphone6手机下，屏幕宽度是375px，所以1rpx=0.5px

微信小程序的生命周期

onLoad：生命周期函数--监听页面加载，触发时机早于onShow和onReady

onReady：生命周期函数--监听页面初次渲染完成

onShow：生命周期函数--监听页面显示，触发事件早于onReady

onHide：生命周期函数--监听页面隐藏

onUnload：生命周期函数--监听页面卸载

onPullDownRefresh 下拉刷新

监听用户下拉刷新事件，需要在app.json的window选项中或页面配置page.json中设置enablePullDownRefresh为true。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新

onReachBottom 上拉触底

监听用户上拉触底事件。可以在app.json的window选项中或页面配置page.json中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次

onPageScroll 页面滚动

监听用户滑动页面事件，参数为 Object，包含 scrollTop 字段，表示页面在垂直方向已滚动的距离（单位px）

onShareAppMessage 用户转发

只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮，在用户点击转发按钮的时候会调用，此事件需要return一个Object，包含title和path两个字段，用于自定义转发内容

微信小程序的事件

事件定义

在小程序中绑定事件可以以bind开头然后跟上事件的类型

touchstart    手指触摸动作开始

touchmove    手指触摸后移动

touchcancel    手指触摸动作被打断，如来电提醒，弹窗

touchend    手指触摸动作结束

tap    手指触摸后马上离开

longpress    手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发

longtap    手指触摸后，超过350ms再离开（推荐使用longpress事件代替）

transitionend    会在 WXSS transition 或 wx.createAnimation 动画结束后触发

animationstart    会在一个 WXSS animation 动画开始时触发

animationiteration    会在一个 WXSS animation 一次迭代结束时触发

animationend    会在一个 WXSS animation 动画完成时触发

阻止事件冒泡

    在小程序中除了通过bind之外，还可以通过catch进行事件绑定，通过catch绑定的事件不会触发事件冒泡

事件捕获

    事件的触发分为两个阶段，首先是捕获阶段，其次是冒泡阶段。默认情况下事件都是在冒泡阶段触发。如果希望事件可以在捕获阶段触发，可以通过capture-bind进行事件绑定

事件传参

    在小程序中进行事件传参不能像传统的Web项目中一样，在括号里写参数。在小程序中需要在标签上通过data-方式定义事件所需的参数

type    事件类型

timeStamp    页面打开到触发事件所经过的毫秒数

target    触发事件的组件的一些属性值集合

currentTarget    当前组件的一些属性值集合

detail    额外的信息

touches    触摸事件，当前停留在屏幕中的触摸点信息的数组

changedTouches    触摸事件，当前变化的触摸点信息的数组