中国海洋大学2023年夏季《移动软件开发》实验报告1
Info: 韩翔 21020007023
Date: 2023-08-21
微信小程序的注册
打开mp.weixin.qq.com进行微信小程序的注册:
填写好小程序中要求的各类基本信息,为自己的小程序命名,找出小程序的类目。
以下是我自己创建的小程序的相关资料,供参考:
在填写好基本信息后,小程序的创建工作就完成了。
微信开发者工具的下载与安装
从官网下载微信开发者工具:微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)
这里我于2023年8月21日下载的v1.06.2307260(稳定版)。选择适配自己电脑的版本进行下载(比如我选的是Windows 64)
点击页面中的超链接完成下载。下载后根据系统提示安装。(一般情况下需要修改安装路径,建议避开系统盘)
第一个自己的小程序
小程序初始化
继上述下载完成后,开始创建小程序。
单击图片中的加号,选取基于JavaScript的模板进入开发。
进入主页面后,需要对原有模板进行以下处理:
- 删除utils文件夹及其内部所有内容
- 删除pages文件夹下的logs目录及其内部所有内容
- 删除index.wxml和index.wxss中的全部代码
- 删除index.js中的全部代码,并且输入关键词page生成模板(可借助自动补齐)
- 删除app.wxss中的全部代码
- 删除app.js中的全部代码,并且输入关键词app生成模板(可借助自动补齐)
完成上述步骤后,可以认为是做好了开发的准备。
导航栏设计
通过更改app.json中对window属性进行重新配置来达到自定义导航栏的目的。
- 任务:将导航栏底色调整为#663399(一种紫色)
通过调节"navigationBarBackgroundColor"的value来改变底色。通过改变"navigationBarTitleText"的value来改变文字内容。
页面设计
页面上需要添加三部分内容:微信头像、微信昵称和”点击获取头像和昵称“按钮。计划使用以下组件:
- 微信头像:<image>(图像)组件
- 微信昵称:<text>(文本)组件
- 按钮:<button>(按钮)组件
相关代码如下:
WXML(pages/index/index.wxml):
<view class='container'>
<image></image>
<text> Hello World </text>
<button>
点击获取头像和昵称
</button>
</view>
WXSS(pages/index/index.wxss):
.container {
height: 100vh;
display: flex;
flex-direction: column;
aligh-items: center;
justify-content: space-around;
}
目前可以显示文本和按钮。由于尚未获取头像信息,故需要通过本地图片代替。方法如下:
- 在项目中新建自定义文件夹images
- 将本地图片logo.png复制粘贴进文件夹中
- 修改WXML页面的<image>组件如下:
<image src='/images/logo.png' mode='widthFix'></image>
在WXSS页面追加<image>和<text>组件的相关样式代码:
image {
width: 300rpx;
border-radius: 50%;
}
text {
font-size: 50rpx;
}
至此已实现页面的布局与样式。有关获取头像和昵称数据的操作将从下一部分开始进行介绍。
获取微信用户信息
在WXML页面修改<button>组件的代码,为其追加事件:
<button bindtap = "getProfile">
点击获取头像和昵称
</button>
注:部分老版本参考资料中给出此处追加事件的代码如下:
<button open-type = 'getUserInfo' bindgetuserinfo = 'getMyInfo'>
点击获取头像和昵称
</button>
受制于微信小程序开发的规则变更,使用此方法追加事件已无法获得预期效果。
使用动态数据显示头像和昵称
在WXML页面修改<image>和<text>组件的代码,将图片来源和文本内容做成动态数据:
WXML:
<view class = 'container'>
<image src = '{{src}}' mode = 'widthFix'></image>
<text> {{name}} </text>
<button bindtap="getProfile">点击获取头像和昵称</button>
</view>
JS文件:
data: {
src:'/images/logo.png',
name: 'Hello World'
},
更新头像和昵称
在JS界面的Page()内部追加函数getMyInfo,代码片段如下:
getProfile: function(e) {
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中
success: (res) => {
console.log(res)
this.setData({
src: res.userInfo.avatarUrl,
name: res.userInfo.nickName
})
}
})
}
至此此项目便已完成!😀
效果:
单击下方button后,页面可显示用户基本信息:
总结
本次实验主要学习了如何完成微信小程序的注册,对于微信开发者工具的下载和安装,以及简易小程序的制作。后续还要进一步学习小程序的接口调用等知识,完成较为复杂的小程序制作。
本文如有不妥指出,欢迎各位大佬在评论区中积极批评指正!【抱拳】