博客主要提供第九程序9.cn最新资讯和相关内容
零基础开发『仿知乎』小程序具体步骤
有多少人想开发个小程序，结果发现自己的基础为0.
今天，给大家分享一个励志案例：一个读大气科学、自学前端开发的妹子，因为喜欢逛知乎，自己做出了一款「仿知乎」小程序。
希望她的开发经验，能帮大家轻松愉悦地迈出小程序开发的第一步。
作者 | Rebecca Han
WEB 前端/不靠谱天气预报员/想做代码小仙女
从开始内测到现在，我终于把自己的微信小程序 demo 完成了。
真的是墨迹完的，连我自己都佩服自己的拖延症了（懒癌少女已弃疗 ヾ（?A｀）ノ?） 总之，算是基本完成了（明明有很多组件啊、API 啊根本都没用好嘛 →_→）以及从来不写 blog 的我也出来码字啦 （??ヮ?）?:???
之前有很长一段时间，我算是知乎重度依赖。所以，这次 demo 的模仿对象选择的是知乎（但是写到一半发现我这个决定坑了，这是后话）。
Demo 的界面设计以及交互设计，均来自于知乎 Android 版本。
工具：使用的是微信 web 开发者工具，这个工具已经全面对非邀请内测用户开放，且在持续更新中（我码代码的过程中就更新了两版，所以开发时 IDE 版本不唯一）。其实，忍受了半个小时微信的开发者工具之后，我就改在 Webstorm 中编辑了，微信工具成了运行预览的工具。不过听说 IDE 中预览的效果，也不能保证与真机一样哦~设计和功能：参照的是知乎安卓版本非常之简易版，为了防止版权问题，Demo 中的 fake 数据使用的是我自己的回答。
1. 基础文件
"pages": [
"pages/index/index",
"pages/discovery/discovery",
"pages/notify/notify",
"pages/chat/chat",
"pages/more/more",
"pages/answer/answer",
"pages/question/question"
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#0068C4",
"navigationBarTitleText": "知乎",
"navigationBarTextStyle": "white",
"enablePullDownRefresh": true
"tabBar": {
"color": "#626567",
"selectedColor": "#2A8CE5",
"backgroundColor": "#FBFBFB",
"borderStyle": "white"
"list": [{
"pagePath": "pages/index/index",
"text": "",
"iconPath": "images/index.png",
"selectedIconPath": "images/index_focus.png"
"pagePath": "pages/discovery/discovery",
"text": "",
"iconPath": "images/discovery.png",
"selectedIconPath": "images/discovery_focus.png"
"pagePath": "pages/notify/notify",
"text": "",
"iconPath": "images/ring.png",
"selectedIconPath": "images/ring_focus.png"
"pagePath": "pages/chat/chat",
"text": "",
"iconPath": "images/chat.png",
"selectedIconPath": "images/chat_focus.png"
"pagePath": "pages/more/more"
"text": ""
"iconPath": "images/burger.png"
"selectedIconPath": "images/burger_focus.png"
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
"debug": true
app.json 文件中是对整个小程序的全局配置，主要用到的字段有pages，window，tabBar，networkTimeout。
pages 字段：所有小程序的页面都要在该字段中注册，该字段数组中的第一个 page 默认为小程序首页（设置 tab 除外），没有在 pages 字段注册过的页面貌似不能够进行有效的编译（之前版本的编辑器没有这个限制，只是会影响配置文件等的生效，编辑器更新后会报未注册的错误）。window 字段：大多是关于小程序顶部 navigationbar 的一些设置。tabBar 字段：如果你需要首页底部带 tabbar 的样式，那么就在 tabBar 字段中设置每个 tab 对应的页面，按顺序对应左至右，包括路径、tab 文字、tab 图标和选中状态图标。networkTimeout：设置网络超时时间。debug：开启 debug 模式。app.wxss 文件中为全局样式，也就是说这个文件中的样式在所有的 pages 中均可使用。若其他页面文件的 WXSS 中定义了与该样式文件中相同的属性，则该文件中的样式被覆盖，规则与 CSS 优先规则大致相通。
app.js 用于调用 login 接口、回调、周期函数、本地存储等等逻辑代码。
2. 页面文件
页面文件由四部分组成。
例如，我们有一个首页叫做 index，则需要在 pages 文件夹下创建文件名相同的三个必要文件:
index.wxmlindex.wxssindex.js另外 index.json 文件为可选，功能与 app.json 相同，为该页面的配置文件，但定义功能有限。
跟平时开发一样，最开始当然是码 UI。
除了需要依照微信的一些新的标签和样式规则，其他与平时码 UI 并没有太大的不同。
而且需要强调的是，flex 布局在微信小程序中 hin~~~~好用
不过，同时作为女生和程序员，不挑刺可就不是我了，所以下面列举了一些我遇上的坑，其中有些也许不正确（多多包涵啦\(//?//)\），有些也许已在 IDE 更新中修正：
有一些 CSS 样式在微信 IDE 中不支持，例如 font-weight、letter-spacing（以及调整字间距的样式）等；&text/& 不支持嵌套，&text/& 两层嵌套的结构下，内层中的内容会连续显示两次（在 IDE 后续更新中已修正）；若 &view/& 与 &text/& 同级，则在实际使用中，&view /& 会遮住 &text /&。为了防止内容相叠，必须使用 &view/& 相并列。所以并不像某些地方说的，可以完全地把 &view/& 当做 &div& 去使用！元素之前有垂直相邻 margin 的时候，在微信小程序中会 double 显示，即两个元素的 margin 均摊开，不遵循 margin 折叠规则；标签 hidden 属性无效（v0.10.101400 中已修正）；部分情况下，平级元素标签优先级会出现问题。比如， 平级标签 A 与 B，当 B 通过某些调整向 A 元素位置相叠的时候，微信 IDE 解析出的效果是 A 的内容和背景色会覆盖 B 元素与之重叠的部分（普通浏览器解析应该是 B 覆盖 A）；如果用模板+列表渲染的方式来渲染数据的话，在模板中使用列表渲染的{{item}} 是无效的，无法被正确识别。所以，列表渲染的时候，要把复用的部分写在列表渲染的代码块内（属于数据渲染部分，后面会提到）。在后来，微信 IDE 的迭代中已经将上面清单中的一些问题修正了，所以这份清单有可能是过时的。大家也可以根据实际情况，自行尝试。
接下来，我将对于一些 demo 中写到用到的部分进行说明。
开始实战开发
1. 列表式的数据渲染
类似于「首页」以及「发现页」这种标准列表式的数据展现方式，微信提供了很好的方案：列表渲染。
{{feed}{{idx}
{{item.feed_source_img}
{{item.feed_source_name}} {{item.feed_source_txt}}
{{question_id}
{{item.question}}
{{answer_id} {{item.answer_ctnt}}
{{item.good_num}} 赞同
{{item.comment_num}} 评论
可以直观地看出，就是 for 循环用重复的结构渲染一组数据：
for="{{}}“中的内容是想要循环的一组数据，最外层为数组结构for-item 指定数组中当前元素的变量名for-index 指定数组中当前元素下标变量名同样也使用了 for 渲染的，还有顶部的发现页和通知页等顶部的自定义 tabbar。
2. 顶部 Tabbar 实现
微信只提供了底部 tabbar，所以顶部的要自己写喽~
顶部 tab bar 的实现在于 for 列表渲染以及 JS 配合。
实例 WXML 代码：
{{currentNavtab==idx ? 'active' : ''}{{navTab}{{idx} {{itemName}}
{{toView}{{scrollTop}
{{currentNavtab==0 ? '' : true}
{{currentNavtab==1 ? '' : true}
{{currentNavtab==2 ? '' : true}
{{currentNavtab==3 ? '' : true}
navTab: ["推荐", "圆桌", "热门", "收藏"]
, currentNavtab: "0"
, onLoad: function () {
console.log('onLoad')
, switchTab: function (e) {
this.setData({
currentNavtab: e.currentTarget.dataset.idx
由于微信不支持使用 DOM 访问对象，也就是不支持 dom 和 window 对象，所以 tab bar 的实现依赖于微信提供的视图层的展示逻辑，以及视图与数据之间的绑定机制。
绑定点击事件，通过改变一个 data- 属性的值，来控制元素的类的改变（从而改变样式等）。
以下是实现的 WXML 代码：
{{indicatorDots}{{autoplay}{{interval}{{duration}
{{imgUrls}
imgUrls: [
'../../images/24213.jpg'
, '../../images/24280.jpg'
, '../../images/7-_DSC1826.jpg'
, indicatorDots: false
, autoplay: true
, interval: 5000
, duration: 1000
, feed: []
, feed_length: 0
轮播图的实现使用的是微信提供的 swiper 组件，该组件贴心的提供了各种属性选择，常用的包括 autoplay，interval 时间 duration 等
swiper-item 中包含的是所有轮播的图片，为了方便修改图片数据，同样采用 for 渲染绑定 data 的方式。
4. 下拉刷新，上拉加载，以及数据请求
刷新及继续加载的动作，依靠的是 scroll-view 标签，及配套的 upper 和 lower 事件。
标签的属性提供了 bindscrolltoupper 和 bindscrolltolower 来绑定滚动到顶部及底部所触发的事件，同时 upper-threshold 和 lower-threshold 能够调整触发时距边界的距离。
除上述之外，小程序的 API 还提供横向滚动、滚动触发事件、设置滚动条位置等接口。
{{toView}{{scrollTop}
{{feed}{{idx}
{{item.feed_source_img}
{{item.feed_source_name}} {{item.feed_source_txt}}
{{question_id}
{{item.question}}
{{answer_id} {{item.answer_ctnt}}
{{item.good_num}} 赞同
{{item.comment_num}} 评论
滚动至顶或至底时，触发的加载数据的事件，本应该调用微信提供的网络请求 API 来获取数据。
但是比较坑的是，我在选择写仿知乎 demo 的时候没有注意到知乎不提供开放 API，而微信的 API 不支持直接对 JSON 文件进行本地请求。
无奈之下，选择在 JS 文件中伪造一段数据，用 module.exports 抛出，来 fake 数据请求：
upper: function () {
wx.showNavigationBarLoading()
this.refresh();
console.log("upper");
setTimeout(function () {
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
}, lower: function (e) {
wx.showNavigationBarLoading();
var that = this;
setTimeout(function () {
wx.hideNavigationBarLoading();
that.nextLoad();
console.log("lower")
refresh0: function () {
var index_api = '';
util.getData(index_api).then(function (data) {
console.log(data);
refresh: function () {
var feed = util.getDiscovery();
console.log("loaddata");
var feed_data = feed.
this.setData({
feed: feed_data
, feed_length: feed_data.length
nextLoad: function () {
var next = util.discoveryNext();
console.log("continueload");
var next_data = next.
this.setData({
feed: this.data.feed.concat(next_data)
, feed_length: this.data.feed_length + next_data.length
由于是 fake 的数据，所以这个 demo 并没有做真实的带参跳转，查询等功能。
加载数据的同时，使用微信提供的加载动画 wx.showNavigationBarLoading();。
为了实现点击跳转页面，使用了 wx.navigateTo 进行页面跳转以及点击事件绑定；部分常用组件的模块化；input、image 组件等的使用。6. 后续
其实还有大量的组件和 API 还没有用过，这个 demo 也许后续还会有更新呦，这取决于懒癌少女的病情严重程度了。
其实作为一个小前端，由于工作中的原因，使用 MVVM 其实是非常少的。
不过，写了这个微信小程序 demo 之后，更加把这方面的思维理顺了。当然，写完之后回头看，还是有超多的不足，明明好些地方能再换一种写法的。
这毕竟是我第一次尝试用新鲜热乎的东西写小 demo，也是第一次尝试写教程……或者算是记录？whatever~~
Anyway~ 希望除了写代码之外，还能在码文字的道路上也多走走吧，毕竟我是要做代码小仙女的人呀\（≧?≦）ゞ
没有更多推荐了，点赞科技深度解读小程序三部曲
为什么布局小程序&
& & & & & &1小程序是强流量入口、小程序是未来商业竞争的主战场。
& & & &微信是目前最大的移动端流量入口，日活跃用户9.63亿，而百度的日活用户才刚刚过1亿。流量在哪里，企业客户自然会去到哪里，就像微赞，现在每天都会有成千上万家的企业推出自己的小程序，如同2000年之后所有的企业都有强烈的建站需求一样，你不做，但你的竞争对手一定会做，你就会被竞争对手赶超。小程序搜索最开始是精准搜索，现在是模糊搜索，可以大概率的预见到未来一定会实现向淘宝或百度一样的意图搜索以及搜索广告（搜索广告目前已经有了）。由于微信日活是（百度+淘宝日活用户）的3-4倍，基于微信庞大用户基数的搜索流量必然是有强大的想象空间的。而微信搜索结果中无论是现在、还是未来，小程序因为可以满足各种应用场景，一定是权重最高的应用。无论贵公司是经营哪方面的业务，小程序都注定成为你们的主战场，当然如果你较早经营小程序，必定会给你们提供强大的竞争优势。
& & & & & & & &网站是pc互联网时代所有企业的天然应用，小程序是每一个企业在移动互联网时代天然的应用
& & & &网站是pc时代所有企业的必备，app无疑是移动互联网时代企业最自然的转型，然而由于app高昂的开发成本、复杂的访问路径，昂贵的推广费用，让大多数企业对app的应用避之不及，而小程序的诞生，以接近原生态app的体验、无需下载和关注，访问后永久记录，则将企业在移动互联网时代的应用平台推向千家万户。
& & & &有一个很形象的比喻：
& & & &开发一个app好比是在一个荒芜人烟的的地方开一个店，要自己负责推广，我要从0开始把这个地方变得特别热闹，还需创建各种基础设施。而小程序相当于在商业街或者万达广场上开店，水电都是现成的，关键还是天然的客流。
& & & &有人说，那我已经有了app或者网站了怎么办？
& & & &答案很简单：当用户不在那里，那就放弃他，没必要固守阵地，当用户的行为和习惯发生变化的时候，企业也必须要转型和升级，你说我不转，那你就等着别人来超越你吧。& & & & && & & &
& & & & & & & &可以轻易获得用户数据
& & & &由于小程序的所有用户都来自于微信，一旦用户访问小程序，就会有一个清晰的用户画像，有利于深度分析用户群体，很明显无论是pc时代的网站还是移动互联网时代的app，都有高昂的用户注册成本，要想深度分析用户数据就更是难上加难了，而微信小程序则提供一步到位的强大的数据分析，帮助你分析用户，发现用户，最终营销客户。
& & & & & & & &附近的小程序是未来o2o第一平台
& & & &除了小程序的重要历史地位之外，我们大多数用户打开附近的小程序都会看到周黑鸭的小程序，家政的小程序、星巴克的小程序、农行的小程序、麦当劳的小程序，可以说附近的小程序在未来会像美团+58一样，几乎囊括所有的本地生活服务商，由于美团和58的低频应用，用的时候下载，不用的时候就删掉，微信附近的小程序拥有即用即走的巨大优势，加上微信无人企及的流量优势，附近的小程序会成长为未来o2o的第一平台。
& & & &5微信搜索将超越百度成为搜索流量最大的平台
& & & &微信日活是百度日活的9倍，用户在微信中花费的时间更是百度的几十倍甚至上百倍，微信孕育了大众理财平台理财通、孕育了朋友圈、孕育了微信支付、孕育了公众号，微信之所以大力推广小程序，除了小程序具有巨大的覆盖b端用户的价值之外，基于小程序，微信将具有挑战百度第一搜索入口的重要基础。其逻辑如下：百度之所以是商业流量的分发中心是因为在传统pc互联网时代，所有的企业都会建站，所有的信息都是基于网站，而访问网站的最优质路径就是搜索，于是百度胜出；而在微信上目前似乎还难以做到这一点，但是小程序的推出，让所有企业具有了在移动互联网时代低成本建站并且被搜索流量获取的访问路径，因此微信意不在小程序，而在搜索，小程序是微信霸业的重要一局。
& & & &6关于微信小程序的41个庞大流量入口：
& & & &附近的小程序列表、附近的小程序列表广告、公众号相关小程序列表、公众号自定义菜单、公众号模板消息、公众号文章、公众号文章广告、发现栏小程序入口、小程序模板消息、前往体验版的入口页、安卓系统的桌面图标、小程序 profile页、体验版小程序绑定邀请页、扫描二维码、扫描一维码、扫描小程序码、顶部搜索框的搜索结果页、发现栏小程序主入口搜索框的搜索结果页、搜一搜的结果页、映月播放器菜单、微信钱包、微信支付完成页、二维码收款页面打开小程序、淡然聊天绘画中的小程序消息卡片、群聊会话中的小程序消息开票、聊天顶部置顶小程序入口、app分享消息卡片、代ShareTicket的小程序消息卡片（详情）、长按图片识别二维码、手机相册选取二维码、长按图片识别一维码、手机相册选取一维码、长按图片识别小程序码、我的卡包、卡券详情页、卡券的适用门店列表、小程序打开小程序、从另一个小程序返回、摇电视。如此众多的流量入口让小程序成为企业移动互联网标配变得必然！
& &如何布局小程序&
& & & & & &
& & & & & &1成为服务商
& & & &趋势之下必然催生大量小程序建站需求，这种需求的深度可达十余年，广度覆盖整个中华大地，这种需求就像历史的齿轮一样，从pc端建站滚转向了小程序，大量企业主没有自主研发的能力，只能依托于各种本地的小程序建站服务商，而服务商则利用代理的小程序自主建站系统，给本地客户提供全套的小程序搭建以及小程序装修设计的服务。
& & & &2成为平台商
& & & &从小程序诞生至今涌现了大量依托于小程序的平台商：订蛋糕+、玩车教授、花帮主识花、聚美优品、她厨美食、一家民宿、买一只。这些平台商通过精准的服务、小程序庞大的流量入口、、低成本的研发，迅速抢占市场，流量是一切平台发展壮大的第一要素，在传统的无论是pc时代还是app时代，由于高昂的流量成本，让平台运营成为一件只有大资本参与才有可能玩得起来的游戏，而小程序重新定义了平台——小程序，创造小平台。
& & & &3万千企业主如何布局
& & & &可以肯定小程序是所有企业，在移动互联网时代的标配。无论是在前互联网时代、互联网时代、移动互联网时代还是微信时代，营销都是任何企业或者本地商家的生命线，只要能保证持续的流量，企业和商家总是能保持勃勃的生机和较好的利润，说到底，生意就是通过流量将产品或服务进行转化。拥有9.63亿日活的微信现在终于开放了中心化的搜索流量（小程序权重最高）和本地化的附近的小程序（展示5公里内所有的小程序），可以说无论是淘宝商家、百度企业、还是本地的生活服务商家，都有一个巨大的流量增长机会。在这样的机会面前唯一竞争的就是时间，你做的越早就越有先发优势，就越能够与你的竞争对手拉开差距 ，当然，你的竞争对手肯定也在考虑小程序建站。
& &无论您是哪种类型的公司，无论您是哪种类型的老板，甚至创业者，小程序都为您提供了广阔的增长空间，正如巴菲特所说，企业存在的唯一价值就是寻找增长，毫无疑问，小程序会为您带来未来10年的增长。
& & & &要小心的是，你的竞争对手也许已经开始行动了。
&& & &&& & &&小程序市场
& & & & & & & &究竟有多大
& & & & & & & &微信在4月24日悄悄成立的搜索应用部，坐拥百度日活9倍用户基数，淘宝6-7倍日活用户基数，这一动作让百度和淘宝都不寒而栗。
& & & &然而故事还没结束，小程序在5月10号又上线了，附近的小程序，我们可以将附近的小程序称之为周边服务，附近小程序的上线，让新美大（美团+大众点评网）和饿了么也倒吸一口凉气。原来在美团、饿了么商家要支付10%甚至20%的佣金才能够获得的流量，现在通过微信周边的小程序同样可以实现，甚至流量远远超过新美大，而且小程序仅需低廉的建站费用即可。如果能够提供同样的服务，从长期来看，商家肯定是更愿意选择成本更低、流量更大的平台。针对消费者也是一样，从长期来看如果微信提供的服务和新美大提供的服务一样，并且还不需要再多下载app，消费者肯定是愿意在微信中解决一切， 看一下滴滴、理财通、电影票、朋友圈等产品的成功我们就已经大比例的预计到。
& & & &附近的小程序将深度应用到以下本地生活服务行业，深刻的改变行业的经营模式，包括不限于以下行业：
& & & &餐饮、酒店、电影院、ktv、足浴按摩水疗、运动健身、酒吧、网吧、茶馆、棋牌室、桌游、农家乐、户外拓展、旅游、机票火车票、婚摄摄影、课程培训、汽车服务、体检、洗衣、配眼镜、鲜花、蛋糕、美容美发美甲、整形、化妆、搬家、宠物、家电维修、招聘、房地产、装修建材、工商注册、二手物品等行业同样，微信搜索将深度应用到以下企业推广营销中，深刻的改变行业的经营模式，包括不限于以下行业：
& & & &服装鞋帽、箱包配饰、内衣、运动户外、母婴用品、童装、玩具、工艺品、日用百货、汽车用品、食品饮料、家纺装饰、家装建材、美容化妆、个护家清、3c、手机、家电、电工电气安防、办、公用品、电子照明设备、机械五金仪表、橡塑化工钢材等电视剧、电影、新闻、娱乐八卦、军事热点、游戏论坛、彩票、音乐、小说、动画漫画、商城、股票理财、女性、银行、天气、日历、快递、政府、菜谱、二次元。----------------------------------------------------------------------还是那句话，如果公众号改变了中国今天的媒体业，那么小程序一定会改变未来中国的商业。以上是关于小程序过去的观点，你被电击到了吗？如果你已经感触颇深，那么我想想告诉你：&GOOD&&&&故事才刚刚开始，下一期，微赞将带你了解小程序目前正在测试、即将上市的一些功能，这些小程序新的功能和应用将持续而强大的改变所有人的消费习惯。而强大的淘宝几无还手之力，如果淘宝在小程序面前毫无招架之力，那么美团、大众点评网、饿了么还能与小程序再过几招呢！
& & & & & & & & & &敏锐如你，必应提早布局小程序。
& & & & & & & & & & & & & &当2012年7月份有人告诉你公众号会改变中国的媒体行业，你应该选择相信还是不相信？
& & & & & & & & & & & & & &
电话：020-83 条评论分享收藏感谢收起duanshu.com），点击进入工作台 B、点击我的内容，选择新增图文或导入公众号文章，建议一键导入所有历史文章，再有选择地筛选/排版。C、点击添加公众号，用绑定公众号的管理员号码，扫描二维码后，点击确定授权 D、再次点击选择公众号文章，选择你需要上架的文章，点击上架到这里就完成公众号文章导入了，大家可以再次进行分类和编辑，因为这个产品手机预览的话是微信H5页面，有专栏啊课程啊音频视频图文直播，小程序是同步的，所以看各自的需要去排版吧。 三、授权生成小程序 A、点击终端设置-&小程序版-&授权小程序，用绑定公众号的微信扫描，点击确定即可生成小程序体验版 B、 按需要修改体验版（直接在后台修改就可以，不需要编程），没问题就可以提交微信审核，审核版通过以后就是线上已发布版本小程序了因为短书平台是专注于知识付费的产品，所以只能自动生成知识付费小程序，但是高级版可支持小程序的自定义设计，并且全平台版还支持进行 安卓App 和 ios App 的开发。比较适合做企业展示、教育培训和自媒体。 该文章如果对你有帮助的话，可以点赞+分享喔 ~ ~ 欢迎点击下方链接进行体验 短书新媒体变现平台。本文原创于短书平台（）短书是专注于知识付费与教育培训的平台，专注于成为知识变现技术服务商，为各位自媒体人、教育者、培训传播机构等提供更加稳固的技术支撑与更加精细的运营解决方案。短书可一站式满足内容承载、用户管理、付费转化、社群运营、数据分析五大核心需求，形成品牌闭环，快速完成用户沉淀，实现体系内变现。赞同 9添加评论分享收藏感谢收起分享到微信
使用微信扫码将网页分享到微信
从微信、公众账号、到微信支付，再到小程序，微信正逐渐将自己从一个「即时通讯工具」变成一个「操作系统」。但特殊的是，微信这个跨平台操作系统需要同时兼顾 iOS 及 Android 两套 UI 标准。
如何保证小程序的开发兼顾两种平台的界面风格，并与微信本身的体验保持统一呢？
阅读微信官方的设计文档是最有效的方式，里面提供了大量的用户界面实例，开发者只需严格依据这份设计文档，就可以做出兼具美观、实用的 UI 与交互模式。
为了帮助大家更快地理解设计文档，知晓程序（微信号 zxcx0101）专门准备了这份文档解读，不仅将设计文档的篇幅浓缩到二分之一，还在文末增加了小程序 UI 设计与传统的移动应用设计和网页设计的差异比较。
现在，只需花一半的时间看这篇文章，你就能掌握设计文档的所有要点。
注：本文主要针对小程序开发者和 UI 设计师。如果想零基础学习小程序开发，请继续关注知晓程序（微信号 zxcx0101）的后续内容。
小程序官方设计文档解读
微信小程序设计文档将所有的设计范例分为了四个部分，分别是：
除此之外，微信官方还提供了一些便于开发者使用的组件，这些组件可以在微信官方的小程序 IDE 中直接使用。
设计文档也针对这部分组件进行了详细说明，包括每个组件的适用范围。同时，还提供了 Sketch 与 Photoshop 的设计模板，便于 UI 设计师直接使用。
知晓程序（微信号 zxcx0101）建议：没有太多设计经验的开发者请尽可能使用微信提供的组件样式，这样可以在快速开发的前提下，保证小程序的用户体验。
1. 友好礼貌
微信官方希望小程序专注解决用户当前的问题，做一个「管家」，而非是在用户处理问题时候，一直制造干扰的「推销员」。
首先，每一个页面都应该聚焦于某个重点功能，不能与该功能无关。
例如，搜索页面的功能应该是「搜索」，与搜索无关的功能或内容（如 banner 广告以及诱导搜索关键词推广等）应该尽可能去除掉。
官方错误示例，在搜索页中添加无用信息
其次，页面的导航应该按照用户的预期进行。
例如，用户跳转进入一个页面时，小程序不应该弹出与之无关的广告，因为广告不符合用户进入页面的预期。
官方错误示例，进入页面弹出与功能无关广告
知晓程序（微信号 zxcx0101）建议：小程序设计时应该以快速解决用户问题为目标，并为其提供明确且符合预期的步骤导航。而这与张小龙在演讲中提到的「用完即走」的概念是吻合的。
2. 清晰明确
用户在操作小程序时，小程序应该为用户明示当前状态，同时应尽力减少用户在操作上的限制和等待时间。
微信官方已经为小程序提供了全局导航栏，包括导航区（返回按钮）、标题区和操作区三组。
如果开发者有需要，可以在小程序的首页中使用页面内导航，包括顶部 Tab 样式和底部标签样式。每种样式至少需要两个标签，最多不能超过五个标签，而微信官方给出建议是最多不要超过四个。
官方提供的底部标签和顶部 Tab 样式
开发者可以定义导航栏和页面内导航的风格颜色。在定义颜色时，开发者需要注意元素辨识度，不能出现刺眼、按钮与文字可视性差的情况。
小程序中的加载反馈细节也是影响整体体验的重要部分。微信提供了一个下拉刷新组件，只需要按照要求套用即可。
同时，页面内的加载提示推荐使用局部加载反馈而非全局加载反馈。加载时间较长时，建议提供进度条以减缓用户等待的焦灼感。
下拉刷新样式和局部加载示例
微信小程序提供三个结果提示方式，提示效果从轻至强的分别为小弹窗提示（toast）、模态框提示（modal）和单独的成功结果页面。开发者需要根据实际情况，对不同程度的提示进行合理利用。
知晓程序（微信号 zxcx0101）建议：操作反馈时用 toast，询问行为时用 modal，表单提交后用页面。
Toast、Modal 和成功页面
这份设计文档特别强调了异常情况的设计。在小程序中，异常情况需要明确告知用户出现了问题，同时明确告知用户问题出在哪里、应该如何解决。
文档对表单中填写出错情况的提示样式进行了规定。
表单错误提示示例
如果表单中出现错误，小程序应该在顶部弹出提示，并在错误项目的右侧提供错误 icon，以便用户定位问题。
3. 便捷优雅
微信官方希望小程序可以敏捷地解决问题。
比如，当用户在进行输入时，可以通过联想、API 接口以及其他方式（例如扫描银行卡等），帮助用户快速准确地填充输入内容。
扫描银行卡快速填充内容
在设计时，应该确保用户的误操作概率更低。
微信官方在文档中提到，可点击元素应该要保证足够大，以便用户能够有明确的点击反馈。但知晓程序（微信号 zxcx0101）提醒，文案及 icon 不让用户困惑也是减少误操作的重要方式之一。
4. 统一稳定
在设计文档中，有关于统一稳定的说法更倾向于「统一」。即小程序在整体上应该要为用户提供整齐划一的功能，避免同一种视觉元素中在不同页面中有不同的样式。
这样的原则，有助于保证用户的认知稳定性。设计师在设计的时候，应尽可能避免一个小程序中多种元素风格差异较大的情况。这样既不能保证小程序的视觉统一性，同时也对用户的认知稳定造成严重破坏。
知晓程序（微信号 zxcx0101）建议：在开发过程中，可以将相同的组件的样式规定于一个全局 WXSS 文件中，以便开发时快速复用并保证视觉统一。
如果网页设计师或移动应用 UI 设计师转向开发小程序的话，了解小程序与之前设计领域的异同是很有必要的。
我们以这份设计文档为基础，讲解小程序 UI 设计与传统的移动应用设计和网页设计的差异。
1. 如果你是网页设计师
对于网页设计师来说，小程序界面设计最大的挑战在于以往桌面为先的思维需要转向移动为先，因为作为一款依赖手机运行的应用，微信小程序需要聚焦于移动使用。
移动端与桌面端的区别在于：
屏幕尺寸与比例。移动设备的屏幕一般会比桌面设备的屏幕更小，同时屏幕比例从横向变成了纵向。
输入设备。桌面设备拥有鼠标和键盘，而移动设备上，用于信息输入的几乎只有手指。
网络特性。桌面端不需要考虑网络问题，但在移动设备上，用户使用的网络可能会有流量限制或速率限制。
因此，知晓程序（微信号 zxcx0101）要提醒网页设计师，在设计小程序界面的时候需要注意这些差异：
多花点功夫在排版上。在移动设备上使用程序，不像是在电脑上使用那么轻松自在。为小程序的元素和文字进行排版时，这些元素和文字应适当放大，同时加大间距。
避免花哨元素。过于花哨的元素在小屏幕上容易「吸」走用户的注意力，不符合设计文档中的规范，同时会增加用户的网络流量和载入时间。
注意导航系统设计。小程序没有「面包屑」（导航指示器），在设计的时候需要确保用户不会在页面中迷失，同时需要保证用户的下一步符合其预期。
多测试。在转换至小程序的初期，强烈建议将设计原型稿放到真机进行测试和评估。
2. 如果你是移动 UI 设计师
对于 UI 设计师来说，小程序带来了一个好消息和一个坏消息。
好消息：移动 UI 中的设计思维和范式，绝大部分都能用在小程序设计上，且设计师不需要为 iOS 与 Android 分别设计界面，只需将有差异的部分进行分情况讨论即可。
坏消息：微信原生提供的控件较为有限。微信中只提供了多种按钮、Toast、提示 icon、开关、多选框、复选框和滑块等几种控件。其他的控件需要自己根据实际风格进行开发和设计。
此外，微信小程序的风格与 iOS HIG 和 Material Design 两种设计范式差异都较大。在设计时，需要多加注意设计文档中的说明和范例，以便设计出符合标准的小程序界面。
对微信小程序设计文档的解读就到这里为止了。希望通过这份解读文档，能帮助开发者轻松开发出具有优良体验的小程序。
本文由知晓程序原创出品，关注微信号 zxcx0101，回复「干货」获得最全面的小程序解读和开发教程文章。
快速关注知晓程序↓↓↓
知晓程序（微信号 zxcx0101）是爱范儿旗下专注于小程序生态的公众号。我们提供最全面、新鲜的小程序资讯（消息、观点、指南、活动）和服务，在这里你能了解到关于小程序的一切。
扫一扫分享到微信
净干文科生事情的理科生，悲观的乐观主义者，希望成为路人的铺路石，不矛盾的矛盾体。
累计已发布 216 篇文章
最近文章：
使用微信扫码关注爱范儿微信公众号
版权所有 & 广州爱范儿科技股份有限公司 2008 - 2018。以商业目的使用爱范儿网站内容需获许可。非商业目的使用授权遵循 CC BY-NC 4.0。
All content is made available under the CC BY-NC 4.0 for non-commercial use. Commercial use of this content is prohibited without explicit permission.
Designed by
Design Studio.
关注 if Design Studio.
微信扫码关注公众号 if Design Studio.
关注爱范儿微信号，连接热爱，关注这个时代最好的产品。
想让你的手机好用到哭？关注这个号就够了。
关注玩物志微信号，就是让你乱花钱。
小程序开发快人一步。
最好的微信新商业服务平台。}