微信小程序学习笔记（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