由于下一个项目需要使用微信小程序进行开发,因此我找到了要研究的小程序开发文档。下面记录了微信小程序的主要开发过程和语法。
帐户注册
开发小程序的第一步,您需要具有一个小程序帐户,通过该帐户可以管理小程序。注册地址?点击我单击我,这里不再讨论注册过程,只需按照要求进行操作即可。
注册后,登录到applet管理平台,您可以在其中管理applet权限,查看数据报告,发布applet和其他操作。
管理后台
小应用程序的AppID等效于小应用程序平台的ID卡。稍后微信小程序,您将在许多地方使用AppID。
安装开发工具
转到开发人员工具下载页面,然后根据您的操作系统下载相应的安装包以进行安装。有关开发人员工具的详细介绍,请参阅“开发人员工具简介”。
打开小程序开发人员工具,使用微信扫描代码以登录到开发人员工具,并准备开发您的第一个小程序!
框架介绍
该applet提供了自己的视图层描述语言WXML和WXSS,以及基于JavaScript的逻辑层框架,并在视图层和逻辑层之间提供了数据传输和事件系统,使开发人员可以轻松地集中精力关于数据和逻辑。类似于非常流行的MVVM框架。
// view 层
Hello {{name}}! Click me!
// App Service 层
var helloData = {
name: 'WeChat'
}
// Register a Page.
Page({
data: helloData,
changeName: function(e) {
// sent data change to view
this.setData({
name: 'MINA'
})
}
})
代码结构
我们通过开发人员工具快速创建了一个项目。您会注意到,此项目中生成了不同类型的文件:
带有json后缀的JSON配置文件,带有wxml后缀的WXML模板文件,带有js后缀的WXSS样式文件,带有js后缀的JS脚本逻辑文件
接下来,让我们看一下这4个文件的功能。
JSON配置
我们可以看到在项目的根目录中有一个app.json和project.config.json,在pages / logs目录中也有一个logs.json。让我们依次解释它们的目的。
小程序配置app.json
app.json是当前小程序的全局配置,包括所有页面路径,界面性能,网络超时和小程序的底部选项卡。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
让我们简要讨论一下此配置中每个项目的含义:
pages字段-用于描述当前applet所有页面的路径,这是为了让微信客户端知道您applet页面当前在哪个目录中定义。window字段-所有页面的顶部背景色小程序的名称,并在此处定义文本颜色。
工具配置project.config.json
小程序开发人员工具将在每个项目的根目录中生成一个project.config.json。您在工具上进行的任何配置都将写入此文件。当您重新安装该工具或将计算机更改为可以运行时,只要加载同一项目的代码包,开发人员工具即会在您当时开发该项目时自动将您还原到个性化配置,其中包括一系列选项,例如编辑器的颜色,代码上传时的自动压缩等。
页面配置page.json
这里的page.json实际上是指与applet页面相关的配置,例如pages / logs目录中的logs.json。
如果整个小程序的样式为蓝色,则可以将app.json中的顶部颜色声明为蓝色。实际情况可能并非如此,小程序中的每个页面可能具有不同的色调来区分不同的功能模块,因此我们提供page.json,以便开发人员可以独立定义每个页面的某些属性,例如刚才所说的顶部颜色,是否允许下拉刷新等等。