第二章总结

最新推荐文章于 2024-11-07 16:34:28 发布

你也是小白？

最新推荐文章于 2024-11-07 16:34:28 发布

阅读量546

点赞数 7

文章标签： notepad++

本文链接：https://blog.csdn.net/2301_81813276/article/details/136482442

版权

本文详细介绍了微信小程序的基础目录结构，包括关键文件及其功能，MINA框架的运用，视图层与逻辑层的交互，数据绑定与生命周期管理，以及网络请求和文件存储等核心概念。

摘要由CSDN通过智能技术生成

微信小程序开发基础

小程序的基本目录结构

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

主题文件

app.js 小程序逻辑文件，主要用来注册小程序全局案例。
app.json 小程序公共设置文件，配置小程序全局设置。
app.wxss 小程序主样式表文件，类似HTML的.css文件。

页面文件

（页面文件在页面中不可缺少）

.js文件页面逻辑文件，在该文件中编写JavaScript代码控制页面的逻辑。
.wxml文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件。
.wxss文件页面样式表文件，用于定义本页面中用到的各类样式表。
.json文件页面配置文件。

小程序的开发框架

微信团队认为小程序的开发提功力MINA框架。MINA框架通过微信客户端提供文件系统我哪会刚落通信、任务管理、数据安全等基础功能，对上层提供了一整套JavaScript API，让开发者能够非常方便的使用微信客户端提供的各种基础功能快速构建应用。

小程序MINA框架示意如图所示：

视图层

视图层（View），由框架设计的标签语言WXML（Weixin Markup Language）和用于描述WXML组件样式的WXSS（WeiXin Style Sheets）组成，他们的关系就像HTML和CSS的关系。

逻辑层

逻辑层（App Service），是MINA框架的服务中心，由微信客户端启用异步线程单独加载运行。页面数据绑定所需的数据、页面交互处理逻辑都在逻辑层中实现。

数据层

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

页面临时数据或缓存

在Page（）中，使用setData函数将数据从逻辑层发送到视图层，同时改变对应的this.data的值。

setData（）函数的参数接收了一个对象，以（key,value）的形式表示将key在this.data中对应的值改变成value。

文件存储（本地存储）

wx.getStorage 获取本地数据缓存。
wx.setStorage 设置本地数据缓存。
wx.clearStorage 清理本地数据缓存。

网络存储与调用

上传或下载文件API接口，如下：

wx.request 发起网络请求。
wx.uploadFile 上传文件。
wx.downloadFile 下载文件。

调用URL的API接口，如下：

wx.navigateTo 新窗口打开网页。
wx.redirectTo 原窗口打开网页。

创建小程序页面

配置文件

全局配置文件

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

1.pages配置项

pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项都是字符
串，代表对应页面的“路径“文件名”。pages配置项是必填项。
设置pages配置项时，应注意以下3点:

数组的第一项用于设定小程序的初始页面。
在小程序中新增或减少页面时，都需要对数组进行修改。
文件名不需要写文件扩展名。小程序框架会自动寻找路径及对 js、.json、wxml和wxss文件进行整合数据绑定。

2.window配置项

window配置项负责设置小程序状态栏、导航条、标题、窗口背景色等系统样式。以下是可以配置的对象参考表：

3.tabBar配置项

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

tabBar中list（列表）接受数组值，数组中的每一项也都是一个对象。对象数据值说明如下：

4.networkTimeout配置项

小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。networkTimeout可以配置的属性如下图所示：

5.debug配置项

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

页面配置文件

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

逻辑层文件

项目逻辑文件

页面逻辑文件

1.设置初始数据
设置初始数据是对页面的第一次数据绑定。对象data将会以JSON (Javascript 0bject No-
taion,JS对象简谱)的形式由逻辑层传至视图层。因此，数据必须是可以转成JSON的格#
(字符串、数字、布尔值、对象、数组)。
视图层可以通过WXML对数据进行绑定。
2.定义当前页面的生命周期函数
在Page()函数的参数中，可以定义当前页面的生命周期丽数。页面的生命周期函数主
要有onLoad、onShow、onReady、onHide、onUnload。

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

3.定义事件处理函数。

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

4.使用setData更新数据

小程序在Page对象中封装了一个名为setData（）的函数，用来更新data中的数据。函数参数为Object，以“key:value”对的形式表示将this.data中的key对应的值修改为value。

页面结构文件

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

数据绑定

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

1.简单绑定

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

2.运算

在{{}}内可以做一些简单的运算（主要有算术运算、逻辑运算、三元运算、字符串运算等），这些运算均应符合JavaScript运算规则。

条件数据绑定

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

wx:if条件数据绑定
block wx:if条件数据绑定

列表数据绑定

wx:for
block wx:for

模版

模板代码由wxml组成，因此其定义也是在wxml文件中。

模板定义后即可进行调用。

页面事件

简单来说，小程序中的事件是用户的种行为或通信方式。在页面文件中，通过定义事
件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将
事件绑定到组件上，当达到触发条件时,事件就会执行逻辑层中对应的事件处理函数。
要实现这种机制,需要定义事件函数和调用事件。

定义事件函数在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
调用事件调用事件也称为注册事件。调用事件就是告诉小程序要监听哪个组件的什么事件，通常在页面文件中的组件上注册事件。事件的注册(同组件属性)，以“key=value形式出现,key(属性名)以bind或catch开头，再加上事件类型，如 bindtap、catchlongtaPo其中，bind开头的事件绑定不会阻止冒泡事件向上冒泡,catch开头的事件绑定可以阻止冒泡事件向上冒泡。value（属性值)是在s中定义的处理该事件的函数名称，如click。

在小程序中，事件分为冒泡事件和非冒泡事件两大类型。

冒泡事件冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
非冒泡事件非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

页面样式文件

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

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

2.样式导入

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

3.选择器

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

4.WXSS文件与CSS文件由大部分属性名及属性值相同。

示例代码

app.json

{

  "pages": [

    "pages/index/index",

    "pages/logs/logs"

  ],

  "window": {

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTextStyle": "black",

    "navigationBarTitleText": "小程序window功能演示",

    "backgroundColor": "#ccc",

    "backgroundTextStyle":"light"

  },

  "tabBar": {

    "color": "#666",

    "selectedColor": "#f00",

    "borderStyle":"black",

    "backgroundColor": "#fff",

    "list": [

      {

        "pagePath": "pages/index/index",

        "iconPath": "image/微信图片_20240306105946.png",

        "selectedIconPath": "image/微信图片_20240306105946.png",

        "text": "首页"

      },

      {

        "pagePath": "pages/logs/logs",

        "iconPath": "image/微信图片_20240306110005.png",

        "selectedIconPath": "image/微信图片_20240306110005.png",

        "text": "新闻"

      }

    ]

  },

  "style": "v2",

  "renderer": "skyline",

  "rendererOptions": {

    "skyline": {

      "defaultDisplayBlock": true,

      "disableABTest": true,

      "sdkVersionBegin": "3.0.0",

      "sdkVersionEnd": "15.255.255"

    }

  },

  "componentFramework": "glass-easel",

  "sitemapLocation": "sitemap.json",

  "lazyCodeLoading": "requiredComponents"

}

index.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==20}}</view>
<view>三元运算：{{age==40?'happy':'nohappy'}}</view>
<view wx:if="age>40">1</view>
<view wx:elif="age==40">0</view>
<view wx:else>-1</view>

<template name="stu">
<view wx:for="{{students}}">
<text>姓名：{{item.nickname}}</text>
<text>身高：{{item.height}}</text>
<text>体重：{{item.weight}}</text>
</view>
</template>
<template is="stu"data="{{students}}"/>

index.js

Page({
  //页面的初始数据
  data:{
    name:'lwk',//字符串
    age:30,//数字
    birthday:[{year:1988},{month:11},{date:18}],//数组
    object:{hobby:'computer'},//对象
    num:30,//数字
    students:[
      {nickname:'Tom',height:180,weight:120},
      {nickname:'Anne',height:160,weight:90}
    ]
  }
})