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

news2024/11/13 7:51:03
姓名和学号?
本实验属于哪门课程?中国海洋大学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的错误,上网搜索得知是图片文件路径没有找对:…/是寻找同级目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/910016.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue2+element-ui+springboot编写一个简单的CRUD和上传页面

1.0先看效果图 2.0主功能页面展示 3.0新增功能 4.0更新功能 5.0接口错误提示 前端码云链接:https://gitee.com/xiaojianr/management/tree/master/ 前端拷贝完成需要使用:npm install 命令完成package.json依赖的下载 后端码云链接:https://gitee.com/xiaojianr/manage

21款奔驰E300 L升级ACC自适应巡航系统,解放双脚缓解驾驶疲劳

有的时候你是否厌倦了不停的刹车、加油&#xff1f;是不是讨厌急刹车&#xff0c;为掌握不好车距而烦恼&#xff1f;如果是这样&#xff0c;那么就升级奔驰原厂ACC自适应式巡航控制系统&#xff0c;带排队自动辅助和行车距离警报功能&#xff0c;感受现代科技带给你的舒适安全和…

Ubuntu20.04安装SNMP服务

在线安装snmp 1.安装snmp服务 sudo apt-get install updatesudo apt-get install snmp snmpd snmp-mibs-downloader2.重启SNMP服务 sudo /etc/init.d/snmpd restart3.查看snmp配置 sudo grep -Ev ^$|^# /etc/snmp/snmpd.conf 离线安装SNMP &#xff08;重要&#xff09; 我…

量子非凡去广告接口

量子非凡去广告接口&#xff0c;免费发布&#xff0c;请各位正常调用&#xff0c;别恶意攻击 >>>https://videos.centos.chat/weisuan.php/?url

二、2.打印和内联汇编

调用约定&#xff0c; calling conventions&#xff0c;从字面上理解&#xff0c;它是调用函数时的一套约定&#xff0c;是被调用代码的接口&#xff0c;它体现在 参数的传递方式&#xff0c;是放在寄存器中&#xff1f;栈中&#xff1f;还是两者混合&#xff1f; 参数的传递顺…

Docker 的数据管理与镜像

Docker 的数据管理与镜像 一、Docker 的数据管理1.数据卷2.数据卷容器3.端口映射4.容器互联&#xff08;使用centos镜像&#xff09; 二、Docker 镜像的创建1.基于现有镜像创建2.基于本地模板创建3.基于Dockerfile 创建 三、Dockerfile 操作常用的指令&#xff1a;1.FROM 镜像2…

RTSP/Onvif流媒体服务器EasyNVR安防视频平台一直提示网络请求失败的问题解决方案

EasyNVR平台优秀的视频能力在于通过RTSP/ONVIF协议&#xff0c;将前端接入设备的音视频资源进行采集&#xff0c;并转码成适合全平台、全终端分发的视频流格式&#xff0c;包括RTMP、RTSP、FLV、HLS、WebRTC等格式。 有用户反馈&#xff0c;EasyNVR使用过程中&#xff0c;突然提…

飞书小程序开发

1.tt.showModal后跳转页面 跳转路径要为绝对路径&#xff0c;相对路径跳转无响应。 2.手机息屏后将不再进入onload()生命周期&#xff0c;直接进入onshow()生命周期。 onLoad()在页面初始化的时候触发&#xff0c;一个页面只调用一次。 onShow()在切入前台时就会触发&#x…

代码随想录算法训练营day41 | 343. 整数拆分,96. 不同的二叉搜索树

目录 343. 整数拆分 96. 不同的二叉搜索树 343. 整数拆分 类型&#xff1a;动态规划 难度&#xff1a;medium 思路&#xff1a; dp[i]所用的拆分方法至少已经拆分了两次&#xff0c;比如dp[2]1&#xff0c;小于2&#xff0c;在大于2的数中&#xff0c;最后的2是不会拆的。 …

大数据平台需要做等保测评吗?怎么做?

大数据时代的数据获取方式、存储规模、访问特点、关注重点都有了很大不同&#xff0c;所以保证大数据平台数据安全尤其重要。因此不少人在问&#xff0c;大数据平台需要做等保测评吗&#xff1f;怎么做&#xff1f; 大数据平台需要做等保测评吗&#xff1f; 大数据平台是需要做…

sheel

资料来源&#xff1a; 尚硅谷 2-sheel脚本入门 脚本以#!bin/bash 开头 3-变量 3-1自定义变量 在bash中&#xff0c;变量默认类型为字符串类型&#xff0c;无法直接进行数值运算 c12 echo $c 12 使用 export 可把变量提升为全局环境变量 export 变量名 3-2特殊变量 3-2-1 $n …

posstgresql多表连接

posstgresql多表连接 内连接左外连接右外连接总结 交叉连接九九乘法表 自然连接自连接 内连接 内连接用于返回两个表中匹配的数据行&#xff0c;使用关键字INNER JOIN表示&#xff0c;也可以简写成JOIN select -- 内连接 d.department_id ,e.first_name ,d.department_name…

星球转债上市价格预测

星球转债 基本信息 转债名称&#xff1a;星球转债&#xff0c;评级&#xff1a;A&#xff0c;发行规模&#xff1a;6.2亿元。 正股名称&#xff1a;星球石墨&#xff0c;今日收盘价&#xff1a;29.46元&#xff0c;转股价格&#xff1a;33.12元。 当前转股价值 转债面值 / 转股…

限制 el-input 输入 emoji

1. 电脑如何输入 emoji 表情 ? 快捷键 win; 或 win. 2. 代码实现 <template><el-input v-model"input" placeholder"请输入内容" input"inputChange"></el-input> </template><script> export default {name: D…

mysql数据库root密码遗忘后,修改root密码

目录 方式一&#xff1a; 方式二&#xff1a; 2.1 也可以像我这样&#xff0c;普通用户登录进去后 2.2 执行如下命令&#xff0c;将已知的user1的加密密文更新到root中 2.3 查询数据库 2.4 用root用户登录 2.5 登录正常&#xff0c;但这会root登录进去后&#xff0c;无法…

Java中异常的详细讲解与细节讨论

用一个代码引出异常为什么要使用异常 代码&#xff1a; public static void main(Sting args[]){int n1 1;int n2 0;System.out.println(n1/n2);//这里会抛ArihmaticException,因为除数不能为0,若未用异常处理机制则程序直接结束&#xff0c;后面的代码将不执行。这样很不好…

Java【SpringBoot】SpringBoot 和 Spring 有什么区别? SpringBoot有哪些优点?

文章目录 前言一、Spring 特点二、SpringBoot 特点和优点总结 前言 各位读者好, 我是小陈, 这是我的个人主页, 希望我的专栏能够帮助到你: &#x1f4d5; JavaSE基础: 基础语法, 类和对象, 封装继承多态, 接口, 综合小练习图书管理系统等 &#x1f4d7; Java数据结构: 顺序表, …

二级MySQL(四)——数据表的增删改查

首先认识数据类型&#xff1a; VERCHAR&#xff08;n&#xff09;最长长度为n的&#xff0c;可变长度的&#xff0c;字符串类型 CHAR&#xff08;n&#xff09;固定长度的字符串类型 TIME&#xff1a;时间内类型 DTAE&#xff1a;日期类型 INT&#xff1a;普通大小的整数 …

svg图片如何渲染到页面,以及svg文件的上传

svg图片渲染到页面的几种方式 背景&#x1f7e1;require.context获取目录下的所有文件&#x1f7e1;方式1: 直接在html中渲染&#x1f7e1;方式: 发起ajax请求&#xff0c;获取SVG文件 背景 需要实现从本地目录下去获取所有的svg图标进行预览&#xff0c;将选中的图片显示在另…

合并jar包导致gradle传递依赖失效

目录 零、背景一、合并jar包1.1、自定义一组jar包1.2、自定义合并jar的任务1.3、定义打包jar的任务 二、发布jar包2.1、未合并jar包之前的合并方式2.2、合并jar包之后的合并方式 三、发现问题3.1、确定gradle中的依赖关系3.2、对比maven是否缺失依赖3.3、对比合并前后的pom.xml…