APPLET 小程序动态
我们的作品，他们的故事
Our work, their stories
Our work, their stories
微信小程序开发，这些细节你必须注意
16-11-07
自2016年1月张小龙第一次公布未来可能会推出一种新的应用号形态，到9月底公布内侧，再到11月3日晚，微信团队正式对外公测，开发者可登陆微信公众平台申请，并允许将产品提交至微信公众平台审核。千呼万唤的小程序公测消息一经公布，业内一片哗然，笔者作为小程序早期的研究者，后续会为大家全面剖析小程序，本篇作为小程序系列文章的第一篇文章，为大家解读开发小程序不得不注意的一些细节。
一、小程序为什么箭在弦上却不能发布
小程序从内测到公测，仅仅只间隔了一个月的时间，内测仅开放200个名额，只支持上传不支持发布，公测也是如此，小程序的公测虽然从介绍、设计、开发、运营都进行了详细且严格的规定，但是微信内部也清楚，首批小程序质量掺差不齐，一定会存在不少问题。微信需要这次公测找到首批合规的小程序标杆，给后面的小程序开发者提供一个可以借鉴的样板。
二、给微信团队和市场一定的缓冲时间
微信公测对外公布的小程序规范明确且详细，市场必须有一个接受和调整过程，相信大部分人第一次看到如此详细的规范，都会感觉到头疼，第一批试水者只能是逐步摸索开发出适合规范的小程序，这也就意味着市场上小程序的上线不可能一蹴而就，需要开发者和微信团队多次磨合，微信团队也会借此机会观察市第一批小程序的开发者到底有多少符合规范，以便制定下一步的市场培育工作。再过一段时间，微信团队会根据市场情况正式开通小程序发布功能，这个时间笔者判断可能是1个月左右的时间，也就是12月初。
因此，这段时间是开发者好好琢磨如何按照规范开发小程序的黄金时间，如果您够用心，够投入，说不定您的小程序有可能成为市场上第一批正式上线的小程序，同时您的小程序也可能成为细分行业的模板和标杆。为此，笔者为大家整理浓缩出一些必要的细节提醒各位开发者注意，以便大家在最短的时间内开发符合规范的小程序，少走弯路。
三、小程序注册与订阅号服务号基本一致
微信小程序开发，这些细节你必须注意！
从提供的资料来看，小程序依然通过微信公众号的后台注册，注册流程、认证流程和之前的订阅号服务号大体一致，需要注意的是，小程序目前只支持各种企业类型的申请、暂不支持个人，注册的名称和邮箱都必须使用新的，和之前的订阅号、服务号不能使用同一账号。这也就印证了之前张小龙之前所讲的“小程序是一种新的应用号形态”。
四、一个小程序可以包含多个应用
微信小程序开发，这些细节你必须注意！
微信小程序这次定义“已认证的小程序可以绑定不多于20个开发者。未认证的小程序可以绑定不多于10个开发者。”笔者可以直接判断，一个小程序可以包含多个应用，或者说是应用矩阵。从公布的绑定开发者数量来看，小程序增加了开发者数量，这也就意味着小程序不仅可以包含多个应用，每个应用还可以独立管理，最终由管理员统一提交。这让笔者想到，一个正常的APP后台，管理者可以在后台分配多角色多模块，以协调不同岗位如：程序猿、运营人员、市场营销人员的日常工作。但是微信团队本次没有对这方面没有明确定义，小程序开发好以后如何运营、如何推广，笔者将在后续文章里做详细的论述。
五、小程序的配置功能未来也许是可以大作文章的地方
微信小程序开发，这些细节你必须注意！
微信小程序这次对配置功能页面是这样定义的：为了用户可以快速搜索出小程序，需要填写重要业务页面的类目与标签。重要业务页面组数不多于5组。
这也就意味着，小程序页面可以加标签，标签可以有利于用户搜索到精准的小程序，开发者可以利用标签为小程序实现精准导流。另外一点，如果微信团队能够开放搜索功能，能够让搜索结果不仅与页面标签匹配，同时也可以与小程序页面代码里的关键词标签匹配（原理与SEO类似），那无疑对于小程序开发者是一个好消息。但是截至目前，微信团队并没有透露与此相关的任何信息，我们只能慢慢摸索。但是，这些都是未来可以想象的地方，我们在后面的文章里再做详细论述。
六、小程序开发并非随心所欲，你需要看懂以下规则才能不走弯路：
1、小程序的功能定义与实际提供的服务必须一致；小程序所提供的类目，必须放置在首页，最深也只能放置在二级页面；
2、小程序所提供的服务目前暂时不能涉及游戏、直播等服务（涉黄涉赌就不用多说了）内容也不能涉及测试类内容；比如：算命，抽签，星座运势等；
3、小程序所提供的服务可以允许设置付费可见及隐藏可见（这点对于开发者来说可以发挥地方很多，具体在后面文章做详细论述）；
4、小程序不能提供与微信现有功能相似的服务，如含朋友圈、漂流瓶等，也不能提供导航、排行榜、互推的服务；
5、小程序一如既往的不支持诱导分享、诱导关注，虚假欺诈等内容，也不支持广告展示比例超过50%的页面内容；
6、小程序不得诱导、泄露、转让用户的任何数据。所有行为都必须经过用户授权或有明显提示；
七、微信团队对小程序设计也有严格定义，前端工程师们需要看懂以下规则：
1、页面设计需要考虑除微信导航以外其它导航页面的设计，遵循“导航明确，来去自如”，也就是能让客户知道，当前在哪，可以去哪，如何回去等问题。
2、页面设计需要遵循重点突出，并且不能出现与业务无关的业务入口，正反举例：
错误示例
以上页面主题是查询，但查询按钮下面却出现“今日热点|头条新闻”的无关内容
正确示例
以上页面查询按钮下面显示的是最新搜索过的关键词，与页面主题匹配
3、页面设计无需考虑微信一级菜单的导航，微信系统内的所有小程序均会自带有微信提供的导航栏
标准导航图
4、微信导航栏自定义颜色规则，开发者如果需要自设导航需要与官方定义的颜色和谐搭配
官方定义导航颜色
5、小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。初期的页面内导航设计尽可能利用微信自带导航Tab，添加自有导航可以添加标签分页（Tab）导航，标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。
小程序标准导航样式
6、小程序已经明确定义了标准的启动页面和页面下拉刷新加载样式，无需开发者设计，启动页面只能上传品牌LOGO且不能更改。
小程序启动页标准样式
下拉加载页标准样式
7、小程序页面的加载反馈和结果反馈应提供载入进度和结果提示，并且每个页面都要有明确的指引操作和退出提示。
加载页必须有加载提示如右边图
结果反馈必须有明确提示如：已发送
8、小程序页面设计需要遵循“减少输入，巧用接口，多用选择”的原则，最大限度的优化用户体验，减少或避免不必要的键盘输入。
搜索内容建议设计成按钮选择而不是让用户手工输入
持卡人和卡号不建议让用户直接输入而是调用接口让用户选择
9、小程序页面的字体尽量与用户所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 10(pt)，字体颜色主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑；蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press与 Disable状态分别降低透明度为20%与10%
字体规范
字体颜色
主内容 Black 黑色，次内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段说明内容用 Semi 黑；
蓝色为链接用色，绿色为完成字样色，红色为出错用色
10、小程序页面同样明确定义了列表视觉规范、表单输入视觉规范、按钮使用原则、图标使用原则等详细的规范。
以上仅为笔者为大家整理出来的小程序设计最值得重视的诸多要点，如果您对小程序设计比较关注，请持续关注呆盟说后续推出的对《小程序设计指南》更专业的解读文章。
八、小程序对开发规则也进行了相应的解释和定义，基本定义如下：
1、开发者需要在公众号小程序的后台“设置”-“开发者设置”中获取AppID ，通过开发者工具，来完成小程序创建和代码编辑。
2、开发者在小程序后后台绑定身份之后，可以在开发者工具内实现编辑、预览、提交等所有工作流程。
3、小程序开发的基本文件包括app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
4、每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。
以上仅为笔者为整理出来的小程序开发基础规范，如果您对小程序开发比较关注，请持续关注后呆盟说后续推出的对《小程序开发指南》更专业的解读文章。
综上可见，开发者们想开发出一款真正符合规范的小程序并非是一朝一夕的事情，从微信团队给出的如此详细的开发设计文档来看，前端开发工程师所需要做的事情会更多，这也就意味着未来会诞生一个新的职位方向，我们暂且定义为“小程序设计师”。但是值得一提的是，一个复杂的小程序依然需要后台程序猿辅助小程序设计师完成整个小程序的搭建，所以负责APP开发程序猿们可以在不放弃APP开发的前提下，借此机会调整一下专注的方向，不用向之前网传的那样过于悲观。
小程序这次真的来了，公测的时间比我们想象的要快，这也标志着微信小程序正式走向市场。正如张小龙所提到的，微信不仅仅是一个传播内容平台，更是服务平台，而小程序就是服务平台中最重要的体现。
作为小程序早期的研究者，笔者的这篇文章主要提醒大家在开发小程序之前，务必要熟知小程序开发的诸多规则细节，少走弯路，更多详细专业的小程序解读笔者会在后续文章进行详细的论述。
一、小程序为什么箭在弦上却不能发布
小程序从内测到公测，仅仅只间隔了一个月的时间，内测仅开放200个名额，只支持上传不支持发布，公测也是如此，小程序的公测虽然从介绍、设计、开发、运营都进行了详细且严格的规定，但是微信内部也清楚，首批小程序质量掺差不齐，一定会存在不少问题。微信需要这次公测找到首批合规的小程序标杆，给后面的小程序开发者提供一个可以借鉴的样板。
二、给微信团队和市场一定的缓冲时间
微信公测对外公布的小程序规范明确且详细，市场必须有一个接受和调整过程，相信大部分人第一次看到如此详细的规范，都会感觉到头疼，第一批试水者只能是逐步摸索开发出适合规范的小程序，这也就意味着市场上小程序的上线不可能一蹴而就，需要开发者和微信团队多次磨合，微信团队也会借此机会观察市第一批小程序的开发者到底有多少符合规范，以便制定下一步的市场培育工作。再过一段时间，微信团队会根据市场情况正式开通小程序发布功能，这个时间笔者判断可能是1个月左右的时间，也就是12月初。
因此，这段时间是开发者好好琢磨如何按照规范开发小程序的黄金时间，如果您够用心，够投入，说不定您的小程序有可能成为市场上第一批正式上线的小程序，同时您的小程序也可能成为细分行业的模板和标杆。为此，笔者为大家整理浓缩出一些必要的细节提醒各位开发者注意，以便大家在最短的时间内开发符合规范的小程序，少走弯路。
三、小程序注册与订阅号服务号基本一致
微信小程序开发，这些细节你必须注意！
从提供的资料来看，小程序依然通过微信公众号的后台注册，注册流程、认证流程和之前的订阅号服务号大体一致，需要注意的是，小程序目前只支持各种企业类型的申请、暂不支持个人，注册的名称和邮箱都必须使用新的，和之前的订阅号、服务号不能使用同一账号。这也就印证了之前张小龙之前所讲的“小程序是一种新的应用号形态”。
四、一个小程序可以包含多个应用
微信小程序开发，这些细节你必须注意！
微信小程序这次定义“已认证的小程序可以绑定不多于20个开发者。未认证的小程序可以绑定不多于10个开发者。”笔者可以直接判断，一个小程序可以包含多个应用，或者说是应用矩阵。从公布的绑定开发者数量来看，小程序增加了开发者数量，这也就意味着小程序不仅可以包含多个应用，每个应用还可以独立管理，最终由管理员统一提交。这让笔者想到，一个正常的APP后台，管理者可以在后台分配多角色多模块，以协调不同岗位如：程序猿、运营人员、市场营销人员的日常工作。但是微信团队本次没有对这方面没有明确定义，小程序开发好以后如何运营、如何推广，笔者将在后续文章里做详细的论述。
五、小程序的配置功能未来也许是可以大作文章的地方
微信小程序开发，这些细节你必须注意！
微信小程序这次对配置功能页面是这样定义的：为了用户可以快速搜索出小程序，需要填写重要业务页面的类目与标签。重要业务页面组数不多于5组。
这也就意味着，小程序页面可以加标签，标签可以有利于用户搜索到精准的小程序，开发者可以利用标签为小程序实现精准导流。另外一点，如果微信团队能够开放搜索功能，能够让搜索结果不仅与页面标签匹配，同时也可以与小程序页面代码里的关键词标签匹配（原理与SEO类似），那无疑对于小程序开发者是一个好消息。但是截至目前，微信团队并没有透露与此相关的任何信息，我们只能慢慢摸索。但是，这些都是未来可以想象的地方，我们在后面的文章里再做详细论述。
六、小程序开发并非随心所欲，你需要看懂以下规则才能不走弯路：
1、小程序的功能定义与实际提供的服务必须一致；小程序所提供的类目，必须放置在首页，最深也只能放置在二级页面；
2、小程序所提供的服务目前暂时不能涉及游戏、直播等服务（涉黄涉赌就不用多说了）内容也不能涉及测试类内容；比如：算命，抽签，星座运势等；
3、小程序所提供的服务可以允许设置付费可见及隐藏可见（这点对于开发者来说可以发挥地方很多，具体在后面文章做详细论述）；
4、小程序不能提供与微信现有功能相似的服务，如含朋友圈、漂流瓶等，也不能提供导航、排行榜、互推的服务；
5、小程序一如既往的不支持诱导分享、诱导关注，虚假欺诈等内容，也不支持广告展示比例超过50%的页面内容；
6、小程序不得诱导、泄露、转让用户的任何数据。所有行为都必须经过用户授权或有明显提示；
七、微信团队对小程序设计也有严格定义，前端工程师们需要看懂以下规则：
1、页面设计需要考虑除微信导航以外其它导航页面的设计，遵循“导航明确，来去自如”，也就是能让客户知道，当前在哪，可以去哪，如何回去等问题。
2、页面设计需要遵循重点突出，并且不能出现与业务无关的业务入口，正反举例：
错误示例
以上页面主题是查询，但查询按钮下面却出现“今日热点|头条新闻”的无关内容
正确示例
以上页面查询按钮下面显示的是最新搜索过的关键词，与页面主题匹配
3、页面设计无需考虑微信一级菜单的导航，微信系统内的所有小程序均会自带有微信提供的导航栏
标准导航图
4、微信导航栏自定义颜色规则，开发者如果需要自设导航需要与官方定义的颜色和谐搭配
官方定义导航颜色
5、小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用。初期的页面内导航设计尽可能利用微信自带导航Tab，添加自有导航可以添加标签分页（Tab）导航，标签数量不得少于2个，最多不得超过5个，为确保点击区域，建议标签数量不超过4项。
小程序标准导航样式
6、小程序已经明确定义了标准的启动页面和页面下拉刷新加载样式，无需开发者设计，启动页面只能上传品牌LOGO且不能更改。
小程序启动页标准样式
下拉加载页标准样式
7、小程序页面的加载反馈和结果反馈应提供载入进度和结果提示，并且每个页面都要有明确的指引操作和退出提示。
加载页必须有加载提示如右边图
结果反馈必须有明确提示如：已发送
8、小程序页面设计需要遵循“减少输入，巧用接口，多用选择”的原则，最大限度的优化用户体验，减少或避免不必要的键盘输入。
搜索内容建议设计成按钮选择而不是让用户手工输入
持卡人和卡号不建议让用户直接输入而是调用接口让用户选择
9、小程序页面的字体尽量与用户所运行的系统字体保持一致，常用字号为20, 18, 17, 16,14 13, 10(pt)，字体颜色主内容 Black 黑色，次要内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段的说明内容而且属于主要内容用 Semi 黑；蓝色为链接用色，绿色为完成字样色，红色为出错用色 Press与 Disable状态分别降低透明度为20%与10%
字体规范
字体颜色
主内容 Black 黑色，次内容 Grey 灰色；时间戳与表单缺省值 Light 灰色；大段说明内容用 Semi 黑；
蓝色为链接用色，绿色为完成字样色，红色为出错用色
10、小程序页面同样明确定义了列表视觉规范、表单输入视觉规范、按钮使用原则、图标使用原则等详细的规范。
以上仅为笔者为大家整理出来的小程序设计最值得重视的诸多要点，如果您对小程序设计比较关注，请持续关注呆盟说后续推出的对《小程序设计指南》更专业的解读文章。
八、小程序对开发规则也进行了相应的解释和定义，基本定义如下：
1、开发者需要在公众号小程序的后台“设置”-“开发者设置”中获取AppID ，通过开发者工具，来完成小程序创建和代码编辑。
2、开发者在小程序后后台绑定身份之后，可以在开发者工具内实现编辑、预览、提交等所有工作流程。
3、小程序开发的基本文件包括app.js、app.json、app.wxss 这三个。其中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。
4、每一个小程序页面是由同路径下同名的四个不同后缀文件的组成，如：index.js、index.wxml、index.wxss、index.json。.js后缀的文件是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件，.wxml后缀的文件是页面结构文件。
以上仅为笔者为整理出来的小程序开发基础规范，如果您对小程序开发比较关注，请持续关注后呆盟说后续推出的对《小程序开发指南》更专业的解读文章。
综上可见，开发者们想开发出一款真正符合规范的小程序并非是一朝一夕的事情，从微信团队给出的如此详细的开发设计文档来看，前端开发工程师所需要做的事情会更多，这也就意味着未来会诞生一个新的职位方向，我们暂且定义为“小程序设计师”。但是值得一提的是，一个复杂的小程序依然需要后台程序猿辅助小程序设计师完成整个小程序的搭建，所以负责APP开发程序猿们可以在不放弃APP开发的前提下，借此机会调整一下专注的方向，不用向之前网传的那样过于悲观。
小程序这次真的来了，公测的时间比我们想象的要快，这也标志着微信小程序正式走向市场。正如张小龙所提到的，微信不仅仅是一个传播内容平台，更是服务平台，而小程序就是服务平台中最重要的体现。
作为小程序早期的研究者，笔者的这篇文章主要提醒大家在开发小程序之前，务必要熟知小程序开发的诸多规则细节，少走弯路，更多详细专业的小程序解读笔者会在后续文章进行详细的论述。
上一篇:微信小程序开发七大必看要点
