前面的同事将小程序的基础知识讲的很详细了，对于一个初学者看完开发者文档，熟悉开发者工具之后，下一步就是开发小程序，进行小程序实战。也就是今天我要分享的内容。
小程序从设计稿到发版，中间需要经过哪些步骤，有哪些注意事项，一个页面是如何划分功能模块开发出来的，以及怎样使用开发者工具来提高我们的开发效率这三方面来讲，我们结合自己的经验，给大家做个介绍， 仅供大家参考。
一、小程序从设计稿到发版
1.划分页面
当我们拿到设计图之后，第一步要分析设计图总共有多少页面，各个页面的流程关系，查看页面是否有缺失。
都理顺之后，将页面整理出来，在app.json的pages属性中配置；若有Tab页，将其配置到tabBar里。（展示图片）比如像这种设计图，tabBar小程序所特有的属性配置，这里需要注意一下。
2.链接页面
在app.json里将所有的页面都配置好后，小程序很智能化，也帮我们将所有的页面都生成好了， 通过链接或者按钮串联起来。不需要编任何页面样式和逻辑，只要页面能正常跳转就行。这样一个简易的小程序demo成型了，目的在于可以快速试错。体验整个项目的流程，如果感觉流程有问题，可以马上返工修改，如果是业务问题，这个时候提出也比较适宜。页面流程没有问题了，把页面间传递的参数固定下来，分别写入跳转链接和onLoad参数中。（要不要展示）。还有一个好处，其实就可以进行任务划分，将一些关联性比较强的页面分给一个人做。
3.搭建基础设施
小程序的基础设施包括了基础样式库，passport 登录、api请求、HTTP封装、工具类库、和开发公共组件。
根据设计稿的需要，如果小程序设计风格比较统一，我们可以编写通用的样式，引入到app.wxss文件中，app.wxss里的样式是被所有页面共用。
passport可以自己开发，也可以直接使用专哥封装好的SDK。专哥对passport登录封装了两种SDK, 一种是业务需要开启游客模式、有登录界面的，一种是只需要微信授权无登录界面的。
对于api请求，建议将所有api请求集中存放，方便接口复用和统一管理，减轻业务面的复杂度。对http请求推荐使用Promise编写异步请求，可以避免回调函数嵌套过深造成的 “地狱回调”。
我们可以编写一些通用的工具类或者方法，比如日期格式化，字符串校验等。供大家使用。对于多页面复用较多的功能模块， 我们封装为组件，供多页面使用，降低开发成本。
4.编写静态页面
依照设计稿，完成各页面的样式和功能。我们可以先用mock数据渲染页面。
5.后端联调
后台接口OK了，我们就可以进行联调，以及一些优化调整工作。
注意：如果小程序有支付功能，务必要提前申请商户号。
6.测试 发版
自测后，首先发布体验版内部测试。体验版测试通过后，向微信提审。
审核通过后，再测试一遍，测试通过后，正式发版上线。（小程序管理平台操作）
我们拿到设计稿后先划分页面，做简易demo做任务划分、搭建基础设施、mock渲染页面、接口联调、到测试发版，这是我们的一个开发流程，那么对于一个小程序页面是怎样开发出来的呢？
二、 页面实战 - 星能量公益排行榜
展示设计图 首页的
拿到这个设计图，我们大致可以了解到这个页面包含首页开屏、 弹幕、弹窗、tab切换、日期选择器、支付、明星列表这些功能模块。
相对而言支付功能在多个页面中都存在，我们就可以将它们做成组件，以供多页面重复使用。
图：我想把页面分为 header content footer
header: 弹幕
content: 首页开屏、活动弹窗、tab切换、日期选择器、明星列表、支付、消息提示框
footer: buttons
component: 支付组件
现在就算把支付功能抽象成组件，其它功能也比较复杂，整个页面比较重，这里我考虑将页面拆分为多个模块。
页面 template: 首页开屏、活动弹窗、消息提示框
header: 弹幕
content : tab切换、日期选择器、明星列表
footer: buttons
component: 支付组件
template: 首页开屏、活动弹窗、消息提示框
- tempalte 的定义和使用
演示：首页.wxml文件 打开开发者工具 展示
如何定义一个模版片段，然后在不同的地方调用呢？
使用name属性作为模块的名字，然后在 <template />内定义代码片段
模块定义好了，我们想使用模块，在需要的页面或者模块的头部 ，通过<import />标签引入
使用is属性，声明需要的使用的模块，然后将模块所需要的data传入。说到数据传入 这里可以使用es6的新语法 简写和展开运算符
模版拥有自己的作用域，
c>> b. b>>a. 但是 c>>a 不可以
- 支付组件定义和使用
创建自定义组件类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明 （将component字段设为 true ）,同时还要在wxml文件中编写组件模块，在wxss文件中加入组件样式，它们的写法与页面的写法类似。
在自定义组件的js文件中，需要使用component()来注册组件，properties用于接收外部传入的数据，data用于存放组件的内部数据，methods组件的自定方法。
组件开发好了，如何使用自定义组件呢，首先要在页面的json文件中进行引用声明，使用的组件名是什么，组件路径是什么，然后，在index.js页面的data属性中新增支付组件参数 pay ,这里的支付组件需要的四个参数，分别是 是否显示支付弹窗 明星的ID和姓名 以及项目的uuid，
接下来，在的index.wxml 中就可以像使用基础组件一样使用pay组件, 并监听组件的 paid 支付成功事件。onPaid回调韩式的参数是一个对象，拿到订单相关的参数，自行决定如何跳转。
4.模版与组件的区别
说完了tempalte 和 component ，我们来看看它们的区别，tempalte基本上做纯展示，只需要接受数据渲染就好，component是个独立的功能模块，包含了逻辑业务的处理，我们可以把component当成一个黑盒子，只要给它所需要的参数，它自行处理后，就能返回我们想要的东西，从使用组件来说，不需要关心它的内部实现。
模版是定义一个带有自己样式的代码片段 ，不涉及业务逻辑
组件是一个独立的功能模块，可以把它当成一个黑盒，不用管它都处理了哪些事情，只需要知道 你给它一个参数，就能到你想要的结果。
三、擅用微信开发者工具
工欲善其事 必先利其器，既然我们实战开发小程序，当然要用好微信开发者工具，用好开发工具可以提高我们的工作效率。
微信开发者工具主要分为五大部分 菜单 工具栏 模拟器 编辑器 和调试器
工具栏里的右上角 有对模拟器 编辑器 调试器显示的控制按钮，用起来很方便，中间部分可以自定义编译，比如说定义详情页，可以设置启动参数，进入场景，这个功能的好处就避免了，很多时候我们开发多级页面，每次保存都会刷新回到首页，再层层点击进去看效果这样的问题。
预览功能 可以通过扫描 直接看页面效果，很方便的一个功能，
当我们开发登录或者离线存储这些功能的时候，可以充分派上清缓存的功能
当我开发告一段落，我们可以直接在开发者工具上 点击上传。提交代码为体验版 进行测试
详情这个功能也很赞，展开详情，我们可以清楚的知道小程序的appid 本地代码的大小 以及项目的一些设置 和 域名信息
调试工具中 appData特别好用，appdata实时地反映项目数据情况 在这编辑数据，可以及时地反馈到界面上。
随着开发者工具不断的更新优化，在开发者工具上开发调试的体验还可以，建议大家熟练的使用开发者工具来提高我们的开发效率。
