小程序开发Vol2-入门小白应该从哪开始学小程序开发?

  • • 发表于 6个月前
  • • 作者 一人
  • • 1270 次浏览
  • • 5 条评论
  • • 最后编辑时间 6个月前
  • • 来自 [技 术]

“跳一跳”小游戏中,玩家通过长按与放开来控制小人前进。
那么,界面里我们所看到的每个元素是如何呈现出来的呢?
小人和盒子随着长按的时间长短,产生不同程度的弹性形变是如何实现的呢?
各种音效又是如何触发的呢?

从开篇的问题,我们不难发现,“跳一跳”的实现原理大致可以分为界面元素、元素的外观属性和动作交互,在小程序框架里它们分别被称为视图层、样式层和逻辑层,分别对应的开发语言是WXML、wxss和javascript。

如上图便是通过一段简单的WXML代码来呈现的小程序界面。
WXML提供了如<view><image><swiper>等一整套视图组件帮助我们完成前端界面的开发。作为小程序开发者,我们可以通过编写WXML,让我们的手机“知道”需要向我们的用户展现一个什么样的界面。

接下来,我们通过增加JS代码,同时与WXML绑定,来实现以上大家所看到的效果:当你不停地点击按钮,可以看到“Hello World”的位置在不停地改变。

作为初学者,我们可以这样形象地理解JS的作用:JS就是让机器知道用户在界面上做了一个什么样的动作,同时借助JS让机器对用户的动作作出反馈。(人和机器交流的桥梁)
在实际的开发中,我们会灵活地借助小程序所提供的API进行编程,这将使我们的开发效率大大提高;而JS与WXML的相关组件进行绑定,便成为一个带有交互功能的小程序。

事实上,小程序是基于微信中的webkit(一种开源的浏览器引擎)而存在的,因而其本质上相当于web应用,而小程序的开发语言是由原生的HTML、CSS、JS等封装而成的,所以学习并掌握这三门前端常用语言对小程序开发是很有必要的。

当然了,正因为小程序开发语言是经过封装的前端语言,故小程序开发的学习曲线相对更平滑,从入门到开发所需的时间更短。接下来,我们先简单认识一下HTML、CSS和JS。

01 HTML

HTML(HyperText Markup Language)——超文本标记语言,顾名思义是一种通过标记符号来表示网页整体结构、内容及各部分外观的语言。
HTML主要由头部<head>和正文<body>两部分组成,而其中的代码由我们希望网页呈现的内容、功能和各种成对的标签所组成(有部分标签是单个出现的,如过行标签<br/>)


<html>
 <head>
    <title>一人开发小应用</title>
    <a name="top"></a>
 </head>

  <body>
     <h1><big>小程序开发培训</h1>
     <p><small>小程序开发,一个月从零基础入门到大神开发<br/>
     </p>
    点击这里浏览跳转学习:<a  href="#studycenter">前去学习</a>
    <div style='margin-top:5000px'></div> 
     <a name="studycenter">学习中心</a>
     <a href="#top">返回顶部</a>
     <div style='margin-top:300px'></div>
</body>
</html>

如上,便是一段非常简单的HTML,除常见的标题、段落和字号标签(如<h1>、<p>、<big>等)外,还包含了锚标签<a>,可以通过点击到达指定位置,如返回顶部。

大家如果有兴趣,可以在电脑创建一个文本文档,把上述的代码复制黏贴到文档中保存,并把文档的后缀名改为.html之后双击打开即可。

02 CSS

CSS,层叠样式表,它可以为标记语言提供一种样式描述,定义了网页中元素的显示方式(如标题居中、颜色黑色、字体加粗等),其具样式丰富、易于使用和修改、多页面应用及层叠等特点。
关于CSS的使用,通常分为外联、内联和内嵌三种方式,如下图所示。


<h1  style=’font-size:14px’>你好</h1>


内嵌样式
(又称“行内样式”,直接写入HTML某一行中的style属性值)


<head >
     <style>
           h1{
              font-size:14px;
              }
     <style>
</head>
<body>
    <h1>你好</h1>
 </body>


内联样式
(直接写在HTML头部)


<!DOCTYPE html>
 <html>
  <head>
  </head> 
  <body>
    <h1>你好<h1>
  </body>
 </html>


.h1{font-size:14px}


外联样式

(HTML和CSS分别写在两个文件,后缀名分别对应.html和.css)

在小程序的编程中,我们通常采用外联或内嵌的方式来描述视图层组件的样式。
Tips:学会HTML和CSS,还可以应用到公众号的推文来实现更多互动效果哦!

03 JS

JavaScript是一种面向对象的脚本语言,在web端应用中广泛用于用户交互、与服务器通信进行数据读写(ajax)、服务器编程(Node.js)、UI(Vue.js)等,通常通过在HTML中引入来实现功能。

目前国际中通用的JavaScript是由ECMA制订的标准化脚本程序设计语言——ECMAscript,又称ES;最新版本为ES6,而使用相对较多的仍是ES5,故我们在小程序开发工具中可以通过勾选“ES6转ES5”,使小程序获得更好的兼容效果。

Tips:JavaScript和Java是两门截然不同的语言,只是由于某些历史原因在命名上有些雷同,感兴趣者可自行了解。

逻辑层作为小程序的一个重要组成部分,学会使用JS是完成小程序开发的秘钥;值得注意的是,正如开篇所提到的,善于运用小程序所提供的API将大大地降低我们的入门难度,同时进一步提高我们的开发效率。

在小程序开发中,WXML的编程上与HTML大同小异,针对常用的组件和初学者容易快速掌握并实践的组件,我们将在近期的推送中给大家一一讲解。


关于我们

我们愿意利用每天的三分钟,致力于帮助更多新媒体人从零基础到深度掌握小程序;
我们谨希望在新媒体探索上,一路有你,一起成长;
这,是我们的梦想。

如果你认同我们,请帮我们转发,这将是对我们坚持梦想最大的鼓励!


查看原文更多详细资料,欢迎关注公众号【一人从零开发小应用】(或搜索微信号:xiaochengxu1038):

转载文章 阅读原文

分享到:
评论区(共5条评论)
5条评论
Ctrl+Enter
作者

一人

一人

APP:0 帖子:8 回复:17 积分:478

已加入社区[221]天

小程序开发大白。

作者详情》
Top