第二章课程总结-CSDN博客

本文链接：https://blog.csdn.net/weixin_47548217/article/details/136460104

2.1小程序的基本目录结构

pages 目录用来存放页面文件

utils 目录用来存放工具包

app.js 逻辑文件

app.json 配置文件

app.wxss 主样式文件

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

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

.wxml文件页面结构文件，用于设计页面的布局、数据绑定等。

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

2.2小程序的开发框架

视图层：由wxml与wxss编写，由组件来进行展示。

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

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

2.3创建小程序页面

在pages目录下新建一个newdemo目录，并在newdemo目录下新建newdemo.js、newdemo.json、newdemo.wxml和newdemo.wxss空文件。

打开newdemo.wxml文件，输入如下内容：

告诉系统这个文件的名称及所处路径，打开项目配置文件app.json，如下代码：

打开newdemo.json文件，输入如下代码：

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

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

2.4配置文件

全局配置文件（app.json）

pages配置项：

pages配置项接受一个数组，用来指定小程序由哪些页面组成，数组的每一项

都是字符串，代表对应页面的“路径”+“文件名”。

window配置项：

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

tabBar配置项：

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

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

networkTimeout配置项：

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

debug配置项：

debug配置项用于开启开发者工具的调试模式，默认为false。

页面配置文件（*.json）

页面配置文件（*.json）只能设置本页面的窗口表现，而且只能设置window配置项的内容。

2.5逻辑层文件

项目逻辑文件（app.js）

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

页面逻辑文件（*.js）

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

2.6页面结构文件

页面结构文件（wxml）是框架设计的一套类似html的标签语言，结合基础组件、事件系统，可以构建出页面的结构，即.wxml文件。

wxml具有数据绑定、条件数据绑定、列表数据绑定、模版、引用页面文件、页面事件等能力。

数据绑定：小程序的数据绑定使用Mustache语法（{{ }}）将变量或运算规则包起来

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

列表数据绑定：列表数据绑定用于将列表中的各项数据进行重复数据绑定

模版：将几个组件结合定义为一个模版，在需要的文件中可以直接使用这个模版

引用页面文件：通过import方式和include方式可以引用另一个页面的页面文件

页面事件：通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信

2.7页面样式文件

页面样式文件（wxss）是基于CSS扩展的样式语言，用于描述wxml的组成样式，决定wxml的组件如何显示。

wxss具有CSS的大部分特性，小程序对wxss做了一些扩充和修改：

尺寸单位、样式导入、选择器

wxss常用属性：

2.8示例代码

app.js

// app.js
App({
  onLaunch(){
    console.log("小程序初始化");
  },
  onShow(){
    console.log("小程序启动");
  },
  onHide(){
    console.log("小程序隐藏");
  }
})

app.json

{
  "pages": [
    "pages/newdemo/newdemo",
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信小程序",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#ccc",
    "backgroundTextStyle":"light"
  },
  "tabBar": {
    "color": "#666666",
    "selectedColor": "#ff0000",
    "backgroundColor": "#ffffff",
    "borderStyle": "black",
    "list": [
      {
        "pagePath": "pages/newdemo/newdemo",
        "iconPath": "images/分类.png",
        "selectedIconPath": "images/分类.png",
        "text": "第一页"
      },
      {
        "pagePath": "pages/news/news",
        "iconPath": "images/导出.png",
        "selectedIconPath": "images/导出.png",
        "text": "第二页"
      }
    ]
  },
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

news.js

Page({
  data:{
    name:'爱丽丝',
    birthday:[{month:12},{date:24}],
    object:{hobby:'骑士'},
    bh1:100,
    bh2:1776,
    students:[
      {names:'klitor',height:173,weight:130},
      {names:'asina',height:169,weight:100}
    ]
  }
})

news.wxml

<view>姓名：{{name}}</view>
<view>
生日：
{{birthday[0].month}}月
{{birthday[1].date}}日
</view>
<view>爱好：{{object.hobby}}</view>
<view>编号：{{bh1+bh2}}</view>
<view>编号比较：{{bh1<=bh2}}</view>
<view>编号判断：{{bh1>=bh2?bh1:bh2}}</view>
<view wx:if="{{bh1<1}}">初级</view>
<view wx:elif="{{bh1==1000}}">中级</view>
<view wx:else>高级</view>
<template name="stu">
  <view wx:for="{{students}}">
<text>昵称：{{item.names}}--</text>
<text>身高：{{item.height}}--</text>
<text>体重：{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>

news.json

{
  "navigationBarTitleText": "骑士列表"
}