中国海洋大学夏季《移动软件开发》实验报告1
Info: 韩翔 21020007023
Date: -08-21
微信小程序的注册
打开mp.进行微信小程序的注册：
填写好小程序中要求的各类基本信息，为自己的小程序命名，找出小程序的类目。
以下是我自己创建的小程序的相关资料，供参考：
在填写好基本信息后，小程序的创建工作就完成了。
微信开发者工具的下载与安装
从官网下载微信开发者工具：微信开发者工具下载地址与更新日志 | 微信开放文档 ()
这里我于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后，页面可显示用户基本信息：
总结
本次实验主要学习了如何完成微信小程序的注册，对于微信开发者工具的下载和安装，以及简易小程序的制作。后续还要进一步学习小程序的接口调用等知识，完成较为复杂的小程序制作。
本文如有不妥指出，欢迎各位大佬在评论区中积极批评指正！【抱拳】
