15331251-技术学习报告<1>

技术学习报告<1>

由于个人主要负责任务是前端的工作,因此第一阶段主要学习了html、css、JavaScript和微信小程序的框架。

1、html的学习

超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页的标准标记语言。
通过html可以编写静态网页,也可以通过编写js脚本添加用户与网页的交互。
以下为一小段html文本:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一个标题</h1>
    <p>我的第一个段落。</p>
</body>
</html>
< !DOCTYPE html >声明为 HTML5 文档
< html > 元素是 HTML 页面的根元素
< head > 元素包含了文档的元(meta)数据
< title > 元素描述了文档的标题
< body > 元素包含了可见的页面内容
< h1 > 元素定义一个大标题
< p > 元素定义一个段落

将看到这样的效果

我的第一个标题


我的第一个段落。


    有关html的其他元素,比如布局相关的<div>元素,链接相关的<a>元素等在网上都有许多详解。

2、css的学习

CSS 指层叠样式表 (Cascading Style Sheets),样式定义了如何显示 HTML 元素,样式通常保存在外部的 .css 文件中。
通过仅仅编辑一个简单的 CSS 文档,外部样式表可以改变站点中所有页面的布局和外观。
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明:

这里写图片描述

选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性是希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
若要在HTML元素中设置CSS样式,需要在元素中设置"id" 和 "class"选择器。
例如:将id="para"的元素样式设为文本居中,字体颜色为红色
#para
{
    text-align:center;
    color:red;
}
将class="center"的元素的样式设为文本居中(class选择器可以应用在多个元素上):
.center {text-align:center;}
 也可以选择将css应用在特定html元素的某个class上:
p.center {text-align:center;}
还有许多属性比如背景(background)、字体(font)、定位(position)等都可以设置。

3、微信小程序的学习

微信小程序包括了下面四种文件:
    .json 后缀的 JSON 配置文件
    .wxml 后缀的 WXML 模板文件
    .wxss 后缀的 WXSS 样式文件
    .js 后缀的 JS 脚本逻辑文件

其中json文件用于配置小程序,比如app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超
时时间、底部 tab 等。
wxml和wxss分别对应html和css的功能,是微信小程序自定义的标记语言,简化并扩展了html和css。

比如,在wxml中可以通过wx:if来条件渲染,通过wx:for来列表渲染。
数据绑定可以通过{{}}将变量括住,然后在.js中初始化、赋值,比如要绑定一个view元素内的显示内容content:
<!-- wxml -->
<view>{{content}}</view>
Page({
 data: {
 /**初始化**/
    content:"内容",
  },

 onLoad: function() {
     this.setData({
        content:"hello",
      })
 }
)}
在wxss中,还新增了尺寸单位rpx免去在不同设备的换算烦恼。

通过js文件可以定义与用户交互的事件响应,可以在各生命周期函数中定义不同动作,比如可以在 onLoad 中获取打开当前页面
所调用的 query 参数,且小程序提供了许多微信相关的api,比如微信支付,获取用户昵称、头像等,十分便利。

小程序用到多少个页面就在pages目录下写多少个文件夹,每个文件夹中都包含上述四种文件,比如pages/logs, 微信客
户端会先根据logs.json 配置生成一个界面,顶部的颜色和文字你都可以在这个 json 文件里边定义好。紧接着客户端就会装
载这个页面的WXML结构和WXSS 样式,最后客户端会装载logs.js,页面就呈现出来了。

小程序有许多组件,和html大都类似,且官方提供了许多文档供学习和使用,是完成作业的一个好的平台。

猜你喜欢

转载自blog.csdn.net/unirrrrr/article/details/79921586