2024年夏季《移动软件开发》实验报告一
一、实验目标
1、学习使用快速启动模板创建小程序的方法；2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1.注册开发者账号
1.首先访问微信公众平台注册一个小程序账号，网址是：mp.weixin.qq.com,然后点击“立即注册”
2.然后点击选择注册的类型为小程序，进入小程序的注册界面。
3.点击注册开发者账号，把相对应的信息填好，完成注册。
4.然后把小程序的对应信息给填好，完善需要填写的信息。
最后的结果是这样的：
2.下载开发工具
1.访问：developers.weixin.qq.com/miniprogram/dev/devtools/download.html
2然后点开稳定版，选择相对应的电脑版本下载即可
3.按照指示登录相关信息，然后验证管理者身份，打开的界面如果是这样就正确了：
3.仿照模版实现简单的小程序
1.自行选择相应的创建位置和模版
2.appID：管理员在微信公众平台注册的小程序id，如果只是测试一下的话，就可以选择测试号
3.进去后就是这样的界面：
4.然后点击中间上面的预览按钮：
5.点击之后就可以对左边的画面进行操作了，点击头像和昵称：
到此就完成了仿照模版的步骤。
4.自行创建一个小程序
1.首先仍然是创建一个小程序，具体方法如上。
2.删除和修改文件：
1）删除index.wxml和index.wxss的全部代码
2）删除index.js的代码，然后输入page补全代码：
3）删除app.js的代码，输入app补全函数
3.导航栏设计
在app.json文件中增加以下代码：
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#663399",
"navigationBarTitleText": "手动创建第一个小程序"
}
}
最后渲染的图片就是：
4.页面设计
在index.wxml和index.wxss文件中添加如下代码：
<view class='container'>
<image src='{
{src}}' mode="widthFix"></image>
<text>{
{
name}}</text>
<button open-type='getUserInfo'bindgetuserinfo = 'getMyInfo'>
点击获取头像和昵称
</button>
</view>
.container{
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
image{
width: 300rpx;
border-radius: 50%;
}
text{
font-size: 50rpx;
}
最后的渲染结果：
5，逻辑实现
修改index.wxml和index.js组件：
<image src='{
{src}}' mode="widthFix"></image>
<text>{
{
name}}</text>
data: {
src:'/images/微信图片_20240819150735.jpg',
name:'Hello World'
},
getMyInfo : function(e){
let info = e.detail.userInfo;
this.setData({
src: info.avatarUrl,
name: info.nickName
})
},
然后就可以运行调试得到最后的结果。
三、程序运行结果
1使用模版的结果：
2.自行创建的结果：
四、问题总结与体会
问题与解决办法
1.开发工具版本的问题
- 问题：由于开发工具版本不匹配的问题，所以导致无法渲染出最后的结果，一直无法显示最后的结果。
- 解决方法：在该工具的详情页中，可以调整版本，只需要调整到旧版本即可解决这个问题。
1.动态样式变量的应用
- 问题：在编写导航栏组件时，我使用了动态样式插值，例如 { {color}} 和 { {background}} 等，但发现这些样式有时未能正确应用，导致界面显示异常。
- 解决方法：我通过在 data 对象中设置默认值并确保在逻辑中及时更新这些变量，最终解决了问题。
2.组件加载问题
- 问题：在启动小程序时，出现了“启动组件按需注入”的提示，导致某些组件未能及时渲染。
- 解决方法：我检查了 app.json 和页面的 json 文件，确保所有引用的组件都已正确声明和引入。同时，我也优化了组件的加载逻辑，减少了不必要的按需加载设置。
收获和体会
- 熟悉微信小程序的开发流程：通过这次实验，我对微信小程序的开发流程有了更深入的了解和入门，更加清楚的知道了如何对微信小程序进行开发以及一些注意事项。
- 调试能力的提升：在遇到问题时，通过分析代码和使用调试工具，我能够更有效地找到问题的根源并进行修复。这提高了我在开发过程中解决实际问题的能力。