微信小程序学习笔记（1）

1.小程序代码结构

当开发者新建一个工程时，项目文件包括下图所示的各部分：

1. pages文件夹
   该文件夹是页面文件的所在，小程序中的一个页面对应一个文件夹。
   
   上图所示，起初该文件夹下有index和logs两个文件夹即对应两个页面（要为自己的小程序加页面就自己继续添加文件夹，然后写下面的四种文件）。

   接着：
   
   这两个页面文件夹又包含四种文件
   四种文件格式：

   1. .wxml文件：用于构建页面的结构；
   2. .wxss文件：用于设置页面的样式；
   3. .js文件：用于设置当前页面的逻辑代码和用户交互；
   4. .json文件：用于重新设置app.json中window自定义的内容，新设置的选项只会显示在当前页面上，不会影响其他页面。

2. utils文件夹
   这个文件夹里面放着utils.js文件，是工具类文件。后续用到再说，这里就暂时先了解一下。
   

3. app.js、app.json、app.wxss、project.config.json、sitemap.json
   这五个文件是全局配置文件，前面三个在后续的小程序开发过程中修改的次数较为频繁，后两个则很少修改。全局文件是对整个小程序的全局属性的定义，其设置的属性优先级低于页面属性的优先级。
   app.js：必填文件，用于描述小程序的整体逻辑；
   app.json：必填文件，用于描述小程序的整体逻辑结构；
   app.wxss：可选文件，用于定义小程序的公共样式表；
   project.config.json：开发者工具上做的任何配置都会写入这个文件，当重新安装工具或换计算机工作时，只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化设置，其中会包括编辑器的颜色、代码上传时自动压缩等一系列选项；
   sitemap.json:用于配置小程序及其页面是否允许被微信索引，文件内容为一个JSON对象，如果没有sitemap.json，则默认为所有页面都被索引。

2.逻辑层和视图层

1. 逻辑层
   逻辑层是是事务逻辑处理的地方。
   对于小程序而言，逻辑层就是.js脚本文件的集合，由JavaScript编写的。

   1. 页面数据
      （1）页面JS文件page函数中第一项为data属性，在data中定义本页面逻辑处理需要的数据，其中很大一部分数据将用于WXML文件的数据渲染。
      （2）使用setData()修改数据取值这种方法可以将相关数据异步更新到WXLM页面上。setData()函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的this.data的值（同步）。
      setData()函数修改数据的取值经常用于WXML文件数据绑定和用户的交互场景。

2. 页面事件处理函数

   1. onPullDownRefresh()：监听用户下拉刷新事件。需要在app.json的window选项中或页面配置中开启enablePullDownRefresh()。
   2. onReachBottom()：监听用户上拉触底事件
   3. onPageScroll（Object）：监听用户滑动页面。Object表示页面在垂直方向已滚动的距离（单位为px）。
   4. onShareAppMessage(Object)：监听用户单击页面内转发按钮< button >组件（opentype=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容。需要注意的是定义了此类事件处理函数，右上角菜单才会显示“转发”按钮。
   5. onResize(Object object)：小程序屏幕旋转时触发。
   6. onTabItemTab(Object object)：点击Tab时触发。

3. 页面跳转

   1. 跳转方式
      页面跳转在小程序中被称为页面路由，所有页面的路由全部由框架进行管理。框架以栈的形式维护当前的所有页面。如下图，页面栈表示：

   路由方式	页面栈表现
   初始化	新页面入栈
   打开新页面	新页面入栈
   页面重定向	当前页面出栈，新页面入栈
   页面返回	页面不断出栈，直到返回目标页
   Tab切换	页面全部出栈，只留下新的Tab页面
   重加载	页面全部出栈，只留下新的页面

4. 页面间参数传递
   在页面跳转中，当前页可将数据传递到着陆页。

5. 模块化
   将大程序按照功能划分为若干个小程序模块。模块化可以有效提高开啊和维护的效率。

   1. 局部变量和全局变量
      在页面文件中声明的变量和函数只在该文件中有效，在不同文件中声明相同名的变量和函数，互不影响。
      当开发者需要让数据在不同页面共享时，可以在app.js中定义全局变量，然后在其他JS文件中使用getApp（）获取全局变量。
   2. 代码模块化
      根据软件工程的高内聚低耦合原则，小程序开发过程中可以把一些内聚性不强的功能代码写在外部JS文件中，小程序提供了module.exports（推荐用）和exports接口对外部JS代码进行定义和引用。

6. 页面自定义事件函数

   1. 事件的特点：
      事件是视图层到逻辑层的通信方式。
      特点如下：
      • 事件可以将用户行为反馈到逻辑层进行处理。
      • 事件可以绑定到组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
   • 事件对象可以携带额为信息，如id、dataset、touches。

   2. 事件的使用方式
      事件的使用需要在WXML页面中某一个组件绑定事件函数名，在JS文件中的page中自定义相应的事件处理函数。
      WMXL绑定事件的示例代码如下：

      <button id="buttonTest" bindtap="tapName">我是按钮组件button>
      

      JS文件中定义事件的示例代码如下：

      Page({
      tapName:function(){
         console.log("你点击了按钮"）
         }
         }）
         ```
      

   3. 事件的分类

      • 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
      • 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

   4. 事件绑定和冒泡
      事件绑定的写法同组件的属性，用key=“value”的形式。

      • key以bind或catch开头，跟上事件的类型，如bindtap、catchtouchsart。
      • value是一个字符串，需要在对应的Page中定义同名的函数，否则当触发事件的时候会报错。bind事件绑定不会阻止冒泡事件向上冒泡；catch事件绑定可以阻止冒泡事件向上冒泡。

      例如有3个< view> 组件，其中A包含B，B包含C，实例代码如下：

      <view id="outer" bindtap="tap1">
      外层容器A
      	<view id="middle" catchtap="tap2">
      	中间容器B
      		<view id="inner" bindtap="tap3">
      		内层容器C
      		view>
      	view>
      view>
      

      当点击容器C时触发tap3事件，由于top3是由bindtap类型的冒泡事件，所以其父节点容器B的top2事件会被触发，而容器B的top2事件是catchtap类型，catchtap类型阻止事件继续向上冒泡，即容器A的top1事件不会触发。当点击容器B和容器A时，只能分别触发自己的tap2和top1事件。

   5. 事件对象
      当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
      事件对象分为基础事件、自定义事件、触摸事件。

      ①基础事件的对象属性如下表：

      属性	类型	说明	含义
      type	string	事件类型	代表事件的类型
      timeStamp	integer	事件生成的时间戳	页面打开到触发事件所经历的毫秒数
      target	object	触发事件的组成的一些属性值集合	触发事件的原组件
      currentTarget	object	当前组件的一些属性值集合	事件绑定的当前组件

      ②自定义事件对象属性如下表：

      属性	类型	说明	含义
      detail	object	额外的信息	自定义事件所携带的数据，如表单组件的提供事件会携带用户的输入，媒体的错误是假件会携带错误的信息。

      ③触摸事件对象属性如下表：

      属性	类型	说明	含义
      touches	array	触摸事件，当前停留在屏幕中间的触摸点信息的数组	是一个数组，每一个元素为一个Touch对象，表示当前停留在屏幕上的触摸点
      changedTouches	array	触摸事件，当前变化的触摸点信息的数组	数据格式同touches ，表示有变化的触摸点，如从无变有（touchstart），位置变化（touchmove），从有变无（touchend、touchcancel）。

      基础事件对象中的target和currentTarget属性包含的参数相同。
      下表，target和currenTarget参数：

      属性	类型	说明
      id	string	当前组件的id
      tagName	string	当前组件的类型
      dataset	object	当前组件上由data-开头的自定义属性组成的集合

      touches对象属性如下表：

      属性	类型	说明
      identifier	number	触摸点的标识符
      pageX，pageY	number	距离文档左上角的距离，文档的左上角为原点，横向为X轴，纵向为Y轴
      clientX，clientY	number	距离页面可显示区域（屏幕除去导航条）左上角的距离，横向为X轴，纵向为Y轴

      canvas画布组件的触摸事件中携带的touches是CanvasTouch数组，如下表：

      属性	类型	说明
      identifier	number	触摸点的标识符
      x,y	number	距离页Canvas左上角的距离，Canvas的左上角为原点，横向为X轴，纵向为Y轴

3. 小程序的宿主环境（通信模型、运行机制、组件、API）

1. 宿主环境指程序必须依赖的环境
   
   小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，例如：微信扫码、微信支付、微信登录、地理定位等等。

2. 小程序宿主环境包含的内容
   ①通信模型
   ②运行机制
   ③组件
   ④API

3. 通信模型

   1. 通信的主体
      小程序中通信的主体是渲染层和逻辑层，其中：
      WXML模板和WXSS样式工作再渲染层
      JS脚本工作再逻辑层

   2. 小程序的通信模型

      1. 渲染层和逻辑层之间的通信
         由微信客户端进行转发
      2. 逻辑层和第三方服务器之间的通信
         由微信客户端进行转发
         

4. 运行机制

   1. 小程序启动的过程

      1. 把小程序的代码包下载到本地
      2. 解析app.json全局配置文件
      3. 执行app.js小程序入口文件，调用App()创建小程序实例
      4. 渲染小程序首页
      5. 小程序启动完成

   2. 页面渲染的过程

      1. 加载解析页面的.json配置文件
      2. 加载页面的.wxml模板和.wxss样式
      3. 执行页面的.js文件，调用Page()创建页面实例
      4. 页面渲染完成

5. 组件
   小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序组件分为9大类，分别是：①视图容器、②基础内容、③表单组件、④导航组件、⑤媒体组件、⑥map地图组件、⑦canvas画布组件、⑧开放能力、⑨无障碍访问，其中前四个是比较常用的。

   1. 常用的视图容器类组件

      1. view
         ①普通视图区域
         ②类似与HTML中的div，是一个块级元素
         ③常用来实现页面的布局效果
         ④代码实例

         <view class="container1">
           <view>1view>
           <view>2view>
           <view>3view>
         view>
         

         .container1 view{
           width: 100px;
           height: 100px;
           text-align: center;
           line-height: 100px;
         }
         .container1 view:nth-child(1){
           background-color: rgb(70, 219, 199);
         }
         .container1 view:nth-child(2){
           background-color: rgb(184, 73, 73);
         }
         .container1 view:nth-child(3){
           background-color: rgb(196, 30, 196);
         }
         .container1{
           display: flex;
           justify-content:space-between;
         }
         

         

      2. scroll-view
         ①可滚动的视图区域
         ②常用来实现滚动列表效果
         ③代码实例

         
         
         
         <scroll-view class="container1" scroll-y>
           <view>1view>
           <view>2view>
           <view>3view>
         scroll-view>
         

         /* pages/list/list.wxss */
         .container1 view{
           width: 100px;
           height: 100px;
           text-align: center;
           line-height: 100px;
         }
         .container1 view:nth-child(1){
           background-color: rgb(70, 219, 199);
         }
         .container1 view:nth-child(2){
           background-color: rgb(184, 73, 73);
         }
         .container1 view:nth-child(3){
           background-color: rgb(196, 30, 196);
         }
         .container1{
           width: 100px;
           height: 120px;
         }
         

         

      3. swiper和swiper-item
         ①轮播图容器 和 轮播图item组件
         ②swiper组件常用的属性
         
         ③实例代码

         
         
         
         <scroll-view class="container1" scroll-y>
           <view>1view>
           <view>2view>
           <view>3view>
         scroll-view>
         
         
         
         <swiper class="swiper-container" indicator-dots>
           
           <swiper-item>
             <view class="item">Aview>
           swiper-item>
           
           <swiper-item>
             <view class="item">Bview>
           swiper-item>
           <swiper-item>
             <view class="item">Cview>
           swiper-item>
         swiper>
         

         /* pages/list/list.wxss */
         .container1 view{
           width: 100px;
           height: 100px;
           text-align: center;
           line-height: 100px;
         }
         .container1 view:nth-child(1){
           background-color: rgb(70, 219, 199);
         }
         .container1 view:nth-child(2){
           background-color: rgb(184, 73, 73);
         }
         .container1 view:nth-child(3){
           background-color: rgb(196, 30, 196);
         }
         .container1{
           width: 100px;
           height: 120px;
         }
         .swiper-container{
           height: 150px;
         }
         .item{
           height: 100%;
           line-height: 150px;
           text-align: center;
         }
         swiper-item:nth-child(1) .item{
           background-color: aqua;
         }
         swiper-item:nth-child(2) .item{
           background-color: rgb(45, 165, 34);
         }
         swiper-item:nth-child(3) .item{
           background-color: rgb(223, 39, 162);
         }
         

         

   2. 常用的基础内容组件

      1. text
         ①文本组件
         ②类似与HTML中的span标签，是一个行内标签
      2. rich-text
         ①富文本组件
         ②支持把HTML字符串渲染位WXML结构

   3. 其他常用组件

      1. button
         ①按钮组件
         ②功能比HTML中的button按钮丰富
         ③通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
         ④实例代码

         
         <button>普通按钮button>
         <button type="primary">主色调按钮button>
         <button type="warn">警告按钮button>
         
         <button size="mini">迷你按钮button>
         <button size="mini" type="primary">迷你按钮button>
         <button size="mini">迷你按钮button>
         
         <button plain>镂空按钮button>
         

      2. image
         ①图片组件
         ②image组件默认宽度约为300px、高度约为240px
         ③用法：
         ④image组件中的mode属性
         image组件的mode属性用来指定图片的裁剪和缩放模式，常用的mode属性如下：
         

      3. navigator（后续还会讲到）
         ①页面导航组件
         ②类似与HTML中的a链接

6. API

   1. 小程序中的API由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如：获取用信息、本地存储、支付功能等
   2. 小程序的三大分类

      1. 事件监听API
         ①特点：以on开头，用来监听某些事件的出发
         ②举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

      2. 同步API
         ①以Sync结尾的API都是同步API
         ②同步API执行结果，可以通过函数返回值直接获取，如果执行出现错误会抛出异常
         举例：wx.setStorageSync('key','value')向本地存储中写入内容

      3. 异步API
         ①类似与jQuery中的$.ajax(options)函数，需要通过success、fall、complete接受调用的结果
         ②举例：wx.request()发起网络数据请求，通过success回调函数接收数据

4. 数据绑定和事件绑定

1. 数据绑定的基本原则

   1. 在data中定义数据

   2. 在WXML中使用数据

2. 小程序中常用的事件
   
3. 事件对象的属性列表
   当事件回调出发时，会收到一个事件对象event，它的详细属性如下表所示：