OUC软件开发实验1

本实验来自于周文洁老师的《微信小程序开发实战》第二章。包括两个创建小程序的项目实例，一是使用快速启动模板创建小程序。二是手动从零开始创建小程序。这两个项目的主要功能都是点击按钮获取当前微信用户的头像和昵称。

2.1自动生成小程序

下载安装微信开发者工具，去微信公众平台注册（主要是为了后续发布个人小程序）。
然后就按部就班创建即可。

实际效果：

2.2手动创建小程序

2.2.1 项目创建

仍然和自动创建一样也选择空白文档，语言选择JavaScript

2.2.2 页面配置

1.将app.json文件内pages属性中的“pages/logs/logs”删除，还有上一行末尾的逗号

2.删除和修改一些文件

2.2.3 视图设计

1.在app.json中配置导航栏效果

2.设计页面

在index.wxml和index.wxss中添加相关代码

在创建images文件，导入本地图片，在wxml中更改默认头像，在wxss追加组件相关

2.2.4 逻辑实现

在wxml页面修改组件的代码，为其能追加获取用户信息事件，在js页面的page（）内部追加getMyInfo函数

可惜由于版本变迁，原先教程中收集用户头像和昵称的方法已经无法使用

后面更新了一下getMyInfo函数

 // 获取用户信息

 getMyInfo: function(e) {

  // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，

  // 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗

  wx.getUserProfile({

   desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写

   success: (res) => {

​    console.log(res)

​    this.setData({

​     src: res.userInfo.avatarUrl,

​     name: res.userInfo.nickName

​    })

   }

  })

 },

实现了获取用户头像昵称：

在最后贴一个源码