移动软件开发实验1

成、谋

已于 2022-08-23 09:49:19 修改

阅读量337

点赞数

分类专栏：移动软件开发文章标签：微信小程序小程序前端

于 2022-08-17 16:24:41 首次发布

本文链接：https://blog.csdn.net/m0_52124992/article/details/126384997

版权

移动软件开发专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、实验目标

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

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

二、实验步骤

列出实验的关键步骤、代码解析、截图。

1、项目创建

2、进入开发页面

我们讲看到如下情况

有“编译”和“预览”按钮，“预览‘’后我们即可看到有”二维码“生成，微信扫一扫即可在移动端体验小程序

3、进行页面配置

（一）创建页面文件

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

(2）按快捷键Ctrl十S保存当前修改。

（二）删除和修改文件

具体操作如下:

(1) 删除utils文件夹及其内部所有内容。

(2）删除 pages文件夹下的 logs目录及其内部所有内容。

(3）删除index. wxml 和 index. wxss 中的全部代码。

(4) 删除 index.js中的全部代码,并且输入关键词“page”找到第二个选项按回车键让其自动补全函数。

(5）删除app. wxss中的全部代码。

(6）删除app.js 中的全部代码,并且输入关键词“app”找到第一个选项按回车键让其自动补全函数。

（三）视图设计

（1）导航栏设计小程序默认导航栏是黑底白字的效果，可以通过在app.json中对window属性进行重新配置来自定义导航栏效果。更改后的 app. json文件代码如下:

上述代码可以更改导航栏背景色为紫色、字体为白色,效果如下图所示。

（2）页面设计页面上主要包含3个内容﹐即微信头像﹑微信昵称和“点击获取头像和昵称”按钮。

计划使用如下组件。 ·微信头像:<image >(图像)组件﹔

·微信昵称:<text >(文本)组件﹔

·按钮:<button>(按钮)组件。相关WXML(pages/index/index. wxml)代码片段如下:

相关WXSS(pages/index/index. wxss)代码片段如下:

此时效果图如图所示：

由图可见,此时可以显示文本和按钮。由于尚未获得头像图片,所以无法显示内容。可以临时使用本地图片代替﹐在点击按钮获取微信头像后再更改。

在项目中新建自定义文件夹 images用于存放图片,右击此文件夹﹐选择“硬盘打开”,将本地图片1.png 复制、粘贴进去等待使用。

由图可见,此时可以显示文本和按钮。由于尚未获得头像图片,所以无法显示内容。可以临时使用本地图片代替﹐在点击按钮获取微信头像后再更改。

在项目中新建自定义文件夹 images用于存放图片,右击此文件夹﹐选择“硬盘打开”,将本地图片1.png 复制、粘贴进去等待使用。

修改WXML页面的<image >组件如下: <image src = 'limages/1.png'mode = 'widthFix '></image > 上述代码中src属性用于指定图片来源为根目录下images文件夹中的 1.png图片，mode 属性表示图片随着指定的宽度自动拉伸高度以显示原图的正确比例。

在WXSS页面追加<image >和<text >组件的相关样式代码如下:

当前效果图如下：

（四）逻辑实现

（1）获取微信用户信息在WXML页面修改<button >组件的代码,为其追加获取用户信息组件，代码片段如下:

其中open-type= getUserInfo'表示激活获取微信用户信息功能,然后使用bindgetuserinfo属性表示获得的数据将传递给自定义函数getMyInfo,开发者也可以使用其他名称。在JS页面的 Page()内部追加 getMyInfo 函数,代码片段如下:

getMyInfo: function(e) { console.log( e.detail. userInfo)

}，

（2）使用动态数据显示头像和昵称在WXML页面修改<image >和<text >组件的代码,将图片来源和文本内容使用双花括号({{}})做成动态数据,代码片段如下:

同时修改JS文件,在现有的data属性中追加这两个动态数据的值﹐使其仍然可以显示原先的内容。代码片段如下:

（3）更新头像和昵称修改JS文件中getMyInfo 函数的代码,使获取到的信息更新到动态数据上,代码片段如下:

三、程序运行结果

列出程序的最终运行结果及截图。

四、问题总结与体会

描述实验过程中所遇到的问题，以及是如何解决的。有哪些收获和体会，对于课程的安排有哪些建议。

1、我在修改WXML页面的<image>组件时，由于在图片所在地址前多加了一个空格，导致打不开图片，在写图片路径时尤其要注意要准确书写路径，一个空格也不能多

2、小程序获取的用户信息中昵称图然变成了“微信用户”，而且头像也显示不了，解决方法：

现在采用 wx.getUserProfile 这个 API 来获取头像和用户名，具体代码如下：

getMyInfo: function(){

var that = this;

wx.getUserProfile({

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

success: (res) => {

console.log("获取用户信息成功", res);

that.setData({

src: res.userInfo.avatarUrl,

name: res.userInfo.nickName

})

},

fail: res => {

console.log("获取用户信息失败", res)

}

})

},

效果图如下：