第二章 微信小程序开发基础

小程序的基本目录结构

主体文件

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

app.js      小程序逻辑文件

app.json  小程序公共设置文件

app.wxss  小程序主样式表文件

页面文件

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

.js文件       页面逻辑文件

.wxml文件  页面结构文件

.wxss文件  页面样式表文件

.json文件   页面配置文件

小程序的开发框架 

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

小程序MINA框架示意图

视图层

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

逻辑层

    逻辑层用于处理事务逻辑。对于微信小程序而言，逻辑层就是所有.js脚本文件的集合。
微信小程序在逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。

数据层

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

创建小程序页面

    启动微信开发工具，创建新的项目，单机“确定”按钮后就创建成功了

创建第一个页面文件

    继续在项目主目录下新建一个pages目录，在pages目录下新建一个news目录，并在news目录下新建news.js、news.json、news.wxml、news.wxss空文件

 打开项目配置文件app.json，输入一下代码：

{
  "pages": [
    "pages/news/news",
    "pages/logs/logs"
  ],
  "window": {
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle":"black",
  "navigationBarTitleText": "微信小程序",
  "backgroundColor": "#ccc",
  "backgroundTextStyle":"light"
}

 打开news.json文件，输入一下代码：

{
  
}

 打开news文件，输入代码：

Page({
  
})

 运行结果：

配置文件

1. 全局配置文件：

2. window配置项： 

 在app.json中设置如下window配置项代码：

{
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle":"black",
  "navigationBarTitleText": "微信小程序-新闻",
  "backgroundColor": "#ccc",
  "backgroundTextStyle":"light"
  
}

 3. taBar配置项：

 在app.json文件中设置如下配置项代码：

"tabBar":{
    "color": "#666666",
    "selectedColor": "#ff0000",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/news/news",
        "iconPath": "images/微信图片_20240304191451.png",
        "selectedIconPath": "images/微信图片_20240304191451.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "iconPath": "images/微信图片_20240304191451.png",
        "selectedIconPath": "images/微信图片_20240304191451.png",
        "text": "新闻"
      }
    ]

  }
}

 配置后的运行效果如图：

 4. networdTimeout配置项：

 5.debug配置

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

配置news.wsm代码如下：

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

 运行效果图：

算术运算 逻辑运算 三元运算

 代码如下：

<view>算术运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{1==2 ? 3:4}}</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}}"></template>

     运行效果：

 冒泡事件：

 WXSS常用属性：