2022年夏季《移动软件开发》实验报告
姓名和学号? | xxx,22xxx6 |
---|---|
本实验属于哪门课程? | 中国海洋大学24夏《移动软件开发》 |
实验名称? | 实验1:第一个微信小程序 |
博客地址? | XXXXXXX |
Github仓库地址? | XXXXXXX |
一、实验目标
1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。
二、实验步骤
列出实验的关键步骤、代码解析、截图。
实验准备
注册开发者账号
在微信公众平台注册,选择小程序,填写信息并登记
mp.weixin.qq.com
填写小程序信息
包括名称,简称,简介等内容
注意在填写小程序类目的时候如果选择了游戏类就无法再更改,注意选择正确的类目
下载开发工具
developers.weixin.qq.com/miniprogram/dev/devtools/download.html
使用模板创建小程序
- 选择合适的目录存放项目
- appid可以在公众平台小程序页面的开发->开发管理中找到对应appid
- 本实验不使用云服务
- 选择合适的模板
编译完成后如下所示,如果不出现可以点击编译
在模拟器中可以预览效果
手动创建小程序
创建
创建项目时可以直接选择不使用模板
配置文件
由于新版本与旧版本稍有不同,所以实验指导有部分文件不自带,可以忽略.
在page文件夹中找到index
- 清除index.js中的内容,输入page并自动补全(会自动填充一些内容)
- 清除index.wxml和 index.wxss中的内容
找到app一系列文件 - 清除app.js文件中的所有内容,输入app并自动补全
- 清除app.wxml中的所有内容
视图设计
创建images文件夹(与page文件夹层级相同),在其中添加想要的默认图片.
总共使用image,imput,button三个组件.
在index.wxml中输入如下内容
<view class = 'container'>
<image src = '/images/<你的图片文件名>'mode ='widthFix' ></image>
<button 获取头像</button>
<input type = "nickname" class="weui-input" placeholder="请输入昵称" />
</view>
相应的我们要在index.wxss中指定组件的样式
.container{
height: 100vh;
display: flex;//组件的布局方式为flex
flex-direction: column;//列
align-items: center;//居中
justify-content: space-around;//分散布局
}
image{
width: 300rpx;
border-radius: 50%;
}
text{
font-size: 50rpx;
}
view input{
border: 1px solid rgb(7, 96, 102);
}
现在看起来像是这样
其中导航栏的样式是在app.json中指定
"window": {
"navigationBarBackgroundColor": "#48D1CC",//绿宝石色
"navigationBarTitleText": "手动创建小程序"
}
逻辑实现
<view class = 'container'>
<image src = '{{src}}'mode ='widthFix' ></image>
<button open-type="chooseAvatar" bindchooseavatar = "getInfo">点击获取头像</button>
<input type = "nickname" class="weui-input" placeholder="请输入昵称" />
</view>
在index.wxml中完善各个组件的属性
src在index.js的data中声明以实现图像的动态变化
data: {
src:'/images/logo.jpg',
},
open-type 和 bindchooseavatar如上设置,表示点击按钮选择图像,并调用getInfo自定义函数
getInfo如下实现
getInfo(e){
let info = e.detail
this.setData({
src:info.avatarUrl
})
},
三、程序运行结果
四、问题总结与体会
由于微信的版本更新,获取用户信息的api更新,对于自动填写头像和昵称功能的实现,使用chosseavatar的思路来实现.
对于开发工作,要及时阅读提供的公开文档,关注api的更新,以保证最后程序的可用性.