微信小程序实践——实验1获取用户信息

一、创建项目

在微信公众平台注册账号，选择小程序并下载编辑器

我下载的是第一个稳定版

打开编辑器

注意AppID,在 开发管理--开发设置 中找到自己的AppID

建好之后

 

 微信开发者工具提供了快速启动模板，帮助开发者自动生成代码

二、手动创建小程序

任务：点击按钮获取用户的头像和姓名

 首页默认命名index,index是小程序运行的第一个页面

1. 初期准备

 (1)将app. json文件内pages属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号。

一般来说首页默认命名为index,表示小程序运行的第一个页面;其他页面名称可以自定义。本项目只需要保留首页(index)即可。
具体操作如下:
(1)将app. json文件内pages属性中的“pages/logs/logs”删除,并删除上一行末尾的逗号。
(2）按快捷键Ctrl＋S保存当前修改。
(3)删除utils文件夹及其内部所有内容。
(4）删除pages文件夹下的 logs目录及其内部所有内容。(3）删除index. wxml 和 index. wxss中的全部代码。
(5）删除index. js 中的全部代码,并且输人关键词“page”找到第二个选项按回车键让其自动补全函数
(6）删除app. wxss中的全部代码。
(7）删除app. js 中的全部代码,并且输人关键词“app'找到第一个选项按回车键让其自动补全函数
 

 2. 导航栏设计

 

3. 页面设计

 

 image的添加：在项目中新建一个文件夹

找到项目的文件目录中的该文件夹，并将选中的图片拖入即可

注：图片最好不要超过2M

此时的页面：

 

4. 获取微信用户信息 

 修改组件，添加获取用户信息事件

 在JS界面的Page（）内部追加getMyInfo函数

data中是首页初始头像和姓名

在微信开发者工具更新后，getUserInfo无法获取到用户的信息，换为使用getUserProfile

如果用户同意授权，则成功获取到用户信息 

展示：

点击button前：

点击后：

 

成功获取用户的头像和姓名