首先你要有小程序账号，登录微信公众平台，选择微信小程序去注册，根据提示完成小程序的注册。
完成注册后，登录小程序后台，开始开发前的准备工作。
首先需要获取小程序ID，设置-开发设置-appID
下载开发工具，小程序首页-开发工具-通用小程序开发开发者工具-工具-微信开发者工具，然后根据你的电脑系统选择对应的版本，然后下载安装。
新项目
登录下载已安装的开发者工具，新建项目目录并选择，然后填写小程序ID并登录
登录后，我们看一下主界面
整个开发工具基本分为三个部分：
顶行：table-item 每个按钮代表一个页面
左框：webview 此处实时显示你的页面
右框：chrome调试工具 系统定制开发 ，姑且称之为吧小程序开发制作，因为它确实是一个使用charome的调试工具，可以调试页面样式、js、网络检测、输入输出等。
写一个小示例代码
创建一个小程序实例
点击开发者工具导航中的“Editor”，我们可以看到这个项目，初始化并包含一些简单的代码文件。最关键和必不可少的是 app.js、app.json 和 app.wxss。 .js后缀为脚本文件，.json后缀为配置文件，.wxss后缀为样式表文件。微信小程序会读取这些文件并生成小程序实例。
我们先简单了解一下这三个文件的作用，方便修改，从零开始开发自己的微信小程序。
app.js 是小程序的脚本代码。我们可以监控和处理小程序的生命周期函数，并在这个文件中声明全局变量。调用框架提供的丰富API，例如本例中的本地数据的同步存储和同步读取。如需更多可用 API，请参阅 API 文档。
//app.js
应用程序（{
onLaunch: 函数() {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', 日志)
},
getUserInfo:function(cb){
var that = this;
如果（this.globalData.userInfo）{
typeof cb == 'function' && cb(this.globalData.userInfo)
}其他{
//调用登录接口
wx.login({
成功：函数（）{
wx.getUserInfo({
成功：函数（res）{
that.globalData.userInfo = res.userInfo;
typeof cb == 'function' && cb(that.globalData.userInfo)
}
})
}
});
}
},
全局数据：{
用户信息：空
}
})
app.json 是整个小程序的全局配置。在这个文件中，我们可以配置小程序由哪些页面组成，配置小程序的窗口背景颜色，配置导航栏的样式，配置默认标题。请注意，不能向此文件添加评论。更多可配置项，请参考配置详情。
{
'页面'：[
'pages/index/index',
'页面/日志/日志'
],
'窗口'：{
'backgroundTextStyle':'光',
'navigationBarBackgroundColor': '#fff',
'navigationBarTitleText': '微信',
'navigationBarTextStyle':'黑色'
}
}
app.wxss 是整个小程序的通用样式表。我们可以直接在页面组件的class属性上使用app.wxss中声明的样式规则。
/**app.wxss**/
.container {
身高：100%；
显示：弹性；
弹性方向：列；
对齐项目：居中；
justify-content: space-between;
填充：200rpx 0；
box-sizing:border-box;
}
创建页面
在本教程中，我们有两个页面，索引页面和日志页面，即欢迎页面和小程序启动日志的显示页面，它们都在pages目录下。微信小程序中每个页面的【路径+页面名】需要写在app.json的pages中，pages的第一页就是小程序的首页。
每个小程序页面由四个后缀不同的文件组成，在同一个路径同名，如：index.js、index.wxml、index.wxss、index.json。 .js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的文件是样式表文件小程序开发制作 系统定制开发 ，.wxml后缀的文件后缀为页面结构文件。
index.wxml是页面的结构文件：
{{userInfo.nickName}}
{{座右铭}}
index.js 是页面的脚本文件。在这个文件中，我们可以监控和处理页面的生命周期功能，获取小程序实例，声明和处理数据，响应页面交互事件。
//index.js
//获取应用实例
var app = getApp()
页面（{
数据：{
座右铭：'Hello World'，
用户信息：{}
},
//事件处理程序
bindViewTap: 函数() {
wx.navigateTo({
网址：'../logs/logs'
})
},
onLoad: 函数() {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
那个.setData({
用户信息：用户信息
})
})
}
})
index.wxss 是页面的样式表：
/**index.wxss**/
.userinfo {
显示：弹性；
弹性方向：列；
对齐项目：居中；
}
.userinfo-头像{
宽度：128rpx；
高度：128rpx；
边距：20rpx;
边框半径：50%；
}
.userinfo-昵称 {
颜色：#aaa;
}
.usermotto {
上边距：200px；
}
页面的样式表不是必需的。当存在页面样式表时，页面样式表中的样式规则将层叠在 app.wxss 中的样式规则之上。如果不指定页面的样式表，也可以直接在页面的结构文件中使用app.wxss中指定的样式规则。
index.json 是页面的配置文件：
页面的配置文件不是必需的。当页面有配置文件时小程序开发制作，页面中的配置项会覆盖app.json窗口中相同的配置项。如果没有指定页面配置文件，页面直接使用app.json中的默认配置。
日志的页面结构
本站声明: 本文章内容来源于互联网，文章内容仅供用户参考。本公司不能完全保证文章内容的准备性、时效性。如果因本文章对用户造成了任何损失或者损害，本公司将不会承担任何法律责任。如果涉及到版权问题，请提交到wikins@nbyuyuan.com