微信小程序(申请号)组件详细介绍

本文主要讲解微信小程序的组件。

首先，解释新项目。现在有一种说法：招聘微信小程序开发三天多，估计只能挖微信工程师了。由于这项技术是新的，我们将从头开始解释。

打开微信web开发者工具，如上图。点击【添加项目】，出现新项目页面，如下图：

AppID是随意填写的。Ps:正式开发，估计有需求。填写项目名称并选择保存的路径，添加项目就可以了。

这样，一个你好的世界就可以了。

古人说，一图胜千言，大家直接看图就可以了

好了，我们开始解释微信小程序的组成部分。

首先，倒入官方演示文件。可以从微信小程序开发群共享文件下载：390289365。导入到下图中：

在这里，您可以看到一些组件。我们打开源代码，熟悉多个接口。入口文件是app.js，类似于很多框架。

你发现什么新东西了吗？还是两件新鲜事？哈哈。以wxml和wxss结尾的文件，但是如何解释这个特定的文件呢？Wxml我不知道是说w-XML还是wx-XM。打开此文件后，它是一个布局，类似于wpf的xaml布局。Wxss，我猜应该是微信css，甚至是我们的css文件。这样的话，前端学生觉得熟悉吗，类似html(wxml)和css(css)js(类似node.js的编写，还是刚刚好)？

因为组件相当丰富，这篇文章写不完，所以先介绍几种。

一个。先来看看demo的渲染，小程序演示，五个字，这五个字在哪里类似于移动开发，导航栏，可以像IOS开发一样整体设置。它在哪里？如下图所示：

我觉得这个navigationBar也是可以动态控制的，但是我不是从api看到的，所以应该在后续的官方文档中说明。

两个。视图元素类似于react native，是html开发中类似div的块级别。您可以设置样式，例如图中右侧的红色圆圈。这几乎和html布局一样，甚至是css语法。视图和视图可以嵌套。像div一样，您可以设置边距、填充、显示、块和全局*的样式。前端朋友说不觉得开发这个接口没有压力？

三个。下面两张navigator的图片说的是折叠和显示，它们实际上控制了包括navigator组在内的视图的显示和隐藏实现，这将在后面的代码中解释。

点击内容分区，三个导航器的家长将查看现实，然后点击隐藏。想想看，如果这是在html中，这应该是js控件，但是在微信web小程序开发中，看看代码：

有“js”代码，但是“click”方法的绑定呢？但是翻边演示代码没有发现咔嚓的影子。其实这里的微信web小程序开发采用的是嵌入式绑定方式，轻度绑定的关键词不是点击，而是bindtap，如下图：

使用的“widgetsToggle”是上图中的“click”事件。通过背景中的typeviewShow显示前景。

四个。在我们的html开发中，文本类似于标签或跨度，它是一个小元素。这里就不多解释了。

五个。导航器，这是我们页面中的跳转，其中url属性指向跳转多目标页面。

六个。Image是img，src和html一样。

今天的讲解就到这里，明天写，明天试着介绍一些，然后模仿一个原生app的界面。