一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1.创建项目。
2.删除模板自带的所有文件,并创建三个全局文件,分别是app.js,app.json,app.wxss。
3.创建pages目录文件,在其中新建index目录文件,再在里面创建页面,会自动生成四个文件,分别是js、json、wxml、wxss。
4.在index.wxml中,把内容封装在view内部,有三部分,分别是图片、文字和按钮。
<view class='container'>
<image src='/images/weichat.jpg'></image>
<text>Hello world</text>
<button>点击获取头像和昵称</button>
</view>
image是图片,text是文字,button是按钮。
class='container',用于后续对整个页面的样式设计。
为了输出图片,需要在项目文件夹中新建一个image目录文件,里面用于存储小程序中需要用到的图片。
5.在index.wxss中,进行样式设计。
.container{
height:100vh;
display:flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
image{
width:500rpx;
border-radius:50%;
}
text{
font-size: 50rpx;
color:blue;
}
6.改写index.wxml中的三部分。图片和文字是由访问微信权限得来的头像和昵称,按钮要实现访问的逻辑功能。
<view class='container'>
<image src='{{src}}'></image>
<text>{{name}}</text>
<button open-type='getUserInfo' bindgetuserinfo='getMyInfo'>点击获取头像和昵称</button>
</view>
原先的图片和文字都由变量来替代,open-type='getUserInfo'表示激活获取微信用户信息功能,bindgetuserinfo='getMyInfo'表示获得的数据将传递给自定义函数getMyInfo,这个函数会在后续编写。
7.在index.js中,改写data模块,编写getMyInfo函数。
data: {
name:'Hello world',
src:'/images/weichat.jpg'
},
getMyInfo:function(e){
console.log(e.detail.userInfo)
let info=e.detail.userInfo;
this.setData({
name:info.nickName,
src:info.avatarUrl
})
},
data中给name和src设置初始值,getMyInfo函数中将获取到的nickName赋值给name,avatarUrl赋值给src。
三、程序运行结果
此时已经基本完成该小程序。测试一下。
发现无法获取到用户的头像和昵称。这是因为自2022年10月25日24时起,小程序wx.getUserProfile接口被收回,通过wx.getUserProfile接口获取用户头像将统一返回默认灰色头像,昵称将统一返回“微信用户”。所以我们需要将基础库调至2.27.1以前,这样就可以正常显示。
四、问题总结与体会
在完成该实验的过程中,我遇到了一个问题,那就是在微信小程序中无法获取真实的用户头像和昵称。由于微信平台政策的更新,我了解到自2022年10月25日起,通过wx.getUserProfile接口获取用户信息的方式发生了变化,导致我无法直接获取用户的真实头像和昵称。之后通过同学的帮助,我知道了只需要降低基础库的版本就可以解决该问题。
这次实验,通过手动创建小程序,我深入理解了小程序的文件结构和运行机制,包括页面的创建、数据绑定和事件处理。在编写index.wxss时,我学会了基础的页面布局;在index.js中编写逻辑时,我加深了对JavaScript对象、函数和事件处理的理解,提升了我的编程能力。
总的来说,这次实验让我基本掌握了微信小程序的开发流程,并对移动应用开发有了更深入的认识。我期待将这些新技能应用到更复杂的项目中,并在未来的开发工作中不断进步和创新。