一、实验准备
课程主页：课程主页(gitee.com)
实验文档：lab1.pdf (gitee.com)
二、实验目标
1、学习使用快速启动模板创建小程序的方法；
2、学习不使用模板手动创建小程序的方法。
三、实验方法
1、使用模板创建小程序：
如下图所示，填写项目名称、目录、AppID以及所使用的后端服务之后，选择一个所需的模板即可快速创建小程序：
2、不使用模板创建小程序：
2.1 项目创建
如下图所示，填写项目名称、目录、AppID以及所使用的后端服务之后，即可不使用模板创建小程序：
2.2 项目配置
2.2.1 创建页面文件
项目创建完毕后，在根目录中会生成文件夹pages用于存放页面文件。
具体操作如下：
（1）将 app.json 文件内 pages 属性中的“pages/logs/logs”删除，并删除上一行末尾的逗号。
（2）按快捷键 Ctrl + S 保存当前修改。
2.2.2 删除和修改文件
具体操作如下：
（1）删除 utils 文件夹及其内部所有内容。
（2）删除 pages 文件夹下的 logs 目录及其内部所有内容。
（3）删除 index.wxml 和 index.wxss 中的全部代码。
（4）删除 index.js 中的全部代码，并且输入关键词“page”进行自动补全。
（5）删除 app.wxss 中的全部代码。
（6）删除 app.js 中的全部代码， 并且输入关键词“app”进行自动补全。
四、实验步骤
列出实验的关键步骤、代码解析、截图。
-
创建项目：
- 使用微信开发者工具创建一个新的小程序项目。
- 配置项目的基本信息，如项目名称、AppID等。
-
编写index.wxml：
<!-- pages/index/index.wxml --> <view class='container'> <!-- 显示头像图片 --> <image src='{{src}}' class='imageStyle1'></image> <!-- 显示昵称 --> <text>{{nickName}}</text> <!-- 按钮，用于选择头像 --> <button open-type="chooseAvatar" bindchooseavatar="getMyInfo">点击获取头像</button> <!-- 输入框，用于输入昵称 --> <input type="text" placeholder="请输入昵称" bindinput="bindInput" /> </view> -
编写index.wxss：
/* pages/index/index.wxss */ .container { /* 设置容器高度为视口高度 */ height: 100vh; /* 使用flex布局 */ display: flex; flex-direction: column; align-items: center; justify-content: space-around; } .imageStyle1 { /* 设置图片宽度 */ width: 400rpx; /* 设置图片圆角 */ border-radius: 50%; } text { /* 设置文本字体大小 */ font-size: 50rpx; /* 设置文本颜色 */ color: red; } -
编写index.js：
// pages/index/index.js Page({ data: { // 初始化昵称 nickName: 'Hello World!', // 初始化头像路径 src: '/images/WechatLogo.jpg', newName: '' }, // 获取用户头像信息 getMyInfo: function(e) { console.log("avatarUrl", e.detail.avatarUrl); let info = e.detail; // 更新昵称和头像 this.setData({ nickName: info.nickName, src: info.avatarUrl }); }, // 绑定输入框输入事件 bindInput: function(e) { // 更新昵称 this.setData({ nickName: e.detail.value }); }, /** * 生命周期函数--监听页面加载 */ onl oad(options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady() { }, /** * 生命周期函数--监听页面显示 */ onShow() { }, /** * 生命周期函数--监听页面隐藏 */ onHide() { }, /** * 生命周期函数--监听页面卸载 */ onUnload() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom() { }, /** * 用户点击右上角分享 */ onShareAppMessage() { } }) -
编写App.js：
{ "pages": [ "pages/index/index", "pages/index" ], "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序", "navigationBarBackgroundColor": "#09B831" }, "style": "v2", "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" } -
运行项目：
（1）在微信开发者工具中运行项目，查看首页的页面效果。
（2）测试各个功能是否正常工作，依次检查头像选择功能、昵称输入功能。
五、程序运行结果
列出程序的最终运行结果及截图。
-
页面展示：
- 页面显示一个头像图片、昵称文本、获取头像按钮和输入框。
- 点击按钮可以选择头像，输入框可以输入昵称，昵称会与默认显示“Hello World!”的文本框同时更新。
-
截图：
- 展示页面的截图，显示各个功能的效果。
 图1 首页视图
|
 图2 点击按钮
|
 图3 输入昵称
|
六、问题总结与体会
描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。
-
遇到的问题：
-
问题描述：使用示例中的“getUserInfo”获取用户信息时失败，导致用户昵称显示为“微信用户”，头像显示为灰色。
-
问题原因：通过查阅微信官方文档，发现用户头像和昵称的获取规则已经调整。现在需要通过
getUserProfile接口来获取用户信息，并且只能在页面点击事件（例如按钮上的bindtap回调）中调用。每次请求都会弹出授权窗口，用户同意后才会返回UserInfo。
-
-
解决方法：
-
index.wxml文件中使用如下：
<!-- 按钮，用于选择头像 --> <button open-type="chooseAvatar" bindchooseavatar="getMyInfo">点击获取头像</button> <!-- 输入框，用于输入昵称 --> <input type="text" placeholder="请输入昵称" bindinput="bindInput" /> -
index.js文件中使用如下：
// 获取用户头像信息 getMyInfo: function(e) { console.log("avatarUrl", e.detail.avatarUrl); let info = e.detail; // 更新昵称和头像 this.setData({ nickName: info.nickName, src: info.avatarUrl }); }, // 绑定输入框输入事件 bindInput: function(e) { // 更新昵称 this.setData({ nickName: e.detail.value }); },
-
-
收获与体会：
这次实验作为小程序开发的入门，通过编写一个获取微信头像和昵称的小demo，展示了如何从零开始设计一个微信小程序，从而熟悉了小程序的基本开发框架和常用组件的使用。
标签：index,OUC,微信,昵称,2024,头像,nickName,pages,页面 From： https://blog.csdn.net/m0_73384012/article/details/141333965