微信小程序开发与运营（第二章）

关注领取铁盆

已于 2024-03-08 11:47:59 修改

阅读量1.7k

点赞数 53

文章标签：微信小程序小程序

于 2024-03-04 14:31:22 首次发布

本文链接：https://blog.csdn.net/qq_74842061/article/details/136445315

版权

学习目标

了解小程序的基本目录结构

了解小程序的开发框架

了解小程序的文件类型

了解小程序的相关配置信息

小程序的基本目录结构

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

pages目录中有2个子目录，分别是index和logs,每个子目录保存着一个页面的相关文件，通常一个页面有4个不同扩展名（wxml,wxss,js,json）的文件。

主体文件：

微信小程序的主体由3个文件组成：

app.js 小程序逻辑文件,主要用来注册小程序全局实例，编译时，app.js文件会和其他逻辑文件打包成一个JavaScript文件，该文件在项目中不可缺少。

app.json 小程序公共设置文件，配置小程序全局设置，该文件在项目中不可缺少。

app.wxss 小程序主样式表文件，类似HTML的.css文件，该文件在项目中不是必需的。

页面文件：

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

.js文件页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。该文件
在每个小程序的页面中不可缺少。

.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。该文件在页面中不可缺少。

.wxss 文件页面样式表文件，用于定义本页面中用到的各类样式表。当页面中有样式表文件时，文件中的样式规则会层叠覆盖app.wxss中的样式规则；否则，直接使用app.wxss中指定的样式规则。该文件在页面中不可缺少。

.json文件页面配置文件。该文件在页面中不可缺少。

小程序的开发框架

小程序MINA框架将整个系统分为试图层和逻辑层。视图层由（View）由框架设计的标签语言WXML和用于描述WXML组成样式的WXSS组成，他们的关系就像HTML和CSS的关系。

视图层：

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

逻辑层：

逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合.微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。微信小程序开发框架的逻辑层是采用JavaScript编写的。在JavaScript的基础上，微信团队做了适当修改，以便提高开发小程序的效率。主要修改包括：
（1）增加app()和Page(）方法，进行程序和页面的注册。

（2）提供丰富的API，如扫一扫、支付等微信特有的能力。

（3）每个页面有独立的作用域，并提供模块化能力。
逻辑层就是通过各个页面的，js脚本文件来实现的。由于小程序并非运行在浏览器中，
所以JavaScript 在Web中的一些功能在小程序中无法使用，如document、window等。
开发者开发编写的所有代码最终会被打包成独立的JavaScript文件，并在小程序启动的
时候运行，直到小程序被销毁。

数据层：

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

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目录，再pages目录下并在index目录下新建ss.js,ss.json,ss.wxml,ss.wxss。

此时，系统仍然提示错误信息。假设，我们的目的是页面能显示“欢迎学习小程序，实现大梦想”。首先，打开index.wxml文件，输入“欢迎学习小程序，实现大梦想”。然后，告诉系统这个文件的名称及所处路径。因此，打开项目配置文件app.json，输入如下代码：

这段代码将“ss”页面注册到小程序中，这个对象的第一属性pages接受了一个数组，该数组的每一个项式一个字符串，该字符串由“路径”+“文件名”组成，

接下来，打开ss.josn文件，输入如下代码：

在ss.json文件中，只需加入一对空“{}”即可.

打开ss.js文件，输入如下代码：

只需引入Page方法保证ss.js文件不为空即可.

将这4个文件保存后进行编译，可在模拟器得到结果。

配置文件

小程序的配置文件按其作用范围可以分为全局配置文件（app.json）和页面配置文件（*.json）。全局配置文件作用于整个小程序，页面配置文件只作用于当前页面。由于页面配置文件的优先级高于全局配置文件的优先级，因此，当全局配置文件与页面配置文件有相同配置项时，页面配置文件会覆盖全局配置文件中的相同配置项内容。

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

全局配置项

全局配置文件内容的整体结构如下：

window配置项

window配置项负责设置小程序状态栏，导航栏，标题，窗口背景色等系列样式。window配置项可以配置的对象表

tabBar配置项

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

其中list（列表）接受数组值，数组中的每一项叶都时一个对象。

tabBar中list选项

neworkTimeout配置项

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

debug配置项

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

逻辑层文件

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

项目逻辑文件

项目逻辑文件 app.js中可以通过App(）函数注册小程序生命周期函数、全局属性和全局方法，已注册的小程序实例可以在其他页面逻辑文件中通过getApp(）获取。
App(）函数用于注册一个小程序，参数为Objcet，用于指定小程序的生命周期函数、用户自定义属性和方法，其参数如表所示。

项目逻辑文件配置项

当启动小程序时，首先会依次触发生命周期函数onLanuch和onShow方法,然后通过app.json的pages属性注册相应的页面，最后根据默认路径加载首页，当用户单击左上角的关闭”按翻或单击设备的Home键离开微信时，小程序没有被直接销毁，而是进入g后台这两种情况都会触发onHidc方法：当用户再次进入微信或再次打开小程序时，小程后台进入前台、这时会触发onShow方法。只有当小程序进入后台一段时间（或者系纷我们在Demo2的app.js加入如图2-10所示的代码。
古用过高）时、小程序才会被销毁。

保存并编译后，Console面板的显示效果如图2-11所示。
小程序启动后首先触发onLaunch方法，然后触发onShow 方法，在onShow方法中通过this 参数获取自定义属性和自定义方法并显示。在其他逻辑文件中，开发者可以通过全局函数getApp(）方法获取小程序实例，例如

页面逻辑文件

页面逻辑文件的主要功能有：设置初始数据：定义当前页面的生命周期函数；定义事件处理函数等。每个文件都有一个相应的逻辑文件逻辑文件时运行在纯javaScript引擎中。

页面逻辑文件配置项

设置初始数据
设置初始数据是对页面的第一次数据绑定。对象dala 将会以JSON（Javascripi Object No tation，JS对象简谱）的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格式（字符串、数字、布尔值、对象、数组）。
视图层可以通过WXML对数据进行绑定。
数据初始、数据绑定及运行效果如图fd所示。
2.定义当前页面的生命周期函数
在Page(）函数的参数中，可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。

onload页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。该函数的参数可以获取wx. navigateTo和 wx. redirectTo及<navigator/>中的query。

onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次，代表页面已经准备就绪，可以和视图层进行交互。

onHide页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时，调用该函数。

onUnload页面卸载函数。当页面卸载、进行 navigateBack或redirectTo操作时，调用该函数

数据绑定和运行结果

数据初始

页面结构文件

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