微信小程序

微信小程序是运行在微信中的小程序，无需下载App即可运行该程序。

微信小程序和普通网页开发 微信小程序开始申请账号

开发微信小程序之前，需要申请一个微信小程序账号。申请网址

注：每个邮箱只能申请一个小程序。

只需进行相关登记即可。

完成注册后，您可以在网站上管理小程序。比如小程序的权限、数据报表等。

每个小程序都有一个唯一的 ID，称为。登录小程序后台后，可以在菜单“开发”-“开发设置”中看到小程序。

安装开发者工具

开发者工具下载地址

找到与您的设备对应的版本。建议下载稳定版或开发版。

打开开发者工具后，使用微信扫描二维码登录，即可开始使用开发者工具。

创建微信小程序项目

打开微信小程序开发者工具，登录并创建新项目，选择小程序项目，填写小程序，即可创建项目。创建项目时有一个选项：“不使用云服务”。云服务是微信小程序提供的具有云数据库功能的服务。如果需要使用小程序的云服务进行后端开发，则不要勾选此项。否则你需要检查一下。

以下是创建的项目

微信开发者工具有很多功能，大家可以自行探索！

小程序代码组成

微信小程序的每个页面由四个文件组成：.json文件、.wxml文件、.wxss文件、.js文件。

JSON-配置文件小程序配置app.json

app.json是当前小程序的全局配置，包括小程序的所有页面路径、界面性能、网络超时、底部标签等。

新建项目中app.json配置内容如下：

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light",

"navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" } }

我们简单说一下这个配置中每一项的含义：

——用于描述当前小程序所有页面的路径。这是为了让微信客户端知道你的小程序页面当前定义在哪个目录下。字段 - 定义小程序所有页面的顶部背景颜色、文字颜色定义等。

其他配置项详情请参考文档小程序的配置app.json。

工具配置..json

通常大家在使用一个工具的时候，都会根据自己的喜好进行一些个性化的配置，比如界面颜色、编译配置等，当你换到另一台电脑，重新安装该工具时，就得重新配置。

考虑到这一点，小程序开发者工具会在每个项目的根目录下生成一个..json。您对该工具所做的任何配置都将写入此文件。当您重新安装工具或者换电脑工作时，只要加载同一个项目的代码包，开发者工具就会自动帮您恢复开发项目时的个性化配置，包括编辑器的颜色、自动上传代码时的压缩，以及一系列选项。

其他配置项的详细信息请参考文档开发者工具配置。

页面配置page.json

每个页面都包含一个相应的 .json 文件。例如，在 page/ 目录中，有 .wxml、.wxss、.js 和 .json 四个文件。 .json文件是页面对应的配置。在该页面配置文件中，可以配置该页面的相关配置。

如果你的整个小程序的风格是蓝色，那么你可以在app.json中声明顶部颜色为蓝色。实际情况可能并非如此。也许你的小程序中的每个页面都有不同的色调来区分不同的功能模块。因此，我们提供.json，以便开发者可以独立定义每个页面的一些属性，比如刚才提到的顶部颜色、是否允许下拉刷新等。

其他配置项的详细信息请参考文档。

JSON语法

以下是小程序中JSON配置的一些注意事项。

JSON文件用大括号{}包裹，数据以key-way表示。 JSON 的 Key 必须用双引号括起来。在实践中，编写 JSON 时，经常会犯的一个错误是忘记在 Key 值上加双引号或者写双引号而不是单引号。

JSON的值只能是以下数据格式。任何其他格式都会触发错误，例如 in.

数字，包括浮点数和整型字符串，需要用双引号括起来 Bool 值，true 或数组，需要用方括号括起来 [] 对象，需要用大括号括起来 {} Null

还需要注意的是，JSON 文件中不能使用注释，尝试添加注释会导致错误。

WXML 结构 (HTML)

WXML可以理解为小程序中的HTML。打开//.wxml，您将看到以下内容：

获取头像昵称 {{userInfo.nickName}} {{motto}}

与 HTML 非常相似，WXML 由标签、属性等组成。不过，WXML 标签与 HTML 标签不一样，WXML 添加了一些新的属性，例如 wx:if，以及类似于 Vue 中数据绑定的 {{ }} 表达式。例如：

{{msg}} 通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 `if`/`else`, `for`等控制能力，在小程序里边，这些控制能力都用 `wx:` 开头的属性来表达。

更详细的文档请参考WXML

WXSS 样式 (CSS)

WXSS具备了CSS的大部分功能，小程序也在WXSS上做了一些扩展和修改。

添加了新的尺寸单位。在编写CSS样式时，开发人员需要考虑到移动设备的屏幕会有不同的宽度和设备像素比例，并使用一些技术来转换一些像素单位。 WXSS底层支持新的尺寸单位rpx。开发者可以免去转换的麻烦，直接交给小程序底层来做转换即可。由于转换使用浮点运算，计算结果会与预期结果略有不同。提供全局样式和局部样式。 app.json 和 page.json 的概念与之前相同。你可以将app.wxss编写为全局样式，该样式将应用于当前小程序的所有页面。本地页面样式page.wxss只会在当前页面生效。另外，WXSS仅支持部分CSS选择器。

更详细的文档请参考WXSS。

JS-逻辑交互

.js文件里面是代码，相当于html中标签里的内容。用于编写页面的交互代码，处理一些业务逻辑。

{{ msg }} 点击我

当点击按钮时，我们希望界面上的msg显示为“”，所以我们在on:上声明了一个属性，并在JS文件中声明了一个方法来响应这次点击：

Page({ clickMe: function() { this.setData({ msg: "Hello World" }) } })

这就是 JS 文件的用途。

总结

以上就是微信小程序的一些介绍知识。更详细的内容可以查看微信小程序官方文档。 。