一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1.创建项目
注册微信小程序后,进入开发管理页面,复制AppID(小程序ID)用于创建小程序。
下载微信开发者工具,登录后创建小程序,选择不使用云服务,模板选择JS基础。
2.视图设计
(1)导航栏设计
app.json代码片段:
{
"pages": [
"pages/index/index"
],
"window": {
"navigationBarBackgroundColor": "#663399",
"navigationBarTitleText": "手动创建",
"backgroundTextStyle": "light"
},
"sitemapLocation": "sitemap.json"
}
(2)页面设计
使用组件如下:1.微信头像: <image>图像组件;2.微信昵称: <text>文本组件;3.按钮: <button>按钮组件。
index.wxml代码片段:
<view class='container'>
<image src='{{src}}' class='abc'></image>
<text>{{name}}</text>
点击获取头像和昵称
<!-- bindtap='getMyInfo' 表示点击按钮时调用自定义函数getMyInfo -->
</view>
index.wxss代码片段,设计布局、图像形状、字体大小:
/* 样式设计 */
.container{
height: 100vh; /高100视窗,这里写100%无效的/
display: flex; /flex布局方法/
flex-direction: column;/垂直布局/
align-items: center;/水平方向居中/
justify-content: space-around;/垂直方向分散布局/
}
.abc{
width: 500rpx;/图片宽度/
border-radius: 50%;/4个角变为圆角形状/
}
text{
font-size: 50rpx;/字体大小/
}
index.js代码片段:
/**
* 页面的初始数据
*/
data: {
name:'Hello World',
src:'/images/weixin.jpg'
},
3.获取用户昵称和头像
index.js代码片段:
getUserProfile(e) {
wx.getUserProfile({
desc: '展示用户信息',
success: (res) => {//将获取到的信息给予变量res
console.log(res)
let info = res.userInfo;//定义变量info等于变量res的userInfo
this.setData({
name: info.nickName,//更改变量name为变量info的nickName,即用户授权的昵称
src:info.avatarUrl,//更改变量info为变量info的avatarUrl,即用户授权的头像
hasUserInfo: true
})
}
})
},
三、程序运行结果
四、问题总结与体会
在这次实验中,我学习了微信小程序的开发。实验过程中,我遇到了以下问题:
-
获取用户信息失败:在初次使用
getUserInfo
接口获取用户昵称和头像时,尽管编写了相关代码,但获取的信息是匿名的,改为使用getUserProfile
接口并且调试时也无法获取到用户的实际信息。解决方法:经过多次调试,我发现问题的根源在于所使用的微信基础库版本。最初使用的版本为3.5.4,调整为2.14.0后,
getUserProfile
接口成功获取到了用户的实际昵称和头像信息。 -
视图设计中的布局问题:在使用
flex
布局时,页面的某些元素无法达到预期的居中效果。解决方法:通过不断调试和调整
flex
的属性,如align-items
和justify-content
,最终实现了页面元素在水平方向和垂直方向的居中布局。 -
调试工具的使用:在使用微信开发者工具进行调试时,部分功能未能正常工作,尤其是
console.log
打印的调试信息不完整。解决方法:通过查看文档和官方论坛,我逐渐熟悉了开发者工具的使用,并学会通过切换不同版本的基础库来解决部分兼容性问题。同时,我也发现清理缓存和重启工具有助于解决部分调试中的问题。
通过本次实验,我掌握了如何使用微信开发者工具手动创建小程序,并对小程序的视图设计、布局方法有了更深的理解。此外,我还学会了如何通过调试工具排查问题,并根据不同的调试结果来调整代码。
我认识到,不同版本的基础库可能会影响接口的使用,及时更新和调整版本是解决问题的关键。在开发过程中,确保正确配置权限并请求用户授权是获取用户信息的前提。通过调试信息和错误日志,可以快速定位和解决问题,提高开发效率。课程的安排对于初学者来说非常有帮助,尤其是在逐步引导我理解和应用各个功能时,提供了很大的支持。