0基础写属于你的第一个微信小程序
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1.注册微信开发者账号,获得APPID
2.下载微信开发者工具,扫码登录管理员账号,创建一个空项目,使用自带的模板即可,编译运行如下
第一个实验便完成了,下面开始第二个实验
3.重新创造一个空项目,删除模板自带的文件的内容。
在app.json中设计导航栏
"pages": [
"pages/index/index"
],
"window": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "第一个手搓小程序",
"navigationBarBackgroundColor": "#663399"
},
4.在index.wxml中进行页面设计,并在index.wxss中调整参数,结果如下图,微信头像为空白
<view class='container'>
<image></image>
<text>Hello world</text>
<button>点击获得头像和昵称</button>
</view>
.container{
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-around;
}
最后添加素材,创建文件夹images,复制粘贴一张照片来填充空白处微信头像
修改wxml文件:
<image src='/image/logo.png'mode='widthFix'></image>
在wxss文件中追加:
image{
width:300rpx;
border-radius:50%;
}
text{
font-size:50rpx;
}
5.逻辑实现,完成按钮button和getMyInfo函数
<button open-type='getUserInfo'bindgetuserinfo='getMyInfo'>点击获得头像和昵称</button>
getMyInfo:function(e){
console.log(e.detail.userInfo)
},
保存后预览,点击console可以输出一段参数即为成功
6.使用动态数据来显示头像和昵称
修改wxml文件:
<image src='{{src}}'mode='widthFix'></image>
<text>{{name}}</text>
修改js文件
Page({
getMyInfo:function(e){
let info=e.detail.userInfo;
this.setData({
src:info.avatarUrl,
name:info.nickName
})
},
操作结束,编译运行
三、程序运行结果
列出程序的最终运行结果及截图。
获取头像和信息成功
四、问题总结与体会
在本次实验中,实验的最后发现无论如何都无法拉取信息成功。查阅资料发现新版本的微信已经不再支持上述功能,通过同学的帮助得知可以在本地配置中调整基础库的版本,进而解决了这个问题