第二章总结

π3.141

已于 2024-03-10 14:07:46 修改

阅读量440

点赞数 4

文章标签：前端

于 2024-03-04 16:44:29 首次发布

本文链接：https://blog.csdn.net/2201_75561769/article/details/136454905

版权

一、基本目录结构：
在微信下程序的基本目录结构中，项目主目录下有2个子目录（pages和utils）和4个文件（app.js、app.json、app.wxss和project.config.json）

在主目录中3个以“app”开头的文件是微信下程序框架的主描述文件，是应用程序级别的文件

project.config.json文件是项目配置文件，包含项目名称、AppID等

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个页面的相关文件。通常，一个页面包含4个不同的扩展名（.wxml、.wxss、.js、.json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件、页面配置文件。按照规定，同一个页面的4个文件必须用来存放具有相同的路径与文件名

主题文件：

app.js：小程序逻辑文件

app.json：小程序公共设置文件

app.wxss：小程序主样式表文件

页面文件：

.js：页面逻辑文件

.wxml：页面结构文件

.wxss：页面样式文件

.json：页面配置文件

二、小程序开发框架：

小程序MINA框架将整个系统划分为视图层、逻辑层和（数据层）

视图层：MINA框架的视图层由WXML与WXSS编写，由组件来进行展示
视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构wxss 文件用于描述页面的样式
逻辑层：逻辑层用于处理事务逻辑（采用JavaScript编写）
1.增加app()和Page()方法，进行程序和页面的注册
2.提供丰富的 API,如扫一扫、支付等微信特有的能力
3.每个页面有独立的作用域，并提供模块化能力
数据层：数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用
1.页面临时数据或缓存
在Page()中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this. data 的值。setData()函数的参数接收一个对象，以(key,value)的形式表示将 key 在 this.data 中对应的值改变成 value

2.文件存储(本地存储)
使用数据 API接口，如下:
wx.getStorage 获取本地数据缓存
wx. setStorage 设置本地数据缓存
wx.clearStorage 清理本地数据缓存

3.网络存储与调用
上传或下载文件 API接口，如下:
wx.request 发起网络请求
wx.uploadFile 上传文件。
wx.downloadFile 下载文件
调用 URL的 API接口，如下:
wx.navigateTo 新窗口打开页面
wx.redirectTo 原窗口打开页面

三、创建小程序页面：
1.

添加新的文件news,并创造四个子文件news.js json wxml wxss

在news.wxml中写下想写的文字

在news.json中写{}

在news.js中写page({})

6.运行结果

2.4配置文件
小程序的配置文件按其作用范围可以分为全局配置文件(app.json)和页面配置文件(*.json)。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容
小程序的全局配置保存在全局配置文件(apPjson)中，使用全局配置文件来配置页面文件(pages)的路径、设置窗口(window)表现、设定网络请求API的超时时间值(networkTimeout)以及配置多个切换页(tabBar)等（参考下图）

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

设置 pages 配置项时，应注意以下3点:
（1）数组的第一项用于设定小程序的初始页面

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

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

2.window配置项
window 配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式（参考下图）

3.tabBar配置项

当需要在程序顶部或底部设置菜单栏时，可以通过配置tabBar配置项来实现其中，list(列表)接受数组值，数组中的每一项也都是一个对象（参考下图）

4.networkTimeout配置项

小程序中各种网络请求 API的超时时间值只能通过networkTimeout配置项进行统一设置不能在 API中单独设置（参考下图）

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

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

"navigationBarBackgroundColor":"#ffffff"

"navigationBarTextStyle":"black"

"navigationBarTitleText"："页面window 配置演示”

"backgroundColor":"#eeeeee"

"backgroundTextStyle":"1ight"

2.5逻辑层文件
小程序的逻辑层文件分为项目逻辑文件和页面逻辑文件

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

App()函数用于注册一个小程序，参数为 0bject，用于指定小程序的生命周期函数、用户自定义属性和方法（参考下图）

当启动小程序时，首先会依次触发生命周期函数onLanuch和onShow方法，然后通过epp.json的 pages属性注册相应的页面，最后根据默认路径加载首页;当用户单击左上角的“关闭”按钮或单击设备的Home键离开微信时，小程序没有被直接销毁，而是进入后台这两种情况都会触发onHide方法;当用户再次进入微信或再次打开小程序时，小程序会从后台进人前台，这时会触发onShow方法。只有当小程序进人后台一段时间(或者系统资源占用过高)时，小程序才会被销毁

  onShow: function(options){
    console.log("小程序显示");
  },
  onHide: function(){
    console.log("小程序进入后台");
  },

运行结果

2.5.2页面逻辑文件

页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面文件都有一个相应的逻辑文件

在逻辑层，Page()方法用来注册一个页面，并且每个页面有且仅有一个，其参数如表所示（参考下图）

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

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

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

（1）onLoad：页面加载函数
（2）onShow：页面显示函数
（3）onReady：页面数据绑定函数
（4）onHide：页面隐藏函数
（5）onUnload：页面卸载函数
demo数据初始、数据绑定与运行效果：

代码：

news.js文件

Page({
  data:{
    name:"摩拉克斯",//字符串
    age:5000,//数字
    birthday:[{year:5000},{month:12},{date:31}],//数组
    object:{hobby:"喝茶"}//对象
  },

news.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>

运行结果

demo练习：

代码：

news.js

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

在logs.js文件中输入以下代码：

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

运行结果：

控制台就会输出onLoad（页面加载）、onShow（页面显示）、onReady（页面初次渲染完成）

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

{
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#000000",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/news/news",
      "text": "text",
      "iconPath": "img/R-C.png",
      "selectedIconPath": "img/R-C.png"
    },
     {
      "pagePath": "pages/logs/logs",
      "text": "text",
      "iconPath": "img/R-C.png",
      "selectedIconPath": "img/R-C.png"
     }
  ]
  },

  "pages": [
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

运行结果：

页面结构文件
页面结构文件(WXML)是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。在小程序中，类似HTML的标签被称为组件，是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志，每个组件可以设置不同的属性(如id、class等)，组件还可以嵌套。
WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

1.数据绑定
小程序在进行页面数据绑定时，框架会将WXML文件与逻辑文件中的data进行动态绑
定，在页面中显示data中的数据。小程序的数据绑定使用Mustache语法将变量或运算规则包起来。

2.条件数据绑定
条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。
3.列表数据绑定
列表数据绑定用于将列表中的各项数据进行重复数据绑定。
4.模板
在小程序中，如果要经常使用几个组件的组合(如“登录”选项)，通常把这几个组件
结合定义为一个模板，以后在需要的文件中直接使用这个模板。
5.引用页面文件
在WXML文件中，不仅可以引用模板文件，还可以引用普通的页面文件。WXML提供
了两种方式来引用其他页面文件。
6.页面事件
简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制，需要定义事件函数和调用事件。
定义事件函数在.is文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key =value”形式出现，key(属性名)以bind或catch开头，再加上事件类型，如 bindtap、catchlongtap。其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡，catch开头的事件绑定可以阻止冒泡事件向上冒泡。value(属性值)是在js中定义的处理该事件的函数名称，如click。在小程序中，事件分为冒泡事件和非冒泡事件两大类型。
冒泡事件冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。在WXML中，冒泡事件有6个，如下表所示。

页面样式文件

页面样式文件(WXSS) 是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS的大部分特性，小程序对WXSS做了一些扩充和修改。
1.尺寸单位
由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WXSS在此基础上增加了尺寸单位rpx(respnesive pixel)。WXSS规定屏幕宽度为750 rpx，在系统数据绑定过程中rpx会按比例转化为px。例如，iPhone6的屏幕宽度为375 px，即750 rpx需按比例转化为375px，所以，在iPhone6中，1rpx＝0.5px。
2.样式导入
为了便于管理WXSS文件，我们可以将样式存放于不同的文件中。如果需要在某个文件
中引用另一个样式文件，使用@import语句导入即可。
3.选择器
目前，WXSS仅支持CSS中常用的选择器，如.class、#id、element、::before、:aftert等。
4. WXSS常用属性
WXSS文件与CSS文件有大部分属性名及属性值相同，WXSS的常用属性及属性值如下表所示。