六脉科技微信小程序开发会一步步指导你实现一个简单的微信小程序搭建，你可以在微信上体验小程序的实际效果。
首先你要有小程序账号，登录微信公众平台，选择微信小程序去注册，根据提示完成小程序的注册。
完成注册后，登录小程序后台，开始开发前的准备工作。
首先需要获取小程序ID，settings-development settings-appID
下载开发工具，小程序首页-开发工具- 常用小程序开发开发者工具-工具-微信开发者工具，然后根据你的电脑系统选择对应的版本 外包小程序定制 ，然后下载安装。
创建一个新项目
登录下载安装开发者工具小程序开发制作，新建项目目录并选中，然后填写小程序ID并登录
登录后，我们来看看主界面
整个开发工具基本分为三个部分：
顶行：table-item 每个按钮代表一个页面
左框：webview 这里实时显示你的页面
右边框：chrome调试工具，暂且称它为，因为它确实使用了charome的调试工具，可以调试页面的样式、js、网络检测、输入输出等。
编写一个示例小程序
创建一个小程序实例
点击“开发者工具导航”中的“编辑器”，我们可以看到项目已经初始化完毕，包含一些简单的代码文件，最关键也是必不可少的就是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 用于整个小程序全局配置。在这个文件中，我们可以配置小程序由哪些页面组成 小程序分销系统定制 ，配置小程序的窗口背景颜色，配置导航栏的样式，配置默认标题。请注意，不能向此文件添加评论。更多可配置项，请参考配置详情。
{
“页面”：[
“页面/索引/索引”，
“页面/日志/日志”
],
“窗口”：{
"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'
})
},
: 函数() {
console.log('')
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中的默认配置。
日志页面结构
{{index + 1}}.{{log}}
日志页面使用控制标签组织代码，在wx:for上使用绑定日志数据，展开日志数据循环节点。
//logs.js
var util = require('../../utils/util.js')
页面（{
数据：{
日志：[]
},
: 函数() {
this.setData ({
日志：(wx.getStorageSync('logs') || []).map(function(log) {
返回 util.formatTime(newDate(log))
})
})
}
})
到此，一个简单的微信小程序就完成了。
