实验1 第一个微信小程序

一、实验目标

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

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

二、实验步骤

1. 自动生成小程序

• 在微信开发者工具中选择模板创建项目，如图所示。
  依次填写项目名称、目录和 AppID 就可以新建一个小程序项目。其中项目名称为开发者自定义，仅供开发者工具管理使用；目录即为项目文件存放的路径地址；AppID为管理员在微信公众平台上注册的小程序ID（以登录微信公众平台查看）。
  
• 编译预览小程序。
  

2. 手动创建小程序

• 不选取模板创建新项目
  
  

• 进行页面配置

  • 创建页面文件
    page文件内存储页面文件，一般来说，首页默认命名为index，表示小程序运行的第一个页面。
    
  • 删除index.wxml、index.wxss和app.wxss中的所有代码；
    
    
  • 删除index.js中的所有代码并输入"page"使其自动补全函数；
    
    
  • 删除app.js中的所有代码并输入"app"使其自动补全函数。
    

• 视图设计

  • 导航栏设计

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

  663399使用rgb格式，代表紫色；
  
  对应效果如下：

  • 页面设计

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

    使用组件格式：
    微信头像：<image>组件;
    微信昵称: <text>(文本)组件;
    按钮: <button>(按钮)组件。

由于尚未获得头像图片，临时使用本地图片代替微信头像，之后再通过点击按钮获取微信头像后进行更改。
在项目中新建自定义文件夹images用于存放图片并将本地图片移入等待使用，之后修改<image>组件读取该图片。

• 逻辑实现

  • 获取微信用户信息

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

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

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

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

    在WXML页面修改<image>和<text>组建的代码。
    
    修改JS文件，在现有的data 属性中追加这两个动态数据的值，使其仍然可以显示原先的内容。

  

  更新后预览图不变，如图所示：

  • 更新头像和昵称

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

三、程序运行结果

四、问题总结与体会

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