第二章总结

2301_78308453

于 2024-03-07 11:58:52 发布

阅读量648

点赞数 13

文章标签： notepad++

本文链接：https://blog.csdn.net/2301_78308453/article/details/136468284

版权

项目目录下有两个子目录pages和utils和四个文件app.js app.json app.wxss和project.config.json在主目录中，3个以“app”开头的文件是微信小程序框架的主描述文件，是应用程序级别的文件。这3个文件不属于任何页面。
project. config. json 文件是项目配置文件，包含项目名称、AppID等相关信息.

pages目录中有2个子目录，分别是index和logs，每个子目录中保存着一个贡面的相关
文件。通常，一个页面包含4个不同扩展名（.wxml、.wxss、.js和.json）的文件，分别用于表示页面结构文件、页面样式文件、页面逻辑文件和页面配置文件。按照规定，
面的4个文件必须具有相同的路径与文件名。呈
utils目录用来存放一些公共的.js文件，当某个页面需要用到utils.js函数时，引入后直接使用。在微信小程序中，可以为一些图片、音频等资源类文件单独创建子目录用来存放。

2.1.1主体文件
微信小程序的主体部分由3个文件组成，这3个文件必须放在项目的主目录中，负责
程序的整体配置，它们的名称是固定的。
app.js小程序逻辑文件，主要用来注册小程序全局实例。在编译时，app.js文件和其他页面的逻辑文件打包成一个JavaScript 文件。该文件在项目中不可缺少。app.json小程序公共设置文件，配置小程序全局设置。该文件在项目中不可缺少小程序主样式表文件，类似HTML的scss文件。在主样式表文件中设的样式在其他页面文件中同样有效。该文件在项目中不是必需的。

2.1.2页面文件
小程序通常是由多个页面组成的，每个页面包含4个文件，同一页面的这4个文件必具有相同的路径与文件名。当小程序被启动或小程序内的页面进行跳转时，小程序会根app.json 设置的路径找到相对应的资源进行数据绑定。
.js 文件页面逻辑文件，在该文件中编写JavaScript 代码控制页面的逻辑。该文件
在每个小程序的页面中不可缺少。
.wxml 文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面
中的.html文件。该文件在页面中不可缺少。
.wxss 文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有精式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使)app. wxss中指定的样式规则。该文件在页面中不可缺少。
.json 文件页面配置文件。该文件在页面中不可缺少。

小程序开发框架

小程序MINA框架示意

小程序TNNNA框架将整个系统划分为视图层和逻辑层。视图层（View）由框架设评的标签语言 WXML(WeiXin Markup Language)和用于描述 WXML组件样式的 WXSS（WeXin Style Sheets）组成，它们的关系就像HTML和CSS的关系。逻辑层（App Service)是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、黄面交互处理逻辑都在逻辑层中实现。MINA 框架中的逻辑层使用JaaSeript 来编写交互逻辑。网络请求、数据处理，但不能使用JavaScript中的DOM操作。小程序中的各个页面可以通过逻辑层来实现数据管理、网络通信、应用生命周期管理和页面路由。
MINA 框架为页面组件提供了bindtap、bindtouchstart等与事件监听相关的属性，并与逻辑层中的事件处理函数绑定在一起，实现面向逻辑层与用户同步交互数据。MINA框架还提供了很多方法将逻辑层中的数据与页面进行单向绑定，当逻辑层中的数据变更时，小程序会主动触发对应页面组件的重新数据绑定。
微信小程序不仅在底层架构的运行机制上做了大量的优化，还在重要功能（如page切换、tab切换、多媒体、网络连接等）上使用接近于系统层（Native）的组件承载。所以，小程序MINA 框架有着接近原生 App的运行速度，对Android 端和iOS端能呈现得高度一致，并为开发者准备了完备的开发和调试工具。
2.2.1视图层

MINA 框架的视图层由WXML与WXSS编写，由组件来进行展示。对于微信小程序而言，视图层就是所有.wxml文件与.wxss文件的集合：.wxml文件用于描述页面的结构；.wxss 文件用于描述页面的样式。
微信小程序在逻辑层将数据进行处理后发送给视图层展现出来，同时接收视图层的事件
反馈。视图层以给定的样式展现数据并反馈时间给逻辑层，而数据展现是以组件来进行的。组件是视图的基本组成单元

2.2.2逻辑层
逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括：
thi微信小程序开发框架的逻辑层是采用JavaScript 编写的。在JavaScript的基础上，（1）增加app(）和Page(）方法，进行程序和页面的注册。
（2）提供丰富的API，如扫一扫、支付等微信特有的能力。
（3）每个页面有独立的作用域，并提供模块化能力。
逻辑层就是通过各个页面的.js脚本文件来实现的。由于小程序并非运行在浏览中所以JavaScript 在Weh中的一些功能在小程序中无法使用，如document、window等。开发者开发编写的所有代码最终会被打包成独立的JavaScript文件，并在小程序点时候运行，直到小程序被销毁。
小程序系统默认提供的app.js文件

2.2.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原窗口打开页面。

创建小程序页面

在项目主目录下面pages目录下面新建一个damn，并在新建目录damn.js damn.json damn.wxml damn.wxss空文件新建damn目录，接下来打开damn.json输入一对空的{} ,需引入Page()方法，保证damn.js不为空即可。打开damn.js输入Page({ })将四个文件保存后进行编译。

全局配置文件

属性					类型		必填	描述和最低版本支持

entryPagePath			string		否		小程序默认启动首页
	
pages					string[]	是		页面路径列表	

window					Object		否		全局的默认窗口表现	

tabBar					Object		否		底部 tab 栏的表现
	
networkTimeout			Object		否		网络超时时间	

debug					boolean		否		是否开启 debug 模式，默认关闭

window配置项及其描述

属性								类型			默认值		描述	

				
backgroundColor						HexColor		#ffffff		窗口的背景色	 	
backgroundColorTop					string			#ffffff		顶部窗口的背景色，
backgroundColorBot
enablePullDownRefresh				boolean			false		是否开启全局的下拉刷新 Page.onPullDownRefresh	
onReachBottomDistance				number			50			页面上拉触底事件触发时距页面

app.json中设置window配置项：

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

"tabBar": {
      "color":"#666666",
      "selectedColor":"#ff0000",
      "borderStyle":"black",
      "list":[
        {
          "pagePath":"pages/damn/damn",
          "iconPath":"images/damnjs.png",
          "selectedIconPath":"images/damnjs.png",
          "text":"首页"
        },
{
  "pagePath":"pages/logs/logs",
  "iconPath":"images/damnjss.png",
  "selectedIconPath":"images/damnjss.png",
  "text":"新闻"
} 
      ]
    }
  }

执行结果

项目逻辑层文件配置项

页面逻辑文件

页面逻辑层文件配置项

代码.js

Page({
data:{
  name:"iwk",
  age:30,
  birthday:[{year:1988},{month:11},{date:8}],
  object:{hobby:"compute"}
},

})
students :[
  {nickname:"Tom", height:180, weight:150},{nickname:"Anne"< height:160, weight:100}
]

.wxml代码

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

<view>算术运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算符：{{age==30 ?'happy':'sad'}}</view>
<template name="stu">
<view wx:for="{{students}}">
<text>姓名: {{item.nickname}}</text>
<text>身高: {{item.height}}</text>
<text>体重: {{item.weight}}</text>
</view>
</template>

执行结果