中国海洋大学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来改变文字内容。

页面设计

页面上需要添加三部分内容：微信头像、微信昵称和”点击获取头像和昵称“按钮。计划使用以下组件：

• 微信头像：（图像）组件
• 微信昵称：（文本）组件
• 按钮：（按钮）组件

相关代码如下：

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 src='/images/logo.png' mode='widthFix'>image>

在WXSS页面追加和组件的相关样式代码：

image {width: 300rpx;border-radius: 50%;
}
text {font-size: 50rpx;
}

至此已实现页面的布局与样式。有关获取头像和昵称数据的操作将从下一部分开始进行介绍。

获取微信用户信息

在WXML页面修改组件的代码，为其追加事件：

<button bindtap = "getProfile">点击获取头像和昵称
button>

注：部分老版本参考资料中给出此处追加事件的代码如下：

<button open-type = 'getUserInfo' bindgetuserinfo = 'getMyInfo'>点击获取头像和昵称
button>

受制于微信小程序开发的规则变更，使用此方法追加事件已无法获得预期效果。

使用动态数据显示头像和昵称

在WXML页面修改和组件的代码，将图片来源和文本内容做成动态数据：

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后，页面可显示用户基本信息：

总结

本次实验主要学习了如何完成微信小程序的注册，对于微信开发者工具的下载和安装，以及简易小程序的制作。后续还要进一步学习小程序的接口调用等知识，完成较为复杂的小程序制作。

本文如有不妥指出，欢迎各位大佬在评论区中积极批评指正！【抱拳】

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！