第二章总结

最新推荐文章于 2024-09-05 15:47:39 发布

土豆不土豆.

最新推荐文章于 2024-09-05 15:47:39 发布

阅读量907

点赞数 20

文章标签： notepad++

本文链接：https://blog.csdn.net/weixin_74340708/article/details/136460167

版权

本文详细介绍了微信小程序的目录结构、核心文件及其作用、MINA框架的视图层和逻辑层划分，以及关键配置文件如app.json的功能。此外，还涵盖了页面文件的构成、生命周期函数和数据绑定等关键概念。

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

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

在微信小程序的基本目录结构中，项目主目录下有2个子目录和4个文件

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

1.1主体文件

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

app.js小程序逻辑文件，主要用来注册小程序全局实例。

app. jon小程序公共设置文件，配置小程序全局设置。

app. wxss小程序主样式表文件，类似HTML的. ess文件。

1.2页面文件

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

js 文件页面逻辑文件，在该文件中编写JasScpcp代码控制页面的逻辑。

wxml 文件页面结构文件，用于设计页面的布局、数据绑定等，类似HTML页面中的.html文件

wxss 文件页面样式表文件，用于定义本页面中用到的各类样式表。

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

2.小程序的开发框架

小程序MINA框架将整个系统划分为视图层和逻辑层。视图层(View)由框架设计的标签语言WXML ( WeiXin Markup Language)和用于描述WXML组件样式的wXSS ( WeiXin

Style Sheets)组成，它们的关系就像HTML和CSs的关系。逻辑层( App Service)是MINA

框架的服务中心，由微信客户端启用异步线程单独加载运行。

2.1视图层

MINA框架的视图层由WXML与WXSS编写，由组件来进行展示。

2.2逻辑层

逻辑层用于处理事务逻辑。

2.3数据层

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

3.创建小程序页面

3.1创建第一个页面

4.配置文件

4.1全局配置文件

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

1.pages配置项

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

2.window配置项

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

3.tabbar配置项

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

tabbar配置代码

{
  "pages": [
    "pages/xcx/xcx",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序",
    "navigationBarBackgroundColor": "#fff"
  },
  
"tabBar":{
"color":"#666666",
"selectedColor":"#ff0000",
"borderStyle":"black",
"backgroundColor":"#ffffff",
"list":[
        {
        "pagePath":"pages/xcx/xcx",
        "iconPath":"images/HZ.jpg",
        "selectedIconPath":"images/OIP-C.jpg",
        "text":"首页"
        },
        {
        "pagePath":"pages/logs/logs",
        "iconPath":"images/OIP-C.jpg",
        "selectedIconPath":"images/HZ.jpg",
        "text":"新闻"
        }
     ]
   },
  "style": "v2",
  "componentFramework": "glass-easel",
  "lazyCodeLoading": "requiredComponents"
}

运行结果

4networktimeout配置项

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

5debug配置项

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

5.逻辑层文件

5.1项目逻辑文件

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

5.2页面逻辑文件

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

1.设置初始数据

设置初始数据是对页面的第一一次数据绑定。对象data将会以JSON(JavascriptObjectNo-tation, JS 对象简谱)的形式由逻辑层传至视图层。

2.定义当前页面的生命周期函数

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

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

onShow页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。onReady页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只

会调用一次，代表页面已经准备就绪，可以和视图层进行交互。

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

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

js代码

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

wxml代码

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

运行结果