小程序第二章总结

一.小程序的基本目录结构

主体文件

      微信主体部分由3个文件组成，这3个文件必须放在项目的目录中，负责小程序的整体配置，他们的名称是固定的。

• app. js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app. js文件会和其他页 面的逻辑文件打包成一个JavaScript 文件。该文件在项目中不可缺少。
• app. json 小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少。
• app. wxss小程序主样式表文件，类似 HITML的：css 文件。在主样式表文件中设置的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

页面文件

      小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必须具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根据app.json设置的路径找到相对的资源进行数据绑定。

• .js文件 页面逻辑文件，在该文件中编写JavaSoript 代码控制页面的逻辑。该文件在每个小程序的页面中不可缺少。
• .wxnl文件 页面结构文件，用于设计页面的布局、致据鄉定等，类似EITMI 页面中的．html 文件。该文件在页面中不可缺少。
• .wxss文件 页面样式表文件，用于定义本灭面中用到的各类样式表。当页面中有样式表文件时，文什中的样式规测会层發理益 aor woas 中的样式现则：否则，直按使用app.wxss 中指定的样式规则。该文件在页面中不可缺少。
• .json 文件 页面配置文件。该文件在页面中不可缺少。

二.小程序开发框架

视图层：

          MINA 框架的视图层由 WXML 与WXSS 编写，由组件来进行展示。对于微信小程序而言，视图层就是所有。wxml 文件与.wxss 文件的集合：wxml 文件用于描述页面的结构；.wxss 文件用于描达页面的样式。

逻辑层：

         用于处理事务逻辑，实现数据管理，网络通信

数据层：

        数据层在逻辑上包括页面临时数据或缓存。文件存储（本地存储）和网络存储与调用。

1.页面临时数据或缓存

2.文件存储（本地存储）

3.网络存储与调用

三.创建小程序页面

创建第一个页面文件

1.在项目主目录下新建一个pages目录，在pages目录下新建一个news目录，并在news目录下新建news.js、news.json、news.wxml、news.wxss空文件。如图所示：

2.打开news.wxml文件，输入“欢迎大耳朵图图学习小程序”。然后，告诉系统这个文件的名称及所处路径。因此，打开项目配置文件app.json,输入如下代码：

//app.json
{
  "pages": [
    
    "pages/news/news"
]
}

3.再打开news.json文件，输入如下代码：

//news.json
{

}

4.完成以上之后，再打开news.js文件，输入代码如下：

*只需引入Page()方法，保证news.js文件不为空即可。

//news.js
Page({

     })

5.运行结果：

配置文件

   小程序的全局配置保存在全局配置文件（app.json）中，使用全局配置来配置页面文件（pages)的路径、设置窗口（window)表现、设定网络请求API的超时时间值（network Timeout）以及配置多个切换页面（tabBar）等。

全局配置项的相关描述：

1.pages配置项

      pages 配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符串，代表对应页面的”路径“+”文件名“。

 设置pages配置项时，注意：

①数组的第一项用于设定小程序的初始页面。

②在小程序中新增或减少页面时，都需要对数组进行修改。

③文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml、.wxss文件进行整合数据绑定。

2.window配置项

          window配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。

3.taBar配置项

            当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现。

                      list(列表）接受数组值，数组中的每一项也都是一个对象。

                                   在app.json文件中设置如下tabBar配置：

"tabBar": {
    "color": "#666666",
    "selectedColor": "#ffffff",
    "borderStyle":"black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/news/news",
        "iconPath": "image/hhh.png",
        "selectedIconPath": "image/hhh.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/sss.png",
        "selectedIconPath": "image/sss.png",
        "text": "新闻"
      }
    ]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

运行结果：

4.networkTimeout配置项

        小程序中各种网络请求API的超时时间只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。

5.debug配置项

           debug配置项用于开启开发者工具的调试模式，默认为false。开启后，页面的注册、路由、数据更新、事件触发等调试信息将以info的形式输出到Console（控制台）面板上。

页面配置文件

         页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。在配置页面配置文件后，页面中的window配置值将覆盖全局配置文件（app.json）中的配置值。

逻辑层文件

1.项目逻辑文件

      项目逻辑文件app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp()获取。

app.js代码：

// app.js
App({
    //当小程序初始化完成时，会触发onLaunch（全局只触发一次）
  onLaunch(){
        console.log("小程序初始化  >>>")   
      },、
     //当小程序启动（或从后台进入显示台），时会触发onShow
      onShow(){
        console.log("小程序启动")
      },
     //当小程序从前台进入后台，会触发onHide
      onHide(){
        console.log("小程序进入后台")
      },
      //当小程序发生脚本错误，会触发onError，并带上错误信息
      onError(){
      }
})

运行结果：

2.页面逻辑文件

           页面逻辑文件的主要功能有:设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。每个页面文件都有一个相应的逻辑文件，逻辑文件是运行在纯JavaScript引擎中。因此，在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作DOM改变页面，只能采用数据绑定和事件响应来实现。
          在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，如图所示：

1.设置初始数据
               设置初始数据是对页面的第一次数据绑定。对象data 将会以JSON (Javascript ObjectNo- tation,JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式(字串、数字、布尔值、对象、数组)。

2.定义当前页面的声明周期函数
               在Page()函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。

• onLoad   页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx.navigateTo和 wx.redirectTo及<navigator/>中的query。
• onShow   页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。
• onReady  页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。
• onHide  页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数。
• onUnload  页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时，调用该函数。

3. 视图层可以通过WXML对数据进行绑定。

数据初始、数据绑定：

news.js:

//news.ja
Page({
  //页面的初始数据
  data:{
    name:'胡图图',  //字符串
    age:50,      //数据
    birthday:[{year:1988},{month:11},{date:18}],//数组
    object:{hobby:'computer'}  //对象
  }
})

news.wxml:

//news.wxml
<view>姓名：{{name}}</view>
<view>年龄：{{age}}</view>
<view>
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好：{{object.hobby}}</view>

运行结果：

              在index.js 和news.js文件夹中加入，代码：

index.js文件

//index.js
Page({
     //生命周期函数--监听页面加载
   onLoad(){
    console.log("index1 onLoad.....")
  },
  //生周期函数--监听页面初次渲染完成
  onReady(){
    console.log("index1 onReady....")
  },
  //生命周期函数--监听页面显示
  onShow(){
    console.log("index1 onShow....")
  },
  //生命周期函数--监听页面隐藏
  onHide(){
    console.log("index1 onHide....")
  },
  //生命周期函数--监听页面卸载
  onUnload(){
    console.log("index1 onUnload....")
  },

})

news.js文件

//news.js
Page({
       //生命周期函数--监听页面加载
  onLoad(){
    console.log("news onLoad.....")
  },
  //生周期函数--监听页面初次渲染完成
  onReady(){
    console.log("news onReady....")
  },
  //生命周期函数--监听页面显示
  onShow(){
    console.log("news onShow....")
  },
  //生命周期函数--监听页面隐藏
  onHide(){
    console.log("news onHide....")
  },
  //生命周期函数--监听页面卸载
  onUnload(){
    console.log("news onUnload....")
  },

})

编译后：

3.定义事件处理函数

      开发者在Page()中自定义的函数称为事件处理函数。视图层可以在组件中加入事件绑定，当达到触发事件时，小程序就会执行Page（）中定义的事件处理函数。代码如下：   

//index1.wxml
<view bind:tap="myclick">单击执行逻辑层事件</view>
 
//index1.ls
myclick:function(){
    console.log("你点击了view")
  }

4.使用setData更新数据

index.js

//index.js  

Page({
  //页面的初始数据
  data:{
    name:'sansan', //字符串
    age:100,      //数字
    birthday:[{year:2024},{month:3},{date:6}], //数组
    object:{hobby:'sing  dance swim '} //对象
  },
  chtext:function() {
    this.setData({
      name:'wawawa'
    });
  },
  chage:function() {
    this.setData({
      age:500
    });
  },
  charray:function() {
    this.setData({
      birthday:[{year:2029},{month:13},{date:14}]
    });
  },
  chobject:function() {
    this.setData({
      'object.hobby':'play，backetball，pingpong, giute'
    });
  },
  adddata:function() {
    this.setData({
      'address':'旅游'
    });
  },
  myclick:function(){
    console.log("你点击了view")
  },

});

index.wxml

//index.wxml
<view>姓名：{{name}}</view>
<button bind:tap="chtext">修改姓名</button>
<view>年龄：{{age}}</view>
<button bind:tap="chage">修改年龄</button>
<view>出生日期：
  {{birthday[0].year}}年
  {{birthday[1].month}}月
  {{birthday[2].date}}日             
</view>
<button bind:tap="charray">修改出生日期</button>
<view>爱好：{{object.hobby}}</view>
<button bind:tap="chobject">修改爱好</button>
<view>{{address}}</view>
<button bind:tap="adddata">添加数据</button>

                                                          运行结果

                                                           运行结果更新后

页面结构文件

              页面结构文件（WXML）是框架设计的一套类似 HTML的标签语言，结合基础组件、事
件系统，可以构建出 页面的结构，即．wxml 文件。在小程序中，类似 HTML 的标签被称为组
件，是页面结构文件的基本组成单元。这些组件有开始（如＜view＞）和结束（如</view一标志，每个组件可以设置不同的属性（如id、class 等），组件还可以嵌套。

         WXML 还具有数据绑定、条件数据绑定、列表数据鄉定、模板、引用页面文件、页面事
件等能力。

1.数据绑定

             小程序在进行页面数据绑定时，框架会将 WXML 文件与巡辑文件中的 data 进行动态绑
定，在页面中显示 data 中的数据。

①简单绑定：简单绑定是指使用双大括号（{{}}）将变量包起来，在页面中直接作为字符串输出使用。简单绑定可以作用于内容、组件属性、控制属性等的输出。

*简单绑定作用于组件属性、控制属性时，双大括号外应添加双引号。

②运算：在{{}}内可以做一些简单的运算（主要有算术运算、逻辑运算、三元运算、字符运算），这些运算均符合JavaScript运算规则。  代码如下：

index.wxml

//index.wxml
欢迎学习小程序开发
<view>年龄:{{age}}</view>
<view>算术运算：{{age+num1}}</view>
<view>逻辑运算：{{age==40}}</view>
<view>三元运算符：{{num1>num2?'num1>num2':'num1<num2'}}</view>

index.js

//index.js
Page({ 
    data:{
      age:30,
      num1:100,
      num2:150,
    }
  })

运行结果：

2.条件数据绑定

      条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

① wx:if条件数据绑定

//index.js
Page({
    data:{
      num:100,
      age:100,
}
})

//index.wxml
<view wx:if="{{age<50}}">1</view>
<view wx:elif="{{age==50}}">2</view>
<view wx:else>3</view>

②block  wx:if条件数据绑定:当需要通过一个表达式去控制多个组件时，可以通过<block>将多个组件包起来，然后在<block>中添加wx:if属性即可。

3.列表数据绑定

①wx:for

//index.js
Page({
    data:{
      num:100,
      age:100,
      students:[
        {name:'小明', weight:'150',height:'7777'},
        {name:'李华',weight:'166',height:'999'},
        {name:'汤姆', weight:'2043',height:'000'}
      ]
    },
    
  
  })

//index.wxml
<template name="stu">
<view wx:for="{{students}}">
<text>姓名：{{item.name}}</text>
<text>年龄：{{item.weight}}</text>
<text>身高：{{item.height}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>

运行结果：

 ②block  wx:for与block wx:if类似，在wxml中也可以使用<block>包装多个组件进行列表数据绑定。

4.模板

在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件结合定义为一个模板，以后在需要的文件中直接使用这个模板。

①定义模板

模板代码由wxml组成，因此其定义也是在wxml 文件中，定义模板的格式为: 

<template name="模板名">

②调用模板

将模板定义后，就可以对其进行调用了。调用模板的格式为: 

<template is="模板名称"data=="{{传入的数据}}"/> 

5.页面事件

①定义事件函数在．js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
②调用事件 调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。

③冒泡事件  冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父
级元素再向其父级元素传递，一直到页面的顶级元素。
④非冒泡事件 非骨泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递
在WXML中，冒泡事件有6个，如图：

页面样式文件

页面样式文件(WxSS)是基于Css拓展的样式语言，用于描述WXML，的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对Wxss做了一些扩充和修改。

1.尺寸单位

      由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx (respnesive pixel)。WXSS规定屏幕宽度为750 rpx,在系统数据绑定过程中rpx会按比例转化为px。

2.样式导入

       为了便于管理WXSS文件，我们可以将样式存放于不同的文件中。如果需要在某个文件
中引用另一个样式文件，使用@ import语句导人即可。

3.选择器

     目前，WXSS仅支持CSS中常用的选择器，如.class、#id、element、:.before、:aftert等。

4.WXSS常用属性

         WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如下