24夏季移动软件开发-实验一

2022年夏季《移动软件开发》实验报告

姓名：xxx 学号：220xx6

姓名和学号？	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的更新,以保证最后程序的可用性.