一、实验目标
1、学习使用快速启动模板创建小程序的方法;
2、学习不使用模板手动创建小程序的方法。
二、实验步骤
1、快速启动模板创建小程序
AppID选择测试号,后端服务选择“不使用云服务”,模板选择“JavaScript基础模板”。创建好项目后打开。
打开后就是快速启动模板创建的小程序了
2、不使用模板手动创建小程序
1)前期准备
按照实验文档,将初始文件中多余的文件或代码删除.
2)导航栏设计
可以在app.json中对window属性进行修改。
"navigationBarBackgroundColor"表示导航栏顶部的颜色,将其修改为"#663399",这代表着紫色。
"navigationBarTitleText"表示导航栏中的文字,将其修改为 "lab1"
"navigationBarTextStyle":表示导航栏中文字的颜色,默认是黑色文本,将其修改为"white"(白色)
3)页面设计
在index.wxml中,添加下面代码:
<view class = 'container'>
<image
src = '/images/hen.jpg'
style="width:240rpx;height:240rpx"
mode = 'widthFix'>
</image>
<text>Hello World</text>
<button
type = 'primary'>
获取头像昵称
</button>
</view>
i)image组件
src是头像图片的地址,使用两个花括号代表它是动态数据,也可以不用花括号,直接使用本地相对地址,本地图片需放在与项目同一目录下。类似:<image src = '/images/hen.jpg'></image>
style可以设置image组件的大小,image组件默认宽度320px、高度240px。
mode是图片模式,除了widthFix之后,还有许多模式可以选择,比如:scaleToFill(默认)(缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素),top(裁剪模式,不缩放图片,只显示图片的顶部区域),等等。
ii)text组件
使用两个花括号代表它是动态数据,也可以不使用花括号直接写入文本。类似:
<text>Hello World</text>
type可以设置按钮颜色
iii)
""和’'一样
接下来是修改全局布局,在index.wxss中,加入以下代码
.container{
height:100vh; //高100视窗
display: flex; //flex布局模式
flex-direction: column; //垂直布局
align-items: center; //水平方向居中
justify-content: space-around;//垂直方向分散布局
}
image{
width:300rpx; //图片宽度
border-radius: 50%; //4个角变为圆角形状
}
text{
font-size:50rpx; //字体大小
}
4)获取微信用户信息
将index.wxml的button组件代码改为:
<button
open-type="getUserInfo"
bindgetuserinfo = 'getMyInfo'
type = 'primary'>
获取头像昵称
</button>
在index.js的Page()中添加getMyInfo函数:
getMyInfo: function(e) {
console.log(e.detail.userInfo)
},
5)使用动态数据显示头像和昵称
index.wxml中修改<image>和<text>组件代码:
<image
src = '{{src}}'
style="width:240rpx;height:240rpx"
mode = 'widthFix'>
</image>
<text>{{name}}</text>
在index.js中的data属性中加入:
data: {
src:'/images/hen.jpg',
name : 'Hello World'
},
这是页面的初始数据。
6)更新头像和昵称
修改index.js文件中的getMyInfo函数:
// 获取用户信息
getMyInfo: function(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认,
// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
console.log(res)
this.setData({
src: res.userInfo.avatarUrl,
name: res.userInfo.nickName
})
}
})
},
三、程序运行结果
1、快速启动模板创建小程序
这是快速启动模板创建的小程序。
2、不使用模板手动创建小程序
下面这张是初始图片
点击“获取头像昵称”后
点击“允许”
可以看到,实验十分成功。
四、问题总结与体会
本次实验十分有趣,让我第一次体验制作小程序。中间也遇到了一点问题,比如头像,别人的都是正圆的,就我是椭圆的,于是我就在网上找解决方法,去查找官方文档。最终解决了这个问题,并且让我发现了一些组件的有趣的用法,按钮的颜色阿之类的都可以更改。
总的来说,这次实验对我的帮助很大。