实验一 第一个微信小程序

2024年夏季《移动软件开发》实验报告

一、实验目标

1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1.1 项目创建

填写名称、目录、选择AppID，选择不使用云服务，模板选择JS基础模板

1.2 页面配置

1.2.1 创建页面文件

（1）将app.json中pages属性中的“pages/logs/logs"删除

1.2.2 删除和修改文件

（1）删除utils文件夹及其内部所有内容

（2）删除pages文件夹下的logs目录及其内部所有内容

（3）删除index.wxml和index.wxss中的所有代码

（4）删除index.js中的所有代码，并且输入关键词”page“找到第二个选项按回车键让其自动补全函数

（5）删除app.wxss中的所有代码

（6）删除app.js中的全部代码，并且输入关键词”app“找到第二个选项按回车键让其自动补全函数

1.3 试图设计

（1）导航栏设计

更改app.json中windows属性设置背景（紫色）和字体（白色）

app.json:

    {
      "pages": [
        "pages/index/index"
      ],
      "window": {
        "navigationBarTitleText": "手动创建第一个小程序",
        "navigationBarBackgroundColor": "#663399"
      }
    }

（2）页面设计

页面上的主要内容为“微信头像”的图片、”微信昵称“的文字以及“点击获取头像和昵称”的按钮

• 微信头像࿱