前言

小程序想必大家都不陌生。 今天我就带大家了解一下微信小程序的开发流程。

1.申请微信公众号并下载微信开发者工具

这个我就不一一介绍了。 网上有教程。 申请成功后，打开后台。 我们找到小程序，下载微信开发者工具，如图：

这里我们选择普通小程序开发工具，点击微信开发者工具，如图：

然后选择对应版本的工具，我们选择稳定版本，如图：

大约有100多兆字节，不到十秒就可以下载完毕。 下载后，根据要求安装微信开发者工具。

2.新建一个小程序项目

首次启动时会出现二维码。 我们需要扫描登录，登录后我们就可以开始开发了，如图：

首先我们在小程序中选择它，如图：

然后我们新建一个项目，并设置项目的参数，如图：

设置完成后，点击新建，打开微信开发者工具，如图：

正如您所看到的，这与我们的浏览器有很多相似之处。 我们点击头像后，就会显示登录时间。 其实这是启动小程序的日志时间，如图：

3. 小程序结构

我们先看一下小程序的文件结构图，如下：

可以看到只有四个后缀文件：js、json、wxml、wxss。 上一个文件夹是主页，.js（逻辑）、.wxss（样式）、.wxml（结构）； logs文件夹是登录日志，它的几个文件的用法类似； app.js（逻辑）、app.json（配置）、app.wxss（样式），这三个是小程序的配置文件，通过它来渲染和启动页面。 小程序； util.js（逻辑）使用此文件加载脚本并使用导入。 最后一个..json是构建项目时的配置文件。

4、小程序项目开发分工

小程序可以多人协作开发。 我们可以添加多个微信好友，如图：

可绑定15个微信ID。 还可以添加体验会员，就是用来测试小程序功能的微信好友，如图：

也可以添加15个。

五、小程序初步探索 1、设置小程序页面

现在让我们尝试编写一个我们自己的小程序。 我们都知道，创建小程序时都会有一个配置文件。 让我们来看看：

然后我们可以修改小程序的标题名称，如图：

只需将窗口标题修改为其他文本即可。 您还可以在第一词典中设置主页的页面地址和主页的日志。 这时候我们就可以重置一个页面来实现我们设置的微信小程序的界面效果。 首先我们为微信小程序设置一个页面文件夹，如图：

我们按照图中的步骤操作，然后按Ctrl+S保存； 然后我们将前端页面代码添加到demo文件夹下的demo.wxml文件中。 这个文件相当于一个Html文件，另一个demo.wxss相当于css，我们需要通过添加小程序的组件来编写小程序的内容，如图：

这里是所有微信小程序标签。 我们来写一个简单的小程序界面。 我们看一下小程序界面，如图：

那么这是如何实现的呢？

2.完成小程序页面的代码

我们需要交换app.json中demo文件夹和初始文件的位置，如图：

把demo放在前面就好了，然后我们写页面代码和样式，如图：

演示.wxml

演示.wxss

可以看到我们在输入框中输入了相关内容，一个非常简单的表单就完成了。

注：px和rpx可以相互转换，px是物理像素，rpx是逻辑像素。 一般来说，设置rpx时不必担心兼容性问题。

3. 选择器

上面我们使用了样式表的基本概念——选择器。 微信小程序支持以下选择器，如下：

选择器示例示例描述

。

。

选择所有拥有的组件

＃ID

#

选择您拥有的组件

看法

选择所有视图组件

,

看法，

选择所有文档视图组件和所有组件

::

看法：：

在视图组件后面插入内容

::

看法：：

在视图组件之前插入内容

4. 数据绑定

但仅仅制作一个表格是不够的。 我们还要处理这个表单传入的数据，所以这时候我们需要编写Js代码，所以我们要把代码写在demo.js文件中，如图：

为数据添加标题，但此时数据无法映射到前端页面。 我们需要在页面文件中编写代码来接收这个值，如图：

这相当于我们模板引擎中的语法。 在微信小程序中，我们称之为数据绑定。

5. 列表渲染

另外，还有列表渲染，如下：

演示.wxml

演示.js

这样我们就可以向前端页面传递一个数组，如图：

如果我们想迭代这个数组怎么办？ 当然有可能。 demo.js 的内容保持不变。 只需要修改demo.wxml的内容即可，如图：

可以看到打印了这个结果。

6. 条件渲染

与列表渲染相比，不同的是可以进行判断，如下：

演示.wxml

演示.js

这样就可以得到最终的值为2，如图：

如果我们想一次性判断多个组件，可以使用标签来包裹多个组件，如下：

演示.wxml

微信小程序开发从入门到入狱./34.jpg">

可以看到将返回第二个条件的值。

7. 模板

wxml 中的模板可以在不同的地方调用并使用标签“ ”进行定义。 首先创建一个模板，如下：

：{{}}，：{{}}

然后使用is属性来声明你需要使用的模板，如下：

然后传入模板需要的数据，并在demo.js的数据字典中添加几个键值对，如下：

: {: '绿巨人', : '胡'},

： {： ''， ： '你'}，

: {: '', : '林'}

现在我们可以在屏幕上看到这些模板中的示例，如图所示：

8. 报价

wxml 提供了两种引用文件的方式，以及。 下面让我们详细看看它们。

1）。

该引用方法只能使用导入的文件，无法调用更底层的导入。 例如，c 导入 b，b 导入 a，c 不能调用 a。 我们来看一下，如图：

要生效，文件必须放在同一个目录下，然后我们来看看效果，如图：

2）。

您可以删除目标文件

外面的整个代码都引入了，相当于复制到

地点，如下：

这样我们就可以将网页文件中的所有内容导入到另一个页面中，如图：

3).样式导入

如果我们想共享样式文件中的样式，我们可以使用它。 首先我们新建一个样式文件，然后编写代码，如图：

然后导入到指定的wxss文件中，如图：

最后我们可以看到背景颜色发生了变化，如图：

如果我们有时需要统一样式微信小程序的安装与开发论文，可以直接设置全局样式，如图：

9、小程序专属脚本语言

既然小程序和html、css有相同的东西，那么小程序也一定有和html、css相同的东西。 是的，它与 html 和 css 不同。 但是，它可以在特定的标签中定义脚本语言，或者专门编写脚本文件然后导入。 。 所以现在大家都过来看看我到底是怎么回事。

1).写法

我们可以将脚本文件写入标签中，也可以将其写入.wxs文件中。 如下：

1)).直接写入标签

直接在wxml文件中定义一个wxs标签，然后将内容写入其中，如下：

”>

= (val) {

瓦尔

。 = {

关键：bb

{{.key(12)}}

2)).写入文件并导入到wxml中

首先创建一个wxs文件，内容如下：

= (val) {

瓦尔

。 = {

关键：bb

..msg =“”；

然后导入并使用，如下：

“演示.wxs”=“演示”/>

{{演示.msg}}

{{演示.key("")}}

3)).参考wxs文件

我们可以使用函数来引用wxs模块。 首先，创建一个新的wxs文件，内容如下：

var d= ("demo.wxs");

.log(d.msg);

.log(d.key(111))

然后在wxml文件中引用这个wxs文件，如下：

“gg.wxs”=“gg”/>

可以看到最终的结果，如图：

2).变量

既然是脚本语言，当然就存在变量。 我们刚才已经使用过它们了。 一般情况下，var关键字用于声明变量。 当然，你也可以赋值。 如果不是，它将是一个空值。

3).保留关键字

删除

空白

类型判断

空空指针

没有定义的

NaN 空

巨大

var 变量定义

如果如果

否则，否则

真实真实

伪造的

导入wxs文件

这个物体本身

函数定义

函数参数本身

返回

用于横移

类型循环

do类型循环的结束标志

终止

跳过并进入下一个循环

选择判断

案件判决情况

默认

上述保留关键字的用法与.

4).数据类型

它与 的数据类型相同。 具体使用方法这里不再赘述。 我们看一下数据类型，如下：

： 数值

： 细绳

:布尔值

： 目的

：功能

： 大批

日期： 日期

： 常规的

5).其他类库

微信小程序还内置了很多类库来完善小程序的各种功能，比如math、json、date等，与用法一致。

10.配置文件

我们可以通过更改配置文件来达到修改页面效果的目的。 一般可以分为全局配置、页面配置和配置。 下面我们就来看看吧。

1).全局配置

它是一个配置文件，配置小程序的全局属性。 它有很多配置项，只有在app.json文件中设置才能生效，如图：

常用配置选项如下所示：

属性类型 所需描述 最低版本

不