一、实验目标

1、学习使用快速启动模板创建小程序的方法;

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

二、实验步骤

1. 自动生成小程序

  • 在微信开发者工具中选择模板创建项目,如图所示;

    依次填写项目名称、目录和 AppID 就可以新建一个小程序项目。其中项目名称为开发者自定义,仅供开发者工具管理使用;目录即为项目文件存放的路径地址;AppID为管理员在微信公众平台上注册的小程序ID(以登录微信公众平台https://mp.weixin.qq.com查看)。

    image-20250825134403333
  • 编译预览小程序。

    image-20250825135537636

2. 手动创建小程序

  • 不选取模板创建空白项目

    image-20250825140243487 image-20250825140435939
  • 进行页面配置

    • 创建页面文件

      page文件内存储页面文件,一般来说,首页默认命名为index,表示小程序运行的第一个页面。

      image-20250825141119412
    • 删除index.wxmlindex.wxssapp.wxss中的所有代码;

      image-20250825141713756image-20250825141748090

    • 删除index.js中的所有代码并输入"page"使其自动补全函数;

      image-20250825141512906image-20250825141626784

    • 删除app.js中的所有代码并输入"app"使其自动补全函数。

      image-20250825141858454
  • 视图设计

    • 导航栏设计

      app.json文件中对windows属性进行重新配置来自定义导航栏效果,将小程序导航栏更改为紫色背景及白色字体。

      663399使用rgb格式,代表紫色;

      image-20250825142757592

      对应效果如下:image-20250825143203516

    • 页面设计

      首先,在小程序中添加微信头像、昵称及“点击获取头像和昵称”按钮三个组件,并将其设置为列项居中排列。

      使用组件格式:

      • 微信头像:<image>组件;

      • 微信昵称: <text>(文本)组件;

      • 按钮: <button>(按钮)组件。

      image-20250825144902724

      由于尚未获得头像图片,临时使用本地图片代替微信头像,之后再通过点击按钮获取微信头像后进行更改。

      在项目中新建自定义文件夹images用于存放图片并将本地图片移入等待使用,之后修改<image>组件读取该图片。

      image-20250825150038680 image-20250825150358220
  • 逻辑实现

    • 获取微信用户信息

      WXML页面修改<button>组件的代码,其中open-type= get User Info'表示激活获取微信用户信息功能,然后使用 bindgetuserinfo属 性表示获得的数据将传递给自定义函数 getMyInfo, 名称可自定义。

      image-20250825154954451

      JS页面的Page()内部追加getMyInfo函数

      image-20250825155039146

      保存后预览项目,如果点击按钮后 Console 控制台能够成功输出一段数据,就说明获取成功。

      image-20250825155452602
    • 使用动态数据显示头像和昵称

      在WXML页面修改<image><text>组建的代码;

      image-20250825155515375

      修改JS文件,在现有的data 属性中追加这两个动态数据的值,使其仍然可以显示原先的内容;

      image-20250825155945307

      更新后预览图不变,如图所示:image-20250825153228796

    • 更新头像和昵称

      修改JS文件中getMyInfo 函数的代码,使获取到的信息更新到动态数据上。

      image-20250825160158123

      点击按钮后,头像和昵称成功更新:

      image-20250825160245678

三、程序运行结果

img image-20250825153228796

四、问题总结与体会

  1. 学会了微信开发者工具的基础操作,能按步骤新建项目,用快速启动模板快速看到可运行的小程序效果,初步了解了小程序开发的基本流程。
  2. 通过手动创建小程序,我大致了解了不同文件的作用,也掌握了修改配置(如导航栏样式)和删减多余文件的方法,对小程序的配置逻辑有了简单的认识。
  3. 尝试用基础组件搭建页面,用 WXSS 调 用户信息、更新页面数据,理解了一些简单原理。