一、实验报告概述

1.1 实验目的

本实验旨在通过基于微信平台的小程序开发与调试让学生掌握微信小程序的基本开发流程、调试方法以及相关技术，培养学生在实际项目中应对疑问的能力。

1.2 实验环境

操作系统：Windows/Linux

开发工具：微信开发者工具

编程语言：JavaScript、WXML、WXSS

二、实验内容与步骤

2.1 创建小程序项目

（1）打开微信开发者工具点击“新建项目”按。

（2）输入项目名称、选择项目存放路径，选“建立普通快速启动模板”，点击“确定”按。

（3）项目创建成功后进入项目目录，可看到以下文件结构：

```

project

│

├── miniprogram

│ ├── .js

│ ├── .json

│ ├── .wxss

│ ├── images

│ │ └── icon.png

│ ├── pages

│ │ ├── index

│ │ │ ├── index.js

│ │ │ ├── index.json

│ │ │ ├── index.wxml

│ │ │ └── index.wxss

│ │ └── logs

│ │ ├── logs.js

│ │ ├── logs.json

│ │ ├── logs.wxml

│ │ └── logs.wxss

│ ├── utils

│ │ └── util.js

│ ├── project.config.json

│ └── sitemap.json

└── cloudfunctions

```

2.2 编写小程序代码

（1）在.js中编写以下代码：

```javascript

({

onLaunch: function () {

console.log(' Launch')

},

onShow: function () {

console.log(' Show')

},

onHide: function () {

console.log(' Hide')

},

globalData: {

userInfo: null

}

})

```

（2）在.json中编写以下代码：

```json

{

pages: [

pages/index/index,

pages/logs/logs

],

window: {

backgroundTextStyle: light,

navigationBarBackgroundColor: #fff,

navigationBarTitleText: WeChat,

navigationBarTextStyle: black

}

}

```

（3）在.wxss中编写以下代码：

```css

.contner {

padding: 50px;

font-size: 14px;

line-height: 1.5;

color: #333;

}

```

（4）在pages/index/index.js中编写以下代码：

```javascript

Page({

data: {

logs: []

},

onLoad: function () {

this.setData({

logs: (wx.getStorageSync('logs') || []).concat(Date.now())

})

}

})

```

（5）在pages/index/index.wxml中编写以下代码：

```html

微信小程序开发与调试实验

{{item}}

```

（6）在pages/index/index.wxss中编写以下代码：

```css

.contner {

padding: 50px;

font-size: 14px;

line-height: 1.5;

color: #333;

}

```

2.3 调试小程序

（1）打开微信开发者工具，点击“编译”按，查看编译结果。

（2）在开发者工具中，点击“调试”按进入调试模式。

（3）在调试模式下，可以查看小程序的运行状态、调试代码、查看网络请求等。

三、实验报告总结

3.1 实验成果

通过本实验咱们成功创建了一个微信小程序项目并编写了相关代码。在微信开发者工具中，咱们可以看到小程序的运行效果，实现了基本的页面布局和功能。

3.2 实验心得

（1）微信小程序开发期间，要熟练掌握JavaScript、WXML、WXSS等编程语言。

（2）在开发期间，要关注代码的规范性，遵循微信小程序的开发规范。

（3）在调试进展中，要充分利用微信开发者工具提供的调试功能，及时发现疑惑并解决疑惑。

（4）微信小程序开发需要具备一定的前端开发基础，对HTML、CSS等知识有一定的理解。

四、微信小程序开发实验总结报告

4.1 实验目的

本实验旨在让学生掌握微信小程序的基本开发流程、调试方法以及相关技术，培养学生在实际项目中解决疑问的能力。

4.2 实验内容

本实验主要涵创建小程序项目、编写小程序代码、调试小程序等环节。

4.3 实验