小程序开发入门教程(二)熟悉开发工具和小程序语法

909 阅读5分钟

目录

  • 熟悉小程序开发工具
  • HTML、CSS、JavaScript三者之间的关系
  • WXML和HTML的区别
  • WXSS和CSS的区别
  • JavaScript在小程序中和浏览器中的区别

一、熟悉小程序开发工具

前面第一篇教程已经讲解怎么使用开发工具创建一个空白的小程序项目,下面跟大家讲解一下小程序开发工具其他常用的功能(因个人公众号类型不支持外链接,请点击文章末尾查看原文进行该部分查看,链接引自微信官方文档),对该部分有任何问题可在公众号内获取作者的联系方式进行咨询。

  1. 启动页
  2. 菜单栏
  3. 工具栏
  4. 工具栏管理
  5. 模拟器
  6. 独立窗口
  7. 项目页卡

二、HTML、CSS、JavaScript三者之间的关系

前后端的关系:把一个项目比喻成一个人的话,前端的工作是负责这个人的外貌和行为动作,后端的工具是负责这个人的内容存储和输出,比如人说一句“你好”这个动作,主要包括嘴巴舌头的动作及“你好”这句话的内容,前端的工作就是控制嘴巴和舌头的动作让这个人说出来什么,说出来的内容“你好”是属于后端的工作。在前端做这个动作的时候,后端同学把“你好”这个词返回给前端同学,这样就完成了一个完整的动作内容。这是前后端的工作关系,大家可以简单这样理解。

HTML、CSS、JavaScript三者之间的关系:还用一个人来进行比喻,拿一个女生来进行比喻,HTML充当身体骨头架构的部分,CSS充当身体的除骨架以外的部分,比如胖瘦,皮肤的黑白、瞳孔的颜色等,CSS是对HTML进行修饰或者装饰的功能,JavaScript属于身体中大脑的部分,控制身体的交互动作,行为方式等。

(以上观点仅是作者个人观点,如给大家的带来误解还请谅解,如果存在问题也希望大家可以及时提醒指出我会第一时间修改)

三、WXML和HTML的区别

可以看下平常的HTML页面的骨架和小程序页面的骨架,会发现小程序的WXML页面里面没有head和body的区分,小程序的WXML页面布局主要使用view组件来完成,相当于HTML选中的div标签,下面跟大家说一下小程序常用组件和HTML的对应关系,其他的组件名称和HTML中的变化不大,小程序提供了很多基础的功能组件,具体的小程序组件的全面介绍建议大家去看微信官方文档

常用组件对应关系:

  • view==>div
  • navigator==>a标签
  • image==>img标签

(小程序中没有HTML中span和p标签对应的组件,有行内的text组件但是不支持绑定事件,这里需要注意一下)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div></div>
</body>
</html>

四、WXSS和CSS的区别

在开发过程中个人感觉是和CSS是基本没有区别的,CSS的语法在WXSS是几乎全都支持的,下面是WXSS语法支持的选择器,另外有几个比较坑的地方和大家分享一下:

1、在小程序的WXSS中使用自定义字体@font-face的时候需要用base64代替实现如下图所示。

2、另外在设置盒子的宽度的时候整体宽度不要超过750rpx,超过这个值的话在iphone上会出现页面左右拖动的问题。

3、需要注意页面层级的问题,有个别的小程序组件是高于其他组件的层级,现在大部分已经支持同层渲染,可以设置z-index来改变组件的层级,具体的支持情况建议大家去查询官方文档。

4、WXSS中支持CSS的大部分动画效果,但小程序组件自己也提供了一个Animation的API建议大家学习一下。

5、在小程序中使用canvas画布,如果需要画的背景图是网上图片的话,需要先download下来使用本地路径来进行绘制。

(另外在写WXSS和CSS代码的时候建议大家尽量.class选择器,class的命名方式以“-”链接两个单词(user-list)或者使用驼峰名法(userName))

使用自定义字体:

五、JavaScript在小程序中和浏览器中的区别

JavaScript在小程序中和浏览器中的最大区别是,在小程序中没有DOM对象,不能通过某个组件的 id获取到该组件在DOM树中的节点信息来进行操作,通过截图可以看到在小程序的JavaScript中小程序框架也就是小程序的基础组件代替了浏览器中的DOM对象,小程序的API代替了浏览器的BOM对象。另外在小程序中是支持大部分ES6语法的,例如常用的解构赋值、箭头函数、promise、async、await等,但是不支持JavaScript中等eval()方法,一开始好像是支持等,后来有开发者使用该方法实现热更新,来躲避审核,被官方去掉了。(截图来自微信官方文档