六迈技术微信小程序的开发逐步指导您并实现了简单的微信小程序结构，您可以体验小程序对微信的实际效果。
首先，您必须具有小程序帐户，登录微信公共平台，选择微信小程序并进行注册，然后按照提示完成小程序的注册。
完成注册后，登录到小程序背景并开始开发前的准备工作。
首先，您需要首先获得小程序 ID，即设置-开发设置-appID
下载开发工具，小程序首页-开发工具-普通小程序开发人员工具-工具-微信开发人员工具，然后根据您的计算机系统选择合适的版本，然后下载并安装。
新项目
登录以下载已安装的开发人员工具，创建一个新的项目目录并选择，然后填写小程序 ID并登录
登录后，让我们看一下主界面
整个开发工具基本上分为三个部分：
第一行：表格项每个按钮代表一个页面
左框架：webview您的页面在此处实时显示
正确的框架：Chrome调试工具，我们这样称呼它，因为它确实是使用charome的调试工具，您可以在其中调试页面样式，js，网络检测，输入和输出等。
编写示例代码
创建小程序实例
在开发人员工具导航中单击“编辑器”，我们可以看到该项目已初始化，并包含一些简单的代码文件。最关键和必不可少的是app.js，app.json和app.wxss。其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。 微信小程序将读取这些文件并生成小程序个实例。
下面我们简要了解这三个文件的功能，这方便从头开始修改和开发我们自己的微信小程序。
app.js是小程序的脚本代码。我们可以监视和处理小程序的生命周期函数，并在此文件中声明全局变量。调用框架提供的丰富API，例如本示例中的同步存储和本地数据的同步读取。有关更多可用的API，请参阅API文档。
// app.js
App（{
onLaunch：function（）{
//调用API以从本地缓存中获取数据
var日志= wx.getStorageSync（'logs'）|| []
logs.unshift（Date.now（））
wx.setStorageSync（'logs'，日志）
}，
getUserInfo：function（cb）{
var that = this;
if（this.globalData.userInfo）{
typeof cb ==“ function” && cb（this.globalData.userInfo）
}其他{
//调用登录界面
wx.login（{
成功：function（）{
wx.getUserInfo（{
成功：功能{res} {
that.globalData.userInfo = res.userInfo;
typeof cb ==“ function” && cb（that.globalData.userInfo）
}
}）
}
}）;
}
}，
globalData：{
userInfo：null
}
}）
app.json是整个小程序的全局配置。在此文件中，我们可以配置组成小程序的页面，配置小程序的窗口背景色，配置导航栏样式以及配置默认标题。请注意，没有注释可以添加到此文件。更多可配置的项目可以参考详细的配置。
{
“页面”：[
“页面/索引/索引”
“页面/日志/日志”
]，
“窗口”：{
“ backgroundTextStyle”：“浅色”，
“ navigationBarBackgroundColor”：“ #fff”，
“ navigationBarTitleText”：“微信”，
“ navigationBarTextStyle”：“黑色”
}
}
app.wxss是整个小程序的公共样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。
/ ** app.wxss ** /
.container {
高度：100％;
显示：flex;
flex-direction：列;
align-items：居中；
justify-content：间隔；
填充：200rpx 0;
box-sizing：border-box;
}
创建页面
在本教程中，我们有两个页面，即索引页面和日志页面，即小程序启动日志的欢迎页面和显示页面。它们都在pages目录下。需要将微信小程序中每个页面的[路径+页面名称]写入app.json的页面中，并且页面的第一页是小程序的主页。
每个小程序页面由四个不同的后缀文件组成，它们在同一路径下具有相同的名称，例如index.js，index.wxml，index.wxss，index.json。具有.js后缀的文件是脚本文件，具有.json后缀的文件是配置文件，.wxss后缀的文件是样式表文件，具有.wxml后缀的文件是页面结构文件。
index.wxml是页面的结构文件：
{{userInfo.nickName}}
{{motto}}
index.js是页面的脚本文件。在此文件中，我们可以监视和处理页面的生命周期功能，获取小程序实例，声明和处理数据，以及响应页面交互事件。
// index.js
//获取应用示例
var app = getApp（）
页面（{
数据：{
座右铭：“ Hello World”，
userInfo：{}
}，
//事件处理功能
bindViewTap：function（）{
wx.navigateTo（{
url：'../ logs / logs'
}）
}，
：function（）{
console.log（''）
var that = this
//调用应用程序实例方法以获取全局数据
app.getUserInfo（function（userInfo）{
//更新数据
that.setData（{
userInfo：userInfo
}）
}）
}
}）
index.wxss是页面的样式表：
/ ** index.wxss ** /
.userinfo {
显示：flex;
flex-direction：列;
align-items：居中；
}
.userinfo-avatar {
宽度：128rpx；
高度：128rpx；
保证金：20rpx;
边界半径：50％；
}
.userinfo-昵称{
颜色：#aaa;
}
.usermotto {
margin-top：200像素；
}
页面样式表不是必需的。当存在页面样式表时，页面样式表中的样式规则将与app.wxss中的样式规则重叠。如果不指定页面的样式表，则还可以直接使用页面的结构文件中app.wxss中指定的样式规则。
index.json是页面的配置文件：
不需要页面的配置文件。当页面有配置文件时，页面上的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件，则app.json中的默认配置将直接在此页面上使用。
日志页面结构
{{index + 1}}。 {{log}}
日志页面使用控制标签来组织代码，使用wx：for绑定日志数据，并循环日志数据以扩展节点。
// logs.js
var util = require（'../../ utils / util.js'）
页面（{
数据：{
日志：[]
}，
：function（）{
this.setData（{
日志：（wx.getStorageSync（'logs'）|| []）。map（function（log）{
返回util.formatTime（newDate（log））
}）
}）
}
}）
至此，简单的微信小程序完成了。
更多小程序相关的开发和生产咨询，请关注六脉科技：（）