更新：2016.12.21完成了“框架”的所有详细信息页面，并打包了各种模板。 GitHub欢迎之星
一、前言
界面丑陋，每个人都会这么做。
二、您可以通过这篇文章了解什么三、小程序
实际上，小程序与以前的服务帐户类似，存在正式帐户，请看下面的图片，并引用张艾伦的话：“ 小程序是无需下载和安装即可使用的应用程序，它实现了应用程序的“可达”的梦想，用户可以通过扫描或搜索来打开应用程序。它还体现了“使用和使用”的概念，用户无需担心是否安装了太多应用程序。应用程序将无处不在，并随时可用，但是无需安装或卸载。”
小程序的位置，屏幕截图来自微信官方
现在流量越来越大，手机网络越来越好。 Web终端确实现在越来越受欢迎。本机移动终端的朋友并不平静。我也一直从事iOS开发。老实说，我一点也不担心，没有理由，只是出来学习！编程的原理和思想相同，但是实现代码已更改。到目前为止，尚无小程序开发工具的主要版本（最新版本为0.11.112301），并且开发仍需一段时间，这一次您就足够了学习
我个人认为它是HTML，CSS，JS的修改版本，因为它与前端非常相似，但是有些变化，例如没有HTML的p容器，现在您可以使用view了，滚动查看，然后稍后进行分析；如果您已经接触了前端开发一段时间，那么只需几个小时或更短的时间即可开始。如果您正在做其他开发并且还没有接触过前端开发，那么您需要熟悉HTML，CSS，JS。语法已经完善，建议使用网站：（无特殊顺序）
四、开发前的准备
创建项目界面
添加新项
开发界面编辑
开发界面调试
五、小程序文件格式文档
屏幕截图来自官方文档
//获取应用实例var app = getApp()Page({ // 数据，在 WXML 中 通过 {{motto}} 就可以拿到对应 data 中的 motto 字段的值 data: { motto: 'MiHome_Store', userInfo: {}, indicatorDots: true, autoplay: true, interval: 3000, duration: 100 }, //事件处理函数，可以通过 bindViewTap: function () { wx.navigateTo({ url: '../logs/logs' }) }})
不设置全局窗口window{ "pages":[ "pages/index/index", "pages/logs/logs" ]}
设置全局窗口window，在app.json 中设置{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window": { "navigationBarBackgroundColor": "#ffffff", "navigationBarTextStyle": "black", "navigationBarTitleText": "小程序", "backgroundColor": "#eeeeee", "backgroundTextStyle": "light", "enablePullDownRefresh": false }}
单独页面中设置窗口配置信息，不需要添加window标签{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "gitkong", "navigationBarTextStyle":"black"}
json文件配置
六、我是如何写出来的（还有更多代码，只是提供有关操作方法的想法，请参阅演示以了解详细信息）
目录结构
> 保存编译（command + s），然后就能显示出来了- 2、接下来就要去布局样式了，在对应 `WXSS` 文件中 编写 CSS 代码
/通过空格指定子类别布局/
.container .frame-item {
background-color：浅蓝色；
/内部边距/
/ padding-left：20px； /
宽度：100％；
高度：44像素；
/保持相同，无论子控件/
flex：1；
/有四个值，右上左下/
保证金：10rpx;
/ flexbox元素在元素中的方向，行|行反转|列|列反转|初始|继承； //行在右侧为水平，默认为/
显示：flex;
/ flex-direction：行； /
/垂直对齐中心/
align-items：居中；
/ justify-content属性定义主轴上项目的对齐方式。 flex-end |中心|间隔|环绕； /
justify-content：间隔；
}
/无需选择器，所有文本均已设置/
文本{
/左对齐/
text-align：left;
/内部边距/
padding-left：20px;
font-size：16像素；
}
图片{
宽度：20像素；
高度：20像素；
/边距/
右边距：20px;
}
> 保存编译（command + s），然后你发现正常显示了（新项目默认app.wxss 中有布局，将 `padding: 200rpx 0;` 注释掉 就能显示如下效果）- 3、事件处理，可以通过 `bindtap="对应 js 里面的方法名"` 给 view 绑定一个 事件 > WXML 中 绑定了 事件
目录结构
>对应 js 文件中的方法，方法里面实现了跳转，通过 `wx.navigateTo` 跳转，url 传入的是 绝对路径
//事件处理功能
bindViewTap：function（）{