30分钟启动微信小程序开发

写在最上面：自学笔记，如果你觉得不合适，以后再修改

1、 开发工具

1.如下图所示，开发工具大致可以分为四个块：

顶部与开发人员工具相关的设置菜单

左侧的编译效果预览区域

右上角的代码编辑器

右下角的代码调试区域

微信开发者工具

下面主要介绍编辑器区域。

2.编辑器细分为左侧块的项目目录结构图和右侧的代码编辑块。

A、 项目目录

pages目录用于存储页面。内部文件夹由json、js、wxml和wxss文件组成。json页面导航栏的相关配置、json页面的逻辑操作、wxml页面的结构框架以及wxss页面的样式。

页面的外部目录中也有一些文件，它们对应于app的全局配置。其中，project.config。json表示当前机器上开发人员工具的一些配置，以及站点地图。json表示该文件用于配置微信是否允许对小程序及其页面进行索引。

有关更多信息，请参阅官方文件：

项目目录结构

B、 编辑器

该编辑器与大多数其他程序编辑器没有区别。可以使用F1键获取编辑器的快捷键。

2、 Wxml和wxss

我们可以看到，在开发人员工具最初提供给我们的示例代码中，只有wxml和wxss文件以前从未见过。事实上，在网页开发中，这两个文件可以与html和css文件进行比较。

1.标签类比

视图可以类比div，文本可以类比span。有关更多组件，请访问官方文档：

2.小程序中的元素单元

根据设计图的大小（设计图的宽度要求为750px），小程序中使用相同的rpx作为单位，可以在不同的客户端上自适应缩放。有关更多尺寸，请参阅官方文件：

3、 组件

事实上，小程序的组件和API是我们学到最多的。

组件主要包括小程序中可用的组件。有关更多信息，请访问官方文件：

4、 数据绑定和列表呈现

让我们先解释一下如何绑定数据。在最初的网页开发中，如果我们想操纵视图中的数据，首先需要通过js获取DOM文档中的节点，然后修改获取的元素节点对象值来修改数据。在小程序中，我们使用了虚拟DOM技术。在虚拟DOM中，我们可以直接获取js中的变量值。我们只需要在相应js页面的数据对象中用双花括号将属性名括起来，就可以调用属性名的值。如果数据是从服务器返回的，我们必须使用它。setData（）方法将数据映射到数据对象。

//pages/posts/posts.js

第页({

//页面的初始数据

数据：{

},

//生命周期--监听页面加载

onload:函数（选项）{

var local_ database=['a'，'b']；

这setData（｛local_database｝）；//ES6语法

},

})

条件渲染。在组件中，使用wx:if=“”确定是否需要渲染代码块。有关更多信息，请访问官方文件：

列表呈现。使用组件上的wx:for=“”控件属性绑定数组，以便可以使用数组中每个项的数据重复渲染组件。有关更多信息，请参阅官方文件：