移动开发作业实验1

实验1：第一个微信小程序

一、实验目标

包括两个创建小程序的项目实例，一是使用快速启动模板创建小程序。二是手动从零开始创建小程序。这两个项目的主要功能都是点击按钮获取当前微信用户的头像和昵称

二、快速启动模板创建小程序

1. 首先需要找到自己的AppID
   
2. 然后使用模板自动创建项目
   
3. 成功创建

三、手动从零开始创建小程序

3.1 配置文件

1. 创建项目的步骤和之前相同，但是之后需要删除一些配置文件，
2. 具体操作如下
   1. 把app.json文件内pages属性中的“pages/logs/logs”删除
   2. 删除utils文件夹及其内部所有内容
   3. 删除pages文件夹下面的logs目录及其内部所有内容
   4. 删除index.wxml和index.wxss的全部代码
   5. 删除index.js中的全部代码，并且输入关键词page找到第二个选项自动补全函数
   6. 删除app.wxss中的全部代码
   7. 删除app.js中的全部代码，并且输入关键词app找到第一个选项自动补全函数

3.2 视图设计

小程序默认的导航栏默认是白底黑字的效果，可以通过在app.json中对window属性进行重新配置来自定义导航栏效果

• 基本页面设计

1. 修改页面标题的效果

1. 设计页面的主要元素：微信头像、微信昵称和点击获取头像和昵称按钮，
   分别使用image、text、button组件

2. 设置了按钮和文字之后的效果如下
   

3. 设置了默认头像之后
   

• 页面逻辑实现

1. 在WXML页面修改button组件的代码，为其追加用户信息事件，绑定了事件之后，成功打印出了用户的信息

1. 绑定了点击事件之后获取到的信息如下

四、实验体会

按照老师所给的文档步骤走，还是能够比较容易地完成此次实验，因为文档中讲解的都比较详细。唯一麻烦的地方就是，新版的微信开发者工具和文档所给的界面有所不同，所以使得有些操作比较模糊，需要自己去尝试理解一些步骤。还有就是获取用户信息的函数一直调用失败，通过老师说的使用getUserProfile方法，然后还需要更改button的绑定方法便可以成功获取到用户的信息。通过这次小实验，学习到了创建小程序的两种方法：自动创建和手动创建，并且对小程序中的各个文件的作用有了大致的了解，为接下来的进一步学习的打下了基础。