如何开发微信小程序？ 微信小程序是小程序，无需安装即可使用。 TA可以在微信中快速方便地传播。 小程序和微信官方帐户的存在是并行系统。对于微信小程序开发，我们需要掌握以下步骤。

微信小程序开发简单教程：

1、获取微信小程序的AppID

登录到微信公共平台，然后可以在网站的“设置”-“开发人员设置”中查看微信小程序的AppID。请注意，您不能直接使用服务帐户或订阅帐户的AppID。

注意：如果您想以非管理员微信号码在手机上体验此小程序，则我们还需要操作“绑定开发者”。也就是说，在“用户身份”-“开发人员”模块中，您需要体验小程序的微信号。本教程的默认注册帐户和使用体验是使用管理员微信号码。

2、创建项目

我们需要使用开发人员工具来完成小程序创建和代码编辑。

安装开发人员工具后，打开并使用微信进行扫描以登录代码。选择创建一个“项目”，填写上面获得的AppID，为本地项目设置一个名称（不是小程序 ]名称，例如“我的第一个项目”，然后选择一个本地文件夹作为代码存储目录，只需单击“新建项目”。

为了让初学者了解微信小程序的基本代码结构，在创建过程中，如果所选的本地文件夹为空文件夹，则开发人员工具将提示是否需要创建快速启动项目。选择“是”，开发人员工具将帮助我们在开发目录中生成一个简单的演示。

成功创建项目后，我们可以单击项目以进入并查看完整的开发人员工具界面，单击左侧导航，然后在“编辑”中查看和编辑我们的代码，并在“调试”中测试在微信客户端上编写代码并模拟小程序的效果，您可以将其发送到手机以预览“项目”中的实际效果。

3、编写代码

●创建小程序实例：

在开发人员工具的左侧导航中单击“编辑”，我们可以看到该项目已被初始化并包含一些简单的代码文件。最关键和必不可少的是app.js，app.json和app.wxss。其中.js后缀是脚本文件，.json后缀是配置文件，.wxss后缀是样式表文件。 微信小程序将读取这些文件并生成小程序个实例。

下面我们简要了解这三个文件的功能，这方便从头开始修改和开发我们自己的微信小程序。

app.js是小程序的脚本代码。我们可以监视和处理小程序的生命周期函数，并在此文件中声明全局变量。调用框架提供的丰富API，例如本示例中的同步存储和本地数据的同步读取。有关更多可用的API，请参阅API文档

//app.jsApp({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) }, getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == "function" && cb(this.globalData.userInfo) }else{ //调用登录接口 wx.login({ success: function () { wx.getUserInfo({ success: function (res) { that.globalData.userInfo = res.userInfo; typeof cb == "function" && cb(that.globalData.userInfo) } }) } }); } }, globalData:{ userInfo:null }})

app.json是整个小程序的全局配置。在此文件中，我们可以配置组成小程序的页面，配置小程序的窗口背景色，配置导航栏样式以及配置默认标题。请注意，没有注释可以添加到此文件。有关更多可配置项，请参阅配置详细信息

{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" }}

app.wxss是整个小程序的公共样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。

/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}

●创建页面

在本教程中，我们有两个页面，即索引页面和日志页面，即小程序启动日志的欢迎页面和显示页面。它们都在页面目录中。需要将微信小程序中每个页面的[路径+页面名称]写入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()Page({ data: { motto: 'Hello World', userInfo: {} }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') var that = this //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) }})

index.wxss是页面的样式表：

/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;}.userinfo-nickname { color: #aaa;}.usermotto { margin-top: 200px;}

页面样式表不是必需的。当存在页面样式表时，页面样式表中的样式规则将与app.wxss中的样式规则重叠。如果不指定页面的样式表，则还可以直接使用页面的结构文件中app.wxss中指定的样式规则。

index.json是页面的配置文件：

不需要页面的配置文件。当页面有配置文件时，页面上的配置项将覆盖app.json窗口中的相同配置项。如果没有指定的页面配置文件，则app.json中的默认配置将直接在此页面上使用。

日志页面结构

{{index + 1}}. {{log}}

结果如下：

//logs.jsvar util = require('../../utils/util.js')Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log)) }) }) }})

4、移动预览

在开发人员工具的左侧菜单栏中选择“项目”，单击“预览”，然后在扫描代码后即可在微信客户端中体验它。

以上是微信小程序开发的简单教程。如果用户的思维布局可以是宏观的，则小程序的开发必定会更加有趣。