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

姓名和学号?
本实验属于哪门课程? 中国海洋大学22夏《移动软件开发》
实验名称? 实验1:第一个微信小程序
博客地址? XXXXXXX
Github仓库地址? https://github.com/enfantsRichesDeprimes/Mobile-Software-Development-Experiment-1

(备注:将实验报告发布在博客、代码公开至 github 是 加分项,不是必须做的)

一、实验目标

1、学习使用快速启动模板创建小程序的方法;2、学习不使用模板手动创建小程序的方法。

二、实验步骤

列出实验的关键步骤、代码解析、截图。

使用模板创建项目

需要新弄一个appid(相当于每一个小程序的唯一标识),不能用之前的

不使用模板创建项目

复制代码
<view class="container">
  <image src='{{image}}' class="diamond-border"></image>
  <text>{{nickName}}</text>
  <button bind:tap="getUserProfile" open-type="getUserInfo" class="a">点击获取头像和昵称</button>
</view>

wxml代码,使用{``{}}形成动态效果,{``{}}中的内容对应 j s js js页面中的 p a g e page page d a t a data data

复制代码
getUserProfile(e) {
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
      success: (res) => {
        this.setData({
          image: res.userInfo.avatarUrl,
          nickName: res.userInfo.nickName
        })
      }
    })
  },

j s js js页面中与按钮绑定的事件,获取到返回结果并赋值给对应变量,从而实现动态改变页面效果

复制代码
.a {
  padding: 10px 16px; /* 调整按钮内边距,根据需要进行修改 */
  min-width: 30px; /* 设置最小宽度为自适应 */
  background-color: beige;
}


.container{
  height: auto;
  width: auto;
  display:flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
.diamond-border {
  margin-top: -35px;
  width: 60vw; 
  height: 60vh;  
  background-color: transparent;
  border: 2px solid black;
}

对于 w x m l wxml wxml控件实现外观格式调整的效果

三、程序运行结果

模板项目

有一个index首页和logs日志页面(可以查看编译的日志信息)

手写项目

点击按钮前

点击按钮后

列出程序的最终运行结果及截图。

四、问题总结与体会

出现了Failed to load local image resource的错误,上网搜索得知是图片文件路径没有找对:.../是寻找同级目录

描述实验过程中所遇到的问题,以及是如何解决的。有哪些收获和体会,对于课程的安排有哪些建议。

相关推荐
Emma歌小白2 天前
如何首次运行小程序后端
微信小程序
赣州云智科技的技术铺子2 天前
【一步步开发AI运动APP】十二、自定义扩展新运动项目1
微信小程序·小程序·云开发·智能小程序
海绵宝宝不喜欢侬3 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
亮子AI3 天前
【小程序】微信小程序隐私协议
微信小程序·小程序
毕设源码-钟学长3 天前
【开题答辩全过程】以 “旧书驿站”微信小程序的设计与开发为例,包含答辩的问题和答案
微信小程序·小程序
nodcloud4 天前
点可云进销存商城如何部署在微信小程序
微信小程序·小程序
项目題供诗4 天前
微信小程序开发教程(八)
微信小程序·小程序
拼图2095 天前
微信小程序——云函数【使用使用注意事项】
微信小程序·小程序
Q_Q5110082855 天前
springboot+python+uniapp基于微信小程序的旅游服务系统景点信息展示 路线推荐 在线预约 评论互动系统
spring boot·python·微信小程序·django·flask·uni-app
海绵宝宝不喜欢侬5 天前
uniapp微信小程序保存海报到手机相册canvas
智能手机·微信小程序·uni-app·canva可画