微信小程序入门指南


目 录 关于作者 .......................................................................................................................................... 3 前言 .................................................................................................................................................. 5 第一节 什么是小程序? ................................................................................................................ 7 第二节 小程序将给我们带来什么改变 ...................................................................................... 12 第三节 小程序上手案例 .............................................................................................................. 18 知了交通 ................................................................................................................................ 19 剁手吗 .................................................................................................................................... 24 知了地铁 ................................................................................................................................ 32 解忧室 .................................................................................................................................... 36 第四节 如何转行小程序开发? .................................................................................................. 41 第五节 如何拥有自己的小程序? .............................................................................................. 45 如何注册微信小程序 ............................................................................................................ 46 如何搞定微信认证? ............................................................................................................ 52 如何完善小程序信息? ........................................................................................................ 59 开发者工具怎么用? ............................................................................................................ 65 小程序的审核与发布 ............................................................................................................ 74 第六节 小程序官方文档解读 ...................................................................................................... 83 开发文档解读 ........................................................................................................................ 84 设计文档解读 ........................................................................................................................ 94 运营文档解读 ...................................................................................................................... 104 第七节 电商类小程序开发教程 ................................................................................................ 112 如何做轮播图 ...................................................................................................................... 113 如何做商品列表 .................................................................................................................. 123 数据加载和图文排版 .......................................................................................................... 134 写在最后 ...................................................................................................................................... 148 附录 .............................................................................................................................................. 149 小程序大事记 ...................................................................................................................... 149 关于作者 爱范儿是首批获得微信小程序内测资格的 200 个公司之一, 也是全球第一个开发出微信小程序的公司。 知晓程序,是爱范儿旗下专注小程序生态的新品牌。 我们提供最全面、新鲜的小程序资讯、观点、教程、Demo、 活动等内容和服务,在这里你能了解到关于小程序的一切。 我们还跟全国各地的小程序关注者开展了深入交流,形成了面 向小程序开发者的未来小程序·黑客马拉松/面向非技术从业人员 (产品/运营/市场等)的未来小程序·workshop/面向小程序爱 好者的未来小程序·MindTalk 的活动矩阵。 目前,知晓程序共包含四大版块: l 知晓程序微信公众号:小程序资讯媒体 l 知晓程序商店:小程序应用商店; l 知晓程序社区:小程序交流平台; l 知晓程序 BaaS:小程序后端服务平台。 你可以通过微信公众号「知晓程序」和网站 minapp.com 了 解最新进展。 前言 微信小程序(应用号)正式公布后,在业内引起了轩然大波。 爱范儿主编刘学文曾经在《腾讯微信自己造了个 App Store, 自此它的目标是苹果和 Google》提及: 朋友圈把普通用户拉进来,做成了社交⽹络;公众号把内容创 作者拉进来,做成了最⼤的内容平台;现在小程序开始尝试拉拢开发 者,做成⼀个森林式的服务平台。⽽这⼀切,都是在⼀个应用内完成, ⽽且还是⼀个目前看起来逻辑层级还算明晰的应用内。 回想起苹果的发展历程,⼈们每每记得的是 iPhone 初代的发布, iPhone 4 的惊艳亮相,但是很少⼈会说起 App Store 的出现,也正 是苹果 App Store 的出现,才成就了苹果的闭环有了⽣态。现在小程 序相对于微信的意义,某种程度上类似于 App Store 之于苹果的意义。 在小程序拨开云雾始见青天的过程中,仍然有很多人并不清楚: 什么是小程序?会对我们的生活、工作有什么影响?对互联网行业、 移动生态格局意味着什么? 面对新机遇和新时代,这并不是最好的姿态。所以,才有了这 本书的诞生。 本书收录了微信小程序正式发布前(注:目前处于公测阶段) 的所有关键信息。你不仅会知道小程序是什么、会带来什么变化、 真正用起来的感觉如何,还能收获一份简易又不失细节的入门教程, 包括如何拥有自己的小程序、小程序开发的部分注意事项等等。 简单来说,它能让你成为最懂小程序的人之一。 我们还试图通过本书传达一种态度:机会留给有准备的人。 iPhone 刚刚面世的时候,许多人不以为意;App 开发热潮开 始的时候,许多人没有兴趣;微信公众号席卷全民的时候,许多人 冷眼旁观…… 历史总在发生,你想让自己错过吗? 第一节 什么是小程序? 小程序到底是什么?它跟 app 和 HTML 5 有什么区别?它和订 阅号、服务号又有什么不同?小程序真的是无所不能的吗? 现在,知晓程序(微信号 zxcx0101)就用这篇文章,为你揭开小 程序的面纱。 一、 小程序到底是什么? 「微信之父」张小龙是这样描述小程序的: 小程序是⼀个不需要下载安装就可使用的应用,它实现了应用触 ⼿可及的梦想,用户扫⼀扫或者搜⼀下即可打开应用。也体现了用完 即⾛的理念,用户不用关⼼是否安装太多应用的问题。应用将⽆处不 在,随时可用,但又⽆需安装卸载。 简单来说,小程序不用安装就能使用;它的体积也非常小,每一 个都不超过 1 M。 小程序的到来,将给我们带来许多便利和好处: 1. 少了安装 App 的麻烦 在 app 时代,如果我们要使用一项功能,通常需要完成以下步骤: l 在 App Store 或 Android 应用市场,寻找能实现相应功能的 应用; l 下载并安装该应用; l 在手机桌面,找到应用; l 打开并使用应用。 而在小程序时代,只需要搜索或者「扫一扫」,即可打开应用。没 有了下载安装环节,人和功能的连接变得更加简单直接。 2. 释放手机内存 除了使用更加便捷之外,小程序的「小体积」,也能为大家的手机 大大减轻负担。 相信大家手机里都装了不少 app。一般情况下,安装一个 app, 得花上几十 MB、上百 MB,甚至几 GB 的内存。手机容量小的人, 一旦多装了几个 app, 就要面临内存不够的困扰。 在这种情况下,大小不超过 1 M 的小程序,就成了手机内存不够 用的救星。 而且,小程序还不需要安装,那些平时大部分时间用不上,又不 得不装的 app,一 旦 变 身 小 程 序 ,就 可 以 彻 底 地 从 你 的 手 机 中 移 除 了 。 3. 让手机桌面更简洁 小程序问世后,也许,你手机桌面上的许多 app 将会消失。 那些功能简单、使用频率低的 app 将会被小程序替代,它们不会 在手机桌面上再占据一席之地,而是折叠在微信这个超级 app 里面, 等到你使用时再「召唤」出来。 目前,微信小程序的入口还没有完全公布,希望小程序帮我们「清 理」了手机桌面以后,微信的界面也能一如既往地保持简洁的样貌。 二、 小程序与 HTML 5 有什么区别? 小程序出生以后,有很多人将它与 HTML 5 进行比较,甚至有人 把它们混淆在一起。 但实际上,小程序和 HTML 5 本质上是两种不同的东西:小程序 是计算机程序,而HTML 5 则是互联网网页。 1.对用户而言 我们打开 HTML 5,实际上是打开一个网页,而网页需要在浏览 器中渲染。 所以,在微信上点开 HTML 5,需要完成网页加载的步骤,这就 会给人一种「卡」的感觉。 而对于微信小程序来说,它的代码可以直接在微信上运行,省去 了通过浏览器渲染的步骤,在体验上会胜过 HTML 5 不少。 总而言之,在微信中使用小程序,会比 HTML 5 流畅很多。 2. 对开发者而言 对于开发者来说,相比 HTML 5,小程序可以节省大量的服务器 资源。 那是因为,HTML 5 需要开发者的服务器向用户发送 HTML 5 代 码,而微信会帮开发者分发他们的小程序。 三、 小程序与订阅号、服务号有什么区别? 同属于微信的生态体系,小程序也被很多人拿来跟订阅号、服务 号比较。 那么,它们之间到底有什么区别呢?我们先看看订阅号和服务号 到底是什么: l 订阅号:顾名思义,是用户在微信中订阅文章所使用的公众 帐户。订阅号可以向用户推送文章和信息,也可以管理订阅 用户、与用户交流。它是一种媒体属性的产品。 l 服务号:是一种服务导向的公众帐户。它可以帮助机构在微 信中向用户提供服务,同时,服务号还可以让用户直接与机 构的客服系统进行沟通、为用户提供品牌信息等。 以上两者都是以「聊天界面」为基础的,即是说,它们的功能和 界面是早就规定好了的。 而小程序允许开发者自定义界面,所以,不用局限于微信的聊天 界面。开发者不仅可以提供更好的使用体验,也无需考虑对接公众帐 户对话,开发门槛是比较低的。 简单来说,如果把这三个平台比喻成三件玩具,那么,订阅号和 服务号可能是公仔或模型车,而小程序则是可以自由拼装的乐高积木。 四、 小程序是「无所不能」的吗? 虽然小程序有千般好,但小程序也并不是万能的。 在做小程序之前,我们还需要清晰地认识到小程序的局限性: 首先,小程序不能承载所有的用户需求。无论是游戏娱乐、文档 处理等「重需求」,还是带有传播能力的营销需求,小程序都不能很 好地满足。如果要满足这些需求,app 或 HTML 5 会是更好的选择。 其次,小程序的体系整体依赖于微信。如果你的业务与微信设定 的规则有冲突,或主营业务在微信渗透力不强的地区(如国外),微 信小程序就不是一个好的选择。 另外,小程序目前不能主动发送消息(包括群发和模板消息)。 如果你需要向用户提供客服业务,或是希望向用户推送信息,订阅号 或服务号等具有相应功能的帐户形态则更加适合。如果想在小程序中 新增客服功能,还需要开发者自己去实现。 希望大家看完这篇文章,能对微信小程序有一个立体而理性的认 识。 第二节 小程序将给我们带来什么改变 小程序出现后,很多人都在翘首观望。 应该拥抱小程序吗?小程序会带来什么新变化?要如何应对这 种改变? 知晓程序(微信号 zxcx0101)现在从行业、职业和用户三个层 面,来谈谈小程序将给我们带来什么影响。 一、 对行业的影响 小程序的服务范围包含 17 个行业。如果你所在的行业名列其中, 恭喜你自动获得了小程序的入场券。 关注微信号 zxcx0101,回复「服务范围」,查看小程序的所有适 配行业。 但是,这个世界已经有 app、网 站 和 公 众 号 了 ,小 程 序 又 能 给 你 什 么好处呢?我们分不同情况看一看。 1. 线下门店 每个线下门店,如餐馆、服装店、旅店,不一定能拥有自己的 app 和网站,也不一定需要拥有自己的 app 和网站。 但每个线下门店,都可以拥有自己的小程序:它能实现 app 和网 页的功能,且开发成本更低,用户使用起来也更方便。 以餐馆为例,如果你是一家餐馆的老板,估计已经完成了以下「触 网」工作: l 宣传:加入大众点评,做团购,做微信公众号 l 支付:接入支付宝和微信支付 但是,在用户进店到吃完买单之间,还是在用老办法:以服务员为 中介,完成点菜、送餐、买单整一套流程。 如何提高效率和用户体验?自己做一个点餐系统显然是不现实的, 但开发一个点餐小程序却很合适。 而且,这个小程序使用起来会十分方便:用户只需坐在餐位上扫描 二维码,就能进入小程序直接点餐和支付。过程简单、迅速,服务员 的人力成本都省了。 未来线下门店的小程序,也许会像微信支付和支付宝买单一样普遍。 如果你在经营线下门店,那么可以根据自己的业务需求,主动拥抱 小程序。 2. 互联网行业 对于现在的互联网企业来说,app 算是一个标配。 然而,app 的开发、维护和用户获取的成本都比较高。而且,在新 的 app 或者在 app 的新功能推向市场之前,谁也不能保证它能受 到用户欢迎。要是不受欢迎,对公司和程序员们来说,都是极大的损 失。 所以,开发成本低的小程序,是一个提前试错和节约成本的好方法。 如果你身处互联网行业,完全可以把新功能做成小程序,投入市场 观察反应,之后再考虑是否需要在客户端上实现。 3. 低频刚需的行业领域 如果将一个行业继续细分,可以分出非常多细微的垂直领域。 但若每一个处在低频刚需行业领域的公司都推出一个 app,那 么 很 多人的手机存储就要「告急」了。而且这些需求是不确定的,用户不 会也不能在这些 app 中长时间停留。 以上这些,都让这些公司推出一个 app 变成了一种「资源浪费」。 而微信小程序「小」的形态,可以很好地承载垂直细分行业、满足 长尾需求。 处在低频刚需行业领域的公司,可以以更低的成本提供体验更好的 小程序;而用户也不再担心「使用一次服务就要装一个 app」的 情 况 了,他们只需要扫一下二维码,就能在以后轻松使用这些服务。 二、 对职业的影响 1. 前端开发者 在小程序推出之后,很多人发现,「小程序的语法与前端语言很像」, 进而给出了「这是前端开发的春天」的结论。 的确,对于前端开发者来说,从网页前端迁移至小程序开发几乎零 成本。不仅如此,小程序的 MINA 框架可以让前端开发在同等的开 发时间里,开发出体验更棒的网页。 但也因为 MINA 的限制,让原本在 web 领域很好用的开发框架无 法继续使用。Web 前端程序员可以选择自己实现组件效果,或是使 用微信提供的视觉组件框架。 当然,这种限制也会催生一种东西:专用于微信小程序的开发框架。 但更重要的是,在可预见的未来,各家企业对小程序的需求,会令 前端程序员的需求出现持续增长。 那么,前端程序员需要做哪些准备呢? 如果前端人员需要向微信小程序发展,除了原有的 HTML、CSS 和 JavaScript,你现在就应该开始了解和学习除这三个以外的前端开发 框架。 一个好消息就是,微信已经将小程序的接口封装得很好,前端开发 者在开发的时候,只需要简单几行代码,就能轻松调用它们。 2. 后端开发者 「前端开发的春天」,只是指对前端的技术难度降低,并且前端开 发可以直接触及最热门的小程序开发而已。 但「简约而不简单」的小程序,对后端的的要求一点也没有降低。 对于大部分的小程序来说,它们一样都有数据交换的需求,这就需 要后端的支持了。 可以说,小程序的火热并没有「摧毁」后端,反而给后端提出了更 高的要求。 小程序的极低开发成本,让一个很小的需求也能通过小程序承载。 未来也势必会有公司瞄准这一市场,为企业提供后端支持服务,甚至 将后端封装成可独立安装的整包出售。 所以,后端开发者并不需要太过紧张,小程序的出现,只会让后端 的需求变得更多。当然,如果你有兴趣,也可以学习并不困难的小程 序开发,没准,这就是你从单纯的后端转变为全栈开发者的起点。 3. 个人开发者 虽然,小程序暂时没有开放个人的注册资格,但知晓程序推测,在 不久的将来,个人也能像注册公众帐户一样注册小程序。 小程序的学习成本和开发成本降低,所有人都有机会接触小程序编 程,也可以通过小程序做出一个像样的东西出来。 与此同时,小程序的分发和使用全部依赖微信,注册小程序帐户就 能分发小程序。而微信是一个跨平台操作系统,开发者不再需要担心 多平台适配问题。 另外,小程序的低开发成本也会让更多的个人开发者接受小程序的 外包工作。开发难度更低的小程序让小程序开发的成本降低,进一步 降低外包成本。 而它所带来的影响,就是在鼓励更多的人学习编程、鼓励更多的人 将想法转变为实际行动。 在未来,也许小程序会像订阅号一样,成为中国个人开发者的首选 选项之一。 三、 对用户的影响 如果你只是一个既不会写代码,又不用操心企业经营的吃瓜群众。 那小程序会给你带来什么影响呢? 那就是,你的手机将变得更加好用、更加强大:不用装 app,也能 实现很多平时所需的功能。那些偶尔才会用到 app,可 以 彻 底 从 手 机 消失了。 在使用小程序的时候,完全可以对它召之即来,挥之即去,想用就 用,用完就走。 可惜的是,这也会给你带来一点副作用:你将会前所未有地依赖你 的手机,以及微信这个超级 app。 好在,微信小程序现在还未正式发布。我们就一起等待那个到处都 是小程序的新世界吧。 第三节 小程序上手案例 作为第一批拿到小程序内测资格的企业,爱范儿开发出了几个有 趣、有用的小程序。 为什么要开发这些小程序?它们有什么功能?在开发过程中,有 什么值得分享的地方? 知晓程序(微信号 zxcx0101)将逐个跟大家分享。 知了交通 我们要分享的第一款小程序,叫「知了交通」。 一、 「知了交通」功能详解 「知了交通」是一款轻量级的交通查询小程序,功能十分简单明 确。 首页有「选择城市」和 「输入查询信息」两个功能区。点击当前 城市,可进入搜索页面更换城市。 图 3-1-1 「知了交通」中选择城市和起始点的界面 点击「起点」、「目的地」,输入相应的位置,就可以开始查询 从起点到目的地的推荐公交路径。 「知了交通」接入了百度地图的 API。因此,查询结果和百度地 图是一致的,只是界面更为精简。 查询结果有「推荐路线」、「步行少」、「换乘少」、「地铁优 先」四种,每一种方案都有具体的路线选择。 图 3-1-2 「知了交通」中,「推荐路线」和「地铁优先」路线比较 点击某一条具体路线,就会进入路线详情页,其中明确标识了起 始的站点,以及步行距离。 图 3-1-3 「知了交通」路线查询结果 「知了交通」还提供了非常方便的返程路线查询。在每一个路线 详情页下方,都有「查询返程」的按钮。 除此之外,「知了交通」还会自动记录下你的上一次查询,当你 回到首页,在顶部就能看到上次查询的路线,点击「查询返程路线」 即可方便地查询返程。 图 3-1-4 查询结果中的「查询返程」功能 值得注意的是,「知了交通」也可以自动获取你的位置。只要在 进入首页时,在弹出的信息框中,点击允许「知了交通」获取你的地 理位置,即可轻松设置所在城市和起终点位置。 二、 为什么要开发「知了交通」? 「知了交通」的开发者是爱范儿的前端开发工程师严灏。他认为, 这款小程序会让交通查询更加方便: 微信是⼤家每天都会开着的 app,有了「知了交通」,以后查路 线就不用专门去打开⼀个新的 app,直接从微信进⼊就可以了。 他还表示,现在有很多交通/地图 app 在使用完退出后,会偷偷 在后台运行,不仅偷跑流量,还会更耗电。 而「知了交通」这类轻量级的小程序,功能简单纯粹,也不涉及 过多的体验。打开方便,用完即走,不耗电而且方便。 这些功能,基本上满足了大多数人日常交通查询的需求。 三、 小程序的开发经验 「知了交通」的开发大约用了 2 天时间,整个开发体验如何呢? 严灏表示,「知了交通」的功能十分简单,所以整个开发过程很 流畅,没有遇到什么问题,比常规的前端开发简单很多。 谈到小程序开发和前端开发的差异时,严灏强调道,小程序和前 端是不一样的东西,就像微信官方所说的一样,小程序不是浏览器, 而是有自己的一套逻辑。所以,在开发过程中需要转变思路。 微信小程序目前还处于公测阶段,有很多 bug。出于安全性和某 些其他考虑,小程序也只开放了一些组件,很多功能都开发不出来, 也有很多东西需要进一步完善。 严灏认为微信小程序优点和缺点都是存在的: 如果是当前小程序框架范围内的东西,开发起来会比较简单轻松; 如果需求超出目前的框架,那么,就需要自己造轮子,比较麻烦了。 剁手吗 知晓程序(微信号 zxcx0101)要分享的第二款小程序,是爱范儿 前端女王大人开发的「剁手吗」,有了这款小程序,就能迅速知道看 中的苹果产品,当下值不值得买。 一、 「剁手吗」功能详解 相信除了资深果粉,很少有人会知晓苹果的每一个产品,更别说 它们的发布时间了。 那么,当想要购买一款苹果产品时,你会怎么开始?去苹果官网? 刷 Apple Store?或者,试试下面这个更简便的方式。 图 3-2-1 「剁手吗」 剁手吗是一款面向大众群体,提供苹果产品消费指南的小程序。 里面搜集了苹果官网在售的所有产品(不包括配件)。 这款小程序的界面非常简明:进入首页,所有在售的 iPhone/iPad 尽收眼底。 图 3-2-2 「剁手吗」iPhone/iPad 商品列表 点击顶部导航栏的「Mac」,就进入了 Mac 在售产品列表页面; 点击「其他」,就能看到 Apple Watch, iPod touch 等产品。 图 3-2-3 「剁手吗」Mac 及其他商品列表 这样,苹果官方渠道现在可以买到哪些产品,就一目了然了。 发现感兴趣的产品,点一下,就能进入产品信息页面。 图 3-2-4 商品详情页 页面精选了产品的关键信息,就像在 Apple Store 看到的产品信 息卡片一样。不用担心看到一大堆头昏眼花的详细参数。 以上这些信息,展示的主要是「有哪些」苹果产品,它们分别「是 什么」,但究竟该买不买呢? 剁手吗有一个非常贴心的功能,就是每个产品有一个发布进度条 和发布时长。 发布时长指的是距离产品发布日,已经过去了多少天;而发布进 度条则综合了发布时长和产品的发布周期,你就可以推算出离下一代 新产品发布日还有多久。 进度条越长,就代表离新产品发布的时间越近;进度条如果到顶 了,就代表下一代产品已经发布了。 这样,就能非常直观地看出你感兴趣产品的新鲜程度。 图 3-2-5 新鲜度显示和「推荐买」功能 知晓程序(微信号 zxcx0101)最 喜 欢 的 功 能 是 ,剁手吗给每个产 品都提供了「购买建议」,以彩色标签的形式呈现: 推荐买:刚出不久的新款,赶紧下手。 一般般:这个时间点,可买可不买。 现在别买:新款快出了/新款已经出了,去买新款吧。 俗话说,电子产品买新不买旧,有了剁手吗,你就能快速知道产 品的发布时间和周期,从而判断这款产品现在值不值得下手。 二、 为什么要开发「剁手吗」? 正如上文所述,普通用户在选购苹果产品的时候,一时之间,可 能会不知道该如何做选择。 去官网详细比对各项功能,又是一件比较耗费时间和精力的事。 要去比对什么呢?对于很多用户来说,他们其实更想要一个明确 的指引:在这个时间,某款产品到底值不值得买? 而剁手吗这款小程序的设计,便能帮助这些用户迅速达成消费决 策。 三、 「剁手吗」开发经验分享 剁手吗的开发者,是爱范儿的前端女王大人祝莎莎(据说跪在她 旁边写代码不会出 bug)。 图 3-2-6 祝莎莎与同事的工作场面 由于调用的是静态数据库,所以,莎莎只花了一个下午的时间, 就完成了这款小程序的开发工作。 说到小程序的开发体验,莎莎表示,整个框架写起来很顺手,体 验也非常好,基本上没有遇到什么问题。 在所有小程序的开发过程中,她遇到的问题基本上是组件问题: 全局组件的封装都需要自⼰来做,比较麻烦,希望微信能尽快解 决这个问题。 莎莎在采访中透露,自己未来也倾向于去做小程序的开发工作。 因为,微信小程序不需要考虑兼容性的问题,开发起来很畅爽。 此外,与常规前端开发工作不同的是,小程序更加简洁、朴实,且聚 焦于功能,没有太多花里花哨的交互。这样,产品狗再也不能以 DOM 为理由,提一些任性的要求了。 知了地铁 知晓程序(微信号 zxcx0101)要给大家介绍的第三款小程序「知 了地铁」,可以让你快速查询全国城市地铁线路。 一、 「知了地铁」功能体验 「知了地铁」也是一款提供了全国地铁线路图参考的小程序。它 的功能非常简洁: 一进入首页,你就能看到当前所在城市的地铁线路图。点击上方 的城市栏,还能切换国内其他城市。 图 3-3-1 地铁图和选择城市界面 目前,「知了地铁」集合了全国 23 个城市的最新地铁线路图, 不论你去到哪个陌生城市,都不用担心会地铁站里迷路。 在「知了地铁」中,你可以对地铁线路图进行缩放和移动。 图 3-3-2 在「知了地铁」中缩放地图 「知了地铁」提供了两种常见的缩放方式: l 双指手势缩放 l 双击缩放 但囿于微信小程序在元素实现方面还有 bug,目前缩放功能的体 验还不能做到特别完美。 对于生活在地铁网密集的大城市的人来说,「知了地铁」算是一 款轻量且实用的小程序。 二、 为什么要开发「知了地铁」? 爱范儿的产品总监李本卿表示,当张小龙宣布要推出应用号(小 程序)时,就有打算做一款能让用户「用完即走」的产品。 而「知了地铁」正是一款这样简单实用的小程序,它能让人在乘 坐地铁时,轻松了解一个城市的整体地铁线路图。 「知了地铁」的开发者严灏也认为这是一个很实用的工具。以前 他在深圳时,地铁卡的背面就有深圳地铁线路图,但广州的羊城通(地 铁卡)上并没有。 所以,当去一个要转几次地铁线路的目的地时,查找路线就变得 非常麻烦。严灏认为: 也不需要去打开地图 app,有⼀张线路图看看,问题就解决了。 三、 「知了地铁」开发经验分享 「知了地铁」的开发过程并不顺利。 开发者严灏表示,整体开发工作其实一天就完成了,但为了实现 更好的效果和体验,他又花费了一两周的时间,修复手势缩放的问题。 他表示,在微信小程序的 API 中有获取用户触摸屏幕事件的函数, 通过这个函数可以获取到用户触摸屏幕坐标的对象。而通过持续性捕 捉坐标变化,小程序就能实现手势缩放。 但可惜的是,小程序目前还无法实现完美的手势缩放。 例如,在使用「知了地铁」时,会出现缩放点不在两只手指中心 的情况。在移动或缩放地图的时候,界面也会闪动,甚至会出现「缩 放不跟手」的情况。 严灏尝试了各种方法解决这个问题。 包括调整抓取间隔为 16 毫秒等⽅法都试过了,最终的效果却不 尽如⼈意。 后来严灏发现,这个问题是微信小程序的 bug。 在⽂档里写的可以做都是「理论上可以做」,跟「实际上能做」 完全是两码事。 之后,严灏为「知了地铁」新增了双击放大的功能,使用体验比 手势缩放稍微好一些。但若要实现完美的用户体验,还需要等微信团 队来修复。 解忧室 知晓程序(微信号 zxcx0101)要分享的第四款小程序,能帮你解 决手机使用中的各种疑难杂症,它的名字叫「解忧室」。 一、 「解忧室」功能详解 熟悉 AppSo(微信号 appsolution)的读者,肯定对「A 君解忧 室」这个栏目名字非常熟悉。 而「解忧室」小程序,就集合了「A 君解忧室」的所有内容。 进入「解忧室」,你能看到各种在手机使用过程中会遇到的问题。 例如「就寝功能失灵怎么办」、「不搭梯用 Chrome 插件等问题」 等。 点击「解忧室」底部的「分类」按钮,你还可以获得所有问题的 分类:「通用技巧」、「App 推荐」、「iOS 技巧」、「Mac 技巧」 和「Android 技巧」,定向索引你的问题。 图 3-4-1 问题列表和分类 如果要寻找特定问题的解决方案,你也可以搜索关键词。「解忧 室」小程序会帮你从已有问题中进行检索,快速找到解决方案。 点击具体的问题,就能进入到问题的解答页。如果这个回答帮助 你解决了问题,你可以在解答页中点击「顶」按钮为它投票。 图 3-4-2 搜索和答案界面 投票的意义其实并不止于一个数字。越多人点「顶」,说明这个 问题有越多的人遇到过,并通过这个解答解决了问题。 为答案投票的同时,这条回答也有机会被更多人看见,帮助其他 用户快速解决他们的问题。 二、 「解忧室」的开发背后 「解忧室」是爱范儿旗下 AppSo(微信号 appsolution)的小程 序产品。 AppSo 负责人王崇旭表示,AppSo 有一个专门解答读者关于手机、 电脑使用疑问的栏目,叫「A 君解忧室」,「 解 忧 室 」小 程 序 的 内 容 便来源于此。 我们都会收到很多读者在数字⽣活(使用数码产品)中遇到的问 题,每周我们会汇总起来做⼀次集中解答。现在「A 君解忧室」已 经做了 30 多期,每期都有 20 条左右的内容。 那么,为什么要做一个「解忧室」小程序呢?王崇旭说,「其实 都写在小程序的名字上了。」 出发点其实跟我们做「A 君解忧室」栏目是⼀致的。每个⼈都或 多或少经历过用数码产品遇到问题、但找不到答案的窘境。如果你身 边恰好有⼀个达⼈帮你解决,那种感觉是很好的。 我们希望 AppSo 成为每个⼈都能依靠的「达⼈朋友」,在遇到 科技问题的时候可以在「解忧室」找到自⼰需要的答案。正因如此, 如果「解忧室」小程序真的能帮⼤家「解忧」,我们就很满意了。 熟悉 AppSo 的人都知道,AppSo 目前已经有了 iOS 与 Android 客户端。 但是,既然有了客户端,为什么不直接将「解忧室」功能放到客 户端,而要做成一个小程序呢? 王崇旭认为,小程序可以为客户端试错。 做 app 要考虑的事情太多了。现在 AppSo 有 iOS 和 Android 两个客户端,如何将「解忧室」融⼊现有的产品,并提供合理、良好 的用户体验,是需要谨慎考量过后才能决定的。 再者,我们也并不知道用户是否真的需要它变成客户端的⼀个功 能,贸然开发也要承担不小的风险。 小程序开发成本低,是很好的试错机会,如果反响好,我们再将 它移植到 app 上也不迟。 如果你玩手机时也遇到了一些无法解决的问题,那么,等到小程 序正式发布以后,就来找「解忧室」吧。 第四节 如何转行小程序开发? 现在人人见面必谈小程序。这种火热让很多人慌了神:我们是不 是一定要学小程序开发呢?小程序开发应该从哪里入手? 知晓程序(微信号 zxcx0101)为你总结了小程序开发所需的技能, 以及不同种类的程序员该如何转向小程序开发。希望能帮大家顺利开 启小程序开发之路。 一、 必备技能清单 如果你想开发一个应用,那么了解和学习应用所用的编程语言是 非常必要的。 对于小程序开发者来说,需要学习的语言主要有: l 微信标记语言(WeiXin Marked Language, WXML) l 微信样式表(WeiXin Style Sheet, WXSS) l JavaScript(JS) 虽然微信为小程序的界面构建「创造」了两种语言,但这两种语 言,无论是从风格还是语法上,都与 HTML 和 CSS 非常接近,甚 至是直接照搬。 也就是说,在开发微信小程序之前,你需要掌握的语言只有 HTML、 CSS 和 JavaScript 三种,而 这 三 种 恰 恰 就 是 网 页 前 端 天 天 都 要 面 对 的。 学习、开发过网页前端的人都知道,「前端三件套」的学习成本 其实是很低的,有些人甚至能在一周内熟练掌握这三种语言。 二、 如果你是 iOS / Android 开发人员 如果你以前有 app 开发经验,那转向小程序开发并不难。你只 需要简单学习三种语言的写法,就能轻松上手开发小程序。 无论是从 iOS 还是 Android 开始转,开发小程序都需要学习 JavaScript 语言。小程序的逻辑功能都是使用 JavaScript 来实现的, 如果没有 JavaScript,小程序就变成了一具没有思维的空壳。 对于 iOS 开发来说,可能还要学习使用 HTML(WXML)构建界 面的方式。 许多人在开发 iOS 应用时,会使用 iOS 的 Storyboard 文件构 建界面和交互逻辑,Storyboard 可以让开发者通过拖动元素的方式 快速构建界面。 但在小程序中,所有视觉元素和交互都需要通过 XML(WXML) 代码实现,无法直接拖动元素来构建界面。这与 iOS 的 Storyboard 可视化的界面构建方式有很大差别。 对于原本就需要 XML 代码构建界面和交互的 Android 开发者 来说,他们只需要了解小程序 WXML 可以使用的元素,就可以开工 了。 三、 如果你是网页前端开发人员 恭喜你,既然你已经能熟练使用 HTML、CSS 和 JS 语言,接下 来的事情就简单得多了。 但这并不代表前端网页开发与小程序开发没有差别,你在上手前 还是有一些需要注意的地方。 首先,小程序的界面并非是一个「网页」,而是一个「应用界面」, 以往网页前端常见的
等标签都不复存在。网页前端开发 人员需要适应 WXML 的逻辑和写法。 同样,虽然 WXSS 文件基本「复刻」了 CSS,但 小 程 序 使 用 了 rpx (responsive pixel)作为尺寸单位(保证不同分辨率设备的元素正 常显示)。开发人员需要了解 rpx 与各种长度单位的换算比例。 微信关注 zxcx0101,回 复「 rpx」,获 取 rpx 的详细换算方式。 四、 如果你是后端开发人员 即使是使用 Node.js 语言工作的后端开发人员,如果希望转向小 程序开发,依然需要先从前端三件套入手学习。 不用担心,前端三件套是非常简单的语言,许多人只需要经过一 周的学习就能熟悉。如果之前有相关经验,上手难度会更加低。 但是,许多业务流程完整的小程序是离不开后端的数据处理的。 后端开发者并不需要太担心,小程序的火热会造成后端领域的侵蚀。 相反,小程序的火热会令后端人员的需求迅速增长。 以上就是知晓程序(微信号 zxcx0101)为 不 同 领 域 的 开 发 者 总 结 的小程序开发技能清单。希望能够帮助大家从不同领域快速上手小程 序开发。 第五节 如何拥有自己的小程序? 想拥有自己的小程序,你需要做些什么? 微信官方提供的小程序接入指南列出了以下事项: 1. 小程序注册; 2. 小程序信息完善及开发前准备; 3. 开发工具的使用; 4. 审核和发布小程序; 5. 小程序申请微信认证; 6. 小程序申请微信支付; 7. 小程序绑定微信开放平台账号。 在以上事项的操作过程中,有什么值得注意的地方呢?在本节内 容中,知晓程序(微信号 zxcx0101)提供了一份更为精简的教程。 如何注册微信小程序 11 月 3 日,微信公众平台发布了微信小程序开放公测的消息。 图 5-1-1 微信官方的小程序介绍页面 在微信官方给出的图片中,能看到小程序的简单介绍和注册指引。 图 5-1-2 微信官方提供的接入流程和开发支持 下面,知晓程序(微信号 zxcx0101)就教大家,如何一步步注册 微信小程序。 首先,打开微信公众平台 https://mp.weixin.qq.com/,在右上 角点击「立即注册」。 图 5-1-3 注册小程序的入口 接着,你会进入注册账号类型的选择页面。 可以看到,除了常规的订阅号、服务号和企业号之外,还出现了 「小程序」的选项。 图 5-1-4 注册公众帐户的页面多了一个「小程序」 注册小程序只需完成三个步骤: 1. 填写账号信息 图 5-1-5 填写帐户邮箱、密码 2. 完成激活邮箱 图 5-1-6 验证邮件 3. 进行信息登记 图 5-1-7 基础信息登记界面 OK,完成注册!整个过程非常简单顺畅,用时不到 3 分钟。 需要注意的是,目前微信小程序仅支持企业、媒体、政府和其他 组织注册,暂不支持个人注册。 想第一时间体验小程序?就赶紧打开电脑注册吧! 如何搞定微信认证? 微信小程序开放公测之后,很多组织都注册了自己的小程序。注 册时,也有不少人用微信认证的方式来确认主体身份。 但是,很多人在第一次进行微信认证时,会踩中很多坑:资料认 证不全、与其他同事联系沟通不畅等,都会导致微信认证过程出现多 次返工,甚至认证失败的情况。 现在,知 晓 程 序( 微 信 号 zxcx0101)就 为 大 家 带 来 一 份 微 信 认 证 的全过程指引。只要一步步按着指引来做,就能轻松完成小程序认证。 一、 小程序必须认证吗? 有很多人以为,主体为组织而非个人的小程序需要经过微信认证, 才能正常审核和发布。 然而,《微信小程序接入指南》中是这样写的: 「政府、媒体、其他组织类型帐号,必须通过微信认证验证主体 身份。企业类型帐号,可以根据需要确定是否申请微信认证。已认证 帐号可使用微信支付、微信卡券等高级权限。」 换言之,如果小程序的主体是企业,且小程序不需要使用到支付 和卡券相关的功能,则可以跳过申请微信认证。 只需要在注册过程中,选择「向腾讯公司小额打款验证」这种方 式,就可以跳过微信认证步骤进行主体验证。 图 5-2-1 申请打款验证的入口 二、 准备资料 在认证开始之前,你需要准备一堆资料。 根据组织性质的不同,所需要准备的资料也是有一定差异的。 根据微信官方的说明,可以通过微信认证的组织有以下几类: l 企业法人 l 媒体 l 政府及事业单位 l 基金会、外国政府机构驻华办事处 l 社会团体 l 民办非企业 l 其他组织 不同性质的组织,认证所需要的资料分别为: 图 5-2-2 认证所需资料一览 三、 填写资料 小程序的主体信息登记完成,管理员就可以在公众平台中对小程 序进行认证。 使用小程序帐户登录公众平台后台,在左侧点击「设置」,在基 本信息中找到「微信认证」一项,点击左侧「详情」,就可以找到认 证入口。 认证前,管理员需要同意一份服务协议。阅读协议(真的会有人 认真阅读吗…)并勾选同意,就可以开始进行认证。 首先,需要准备认证公函。 在资料填写部分,可以找到公函的下载地址。你需要做这些: 下载打印公函模板; 按要求填写公函内容、盖章; 对公函进行拍照或扫描(需彩色件); 在页面中上传公函文件。 图 5-2-3 认证公函示例 之后,就可以继续填写其他资料了。 在资料填写页面,还需要填写认证所需的证件号码;上传证件扫 描件、管理员身份证的正反面文件。 如果有开具发票的需求,可在填写完资料,并验证了管理员身份 后申请开具发票。 图 5-2-4 发票申请页面 如果需要开具增值税专用发票,还需要填写额外的税务登记证和 银行开户证明。 四、 费用支付 进行一次微信认证服务,需要向第三方公司缴纳 300 元的资质验 证费用(基金会、外国政府机构驻华办事处等除外)。值得注意的是, 认证服务费用的支付只能使用微信支付。 微信官方的说明是:这个费用是提交给资质审核机构的一种真实 性验证的服务费用。由于审核行为定义为服务,所以无论审核成功与 否都需要缴纳费用,并且缴纳费用不代表审核一定可以通过。 支付完毕后,审核服务即宣告开始。 五、 审核期间 审核服务订单提交以后,在公众平台后台的通知中可以看到参与 审核服务的企业的联系方式。管理员需要在审核期间保持通讯畅通, 以保证能收到审核人员的电话进行资料核对。 根据知晓程序(微信号 zxcx0101)的 经 验 ,审 核 人 员 会 询 问 企 业 法人姓名、公司注册地址(区域),以及对公账户所收到的具体打款 金额这些信息。 如果在电话核对过程中,出现了资料错误或遗漏等问题,则需要 进行补充或重填。微信官方提供了 30 天内 3 次补充和修改机会, 管理员可以在期间对审核资料进行调整。 我们在认证小程序的时候发现,从提交到电话审核,最快半天就 可以认证成功。 六、 认证年审 小程序的微信认证有效期为一年。在认证有效期结束之前,如果 小程序需要延续其认证身份,则需要重新进行认证。 重新认证的流程与上述流程一致,值得注意的是,重新认证也需 要缴纳资料审核服务费用。 以上就是微信认证的全过程解析,希望这篇文章能帮你迅速流畅 地完成微信认证。 特别提醒:建议在阅读完本文后,根据所属的组织类型,先列出 认证所需要的物料清单,再进行微信认证,以减少不必要的时间浪费。 如何完善小程序信息? 知晓程序(微信号 zxcx0101)已 经 分 享 了 微 信 小 程 序 的 快 速 注 册 和认证教程。现在,我们就来看看,在小程序信息完善过程中,有哪 些注意事项。 一、 你的小程序认证了吗? 很多人的小程序会选择微信认证来验证身份。 然而,别以为小程序通过认证后,微信会主动提醒你。 真实情况是,接到微信认证机构打来的电话后,就算小程序成功 通过认证,你留的手机和邮箱也不会收到任何信息。 想知道自己的小程序是否通过认证,最好的办法是时不时登录微 信公众平台看看。 图 5-3-1 认证服务开始通知 据微信认证机构的短信所示,他们「预计会在 2 个工作日内」受 理。实际上,我们早上注册小程序,接完认证电话,下午悄无声息就 通过了认证…… 二、填写小程序资料 小程序认证后,你就可以开始填写小程序信息了。 1. 小程序名称 小程序名称支持中文、英文、数字和加号,长度为 3 – 20 个字符。 图 5-3-2 小程序起名要求 值得注意的是,加号「+」只能出现在名称的最末,如「知晓程序 +」;而「知晓+程序」、「+知晓程序」这类命名方式都是错误的。 如果你曾遭遇过订阅号、服务号「名称已被注册」的情况,那么, 给微信小程序「起个名字」恐怕会令你更加抓狂: l 不得与微信公众平台现有的订阅号、服务号重名。 l 若侵犯了其他企业商标和组织名称等,可能会被投诉,收回名 称。 l 存在大量账号同名的名称也不给用,如「健康生活」。 要是不想改名,就善用这个加号「+」吧。友情提示,用「+」山 寨别人的名字也是不行的哦。 目前而言,小程序一旦确认了名称,就不能再修改了。至于什么 时候能修改,就要看微信怎么定了。所以,起名还请慎重。 2.小程序头像 头像设置这个环节,小程序跟订阅号、服务号是一样的。 图 5-3-3 小程序头像设置界面 l 图片格式:bmp, jpeg, jpg, gif l 图片大小:不可大于 2M 此外,小程序头像不得出现政治敏感和色情的内容。每个月可修 改 5 次。 3.小程序介绍 字数为 4 – 120 个字,不包含国家相关法律法规禁止内容就行了。 图 5-3-4 小程序介绍设置界面 跟头像一样,小程序介绍每个月也有 5 次修改机会。 4.服务范围 微信小程序共包含了 17 个可选服务范围,每个服务范围下面又 有细分领域。每个小程序最多可以选择 5 个服务范围。 图 5-3-5 服务范围选择界面 小程序支持哪些服务范围呢?知晓程序(微信号 zxcx0101)特 地 整理了一张表格供大家查看: 图 5-3-6 服务范围一览表 值得注意的是,若是选择了律师、医疗等服务范围领域,还需单 独上传相关资质文件。 由表格不难看出,小程序的服务范围几乎涵盖了生活的方方面面。 虽然,绝大多数人对现在对小程序还没有什么概念,但相信很快小程 序就会成为我们日常生活的一部分。 开发者工具怎么用? 工欲善其事,必先利其器。 对于小程序开发者来说,微信提供的开发者工具是不可绕过的一 步。 现在,知晓程序(微信号 zxcx0101)就 来 教 你 如 何 一 步 步 设 置 好 开发者工具。 一、 如何获取开发工具 开发小程序,需要用到「微信 Web 开发者工具」。 通过以下步骤,可以找到开发工具的下载地址: 1. 打开微信公众平台(mp.weixin.qq.com); 2. 鼠标移至「小程序」,点击「开发」按钮; 3. 点击顶部导航栏的「工具」按钮,在新页面的左侧栏中找到「下 载」。 图 5-4-1 在微信公众平台主页找到「开发」链接 开发工具提供 Windows 32 位、Windows 64 位和 Mac 三个版 本。可根据实际情况,选择适合自己电脑的开发工具。 以 Mac 电脑为例,只要将下载的 DMG 文件打开,并根据提示, 将 app 文件移动至「应用程序」文件夹,安装就完成了。 二、 登录并新建项目 安装后,就可以直接启动开发者工具。 如果是首次启动开发者工具,需要使用开发者的微信号扫码登录。 图 5-4-2 登录至开发者工具 登录后,微信开发者工具会询问调试类型,请选择「本地小程序 项目」。 图 5-4-3 调试类型选择 之后,点击「添加项目」按钮,就可以在电脑上新建小程序项目 了。 填写 AppID(如果没有,则点击「无 AppID」)、项目名称。接 着,在项目目录中点击「选择」,新建一个文件夹作为新的项目目录。 图 5-4-4 添加项目 选择项目目录后,开发者工具会询问是否「在当前目录中创建 quick start 项目」。如果勾选,开发者工具会在相应文件夹下创建 小程序的必要文件。 添加项目之后,以后打开开发者工具时,就可以在项目列表中找 到新建的项目。 图 5-4-5 项目管理界面 点击项目就可以继续进行开发。 三、 认识开发工具 微信开发者工具共分成「编辑」、「调试」和「项目」三个部分。 图 5-4-6 开发者工具界面 一、 编辑:编辑和修改小程序的代码。 二、 调试:显示小程序代码错误和警告,便于调试代码错误。 三、 项目:用于查看小程序的属性、修改小程序配置,以及提交 小程序代码至微信服务器。 开发工具还提供简单的模拟器(页面左侧),开发者可以使用模 拟器在电脑上模拟用户点击及使用,提供后台情况模拟、多媒体播放 器调试、缓存数据处理等功能。 四、 真机调试和提交代码 在「项目」页面中,开发者可以查看小程序的基本属性,也可以 进行真机预览调试,或向微信服务器提交一个新版本的小程序代码。 图 5-4-7 「项目」界面 想到真机上体验代码的运行效果?点击「项目」中的「预览」按 钮,用当前开发者的微信号扫码即可。 如果需要在真机运行的时候进行调试,可以点击小程序右上角的 「更多」按钮,选择打开调试。接着,重新扫码启动小程序,右下角 就会出现一个「vConsole」按钮,点击即可打开调试器。 图 5-4-8 在手机上打开调试控制台 当小程序开发完毕之后,开发者可以点击「上传」按钮,将新版 本代码上传到微信服务器。 服务器收到代码后,管理员就可以通过公众平台,将新版本提交 审核。 以上就是知晓程序为大家带来的开发者工具使用及开发调试指南, 希望能帮助小程序开发者迅速熟悉和上手小程序开发工具。 小程序的审核与发布 微信小程序什么时候会正式发布?也许连微信自己也不知道。 但是,我们知道的是,如果想成为第一批公开可用的小程序,就 得赶紧将小程序提交审核。那是因为: l 先审核、先发布: 小程序虽然还不能公开使用,但可以提交官方审核。等到正式发 布时,就不用排队候审了; l 很可能审核不过: 微信对小程序的审核非常细致,所以,你的小程序很可能不知不 觉踩到红线而审核不通过。 如何让小程序快速安全地过审呢?现在,知晓程序(微信号 zxcx0101)就 为 你 带 来 从提交代码到发布的全过程,帮你的小程序轻 松通过审核。 此外,文末将会为大家带来一个小小彩蛋,内含为小程序添加体 验者的方法。 第一步:上传代码 当小程序开发完成之后,开发者需要做的是将 release 版本代码 上传至小程序在公众平台的后台。 1. 打开微信开发者工具,使用项目管理员的身份登录; 2. 打开需要提交新版本的项目; 3. 点击左侧栏「项目」; 4. 点击「最后上传时间」右侧的「上传按钮」; 5. 管理员扫码确认身份; 6. 填写版本号、项目备注等内容; 7. 确认无误后,点击「上传」。 图 5-5-1 开发者工具中的上传确认界面 点击上传后,release 代码会上传到小程序后台的「开发版本」 一项中。 需要注意的是,「开发版本」中只能有一个版本的代码,新的上 传操作会替代之前已存储在「开发版本」中的代码。 第二步:进入审核页面 当 release 代码上传完毕之后,开发者就可以将代码提交审核了。 在此之前,我们要找到提交审核页面的入口: 1. 进入微信公众平台(http://mp.weixin.qq.com),并使用小 程序帐户登录; 2. 使用管理员微信扫码验证; 3. 进入后台后,点击左侧「开发管理」。 图 5-5-2 公众平台「开发管理」入口 此时,我们就进入了开发管理页面。 下拉页面找到「开发版本」一项,就可以找到我们刚才在开发者 工具中上传的代码。 点击左侧的「提交审核」,使用管理员微信扫码验证并确认声明 后,小程序就进入了审核资料提交页面。 第三步:填写审核资料 审核资料提交表单共分为「绑定测试号」和「配置功能页面」两 个部分。 图 5-5-3 审核资料填写界面 1. 绑定测试号 对于「绑定测试号」一项,微信官方的说明是这样的: 该微信号将提供给微信审核⼈员审核微信小程序时登录使用,微 信号需能够体验小程序的全部功能,请勿使用常用微信号扫描。 微信在小程序官方运营文档中也提到过,开发者需要为审核人员 提供可体验所有功能的测试帐户(一个供测试使用的微信号),以便 审核;同时,还需要在帐户体系中新增微信登录功能。 如果小程序不带有帐户体系,可以跳过此步骤。 2. 配置功能页面 接下来,我们需要「配置功能页面」。在这一步,可以为小程序 添加索引,以帮助用户分类检索小程序的相应服务页面。 那么,如何填写功能页面呢?分两种情况: l 如果你的小程序只实现一种功能(服务):你 只 需 要 选 择 主 页 , 填好标题并写好标签,并在「所在类目」一项中填写小程序 的服务范围。 l 如果你的小程序需要实现多种功能(服务):你需要为实现每 一种服务的主页,分别进行信息填写和服务范围标注。值得 注意的是,你在审核时登记的服务范围,同时也需要登记在 公众平台中(可以登记多个)。 没看明白?这里举两个例子: l 如果你要做一个只卖手机的小程序,那么,用户进入首页就得 看到一个卖手机的页面。审核前,你需要在公众平台为小程 序登记「卖手机」的服务类目;审核时,「功能页面」填写 首页(index),服务类目选择「卖手机」。 l 如果你除了卖手机,还要在小程序里卖书、卖家具?那么,小 程序首页就要引导用户去到卖手机、卖书和卖家具的页面。 审核前,你需要在公众平台为小程序登记「卖手机」、「卖 书」和「卖家具」三种服务类目;审核时,需要将卖相应物 品的页面设为功能页面并附上相应的服务类目。 知晓程序(微信号 zxcx0101)推 测 ,微信要求为小程序每一种服 务填写服务范围和标签,可能与小程序的检索与用户入口有关。 因此,开发者需要认真考虑每一个功能页面的配置,以免影响小 程序的露出。 第四步:等待审核和结果处理 提交审核之后,建议小程序的管理员时常登录小程序后台,检查 审核结果。 审核完成后,管理员可以通过小程序后台页面右上角的「小铃铛」 图标,检查审核结果。 图 5-5-4 审核不通过的通知 我们发现,在公测阶段,小程序审核不通过的原因,更多是一些 官方文档中没有明确指出的问题。例如一些设计纰漏、交互误导等。 实际上,小程序的审核标准比已经公开的文档要更加细致、更加 不可捉摸。 好在,微信的审核结果会将问题一条条展示出来。开发者只需要 理解审核不通过的原因,有针对性地对小程序代码或审核资料进行修 改,就可以重新提交审核了。 如果审核通过,管理员就可以在小程序后台点击左侧的「开发管 理」,在「审核版本」中找到审核通过的版本。 图 5-5-5 「提交发布」按钮位置 在这里,小程序管理员可以将审核通过的版本发布。但由于目前 公测阶段尚不能公开发布小程序,目前的提交发布按钮依然是灰色的 状态。 彩蛋:为小程序添加体验者 目前,小程序尚不能公开发布,也就是说,普通用户暂时还不能 使用小程序。 但是,开发者有权向已经授权的体验者开放测试版权限,帮助开 发者测试小程序在不同机型上是否能正确运行。 如何添加体验者呢?只需遵照以下几个步骤: 1. 管理员在公众平台的「用户身份」中选择「体验者」,点击「绑 定」按钮,输入体验者的微信号; 2. 微信会向体验者发送绑定邀请,体验者接受绑定即可。 图 5-5-6 体验者管理页面 值得注意的是,如果你的小程序没有设置体验版,那么体验者也 是无法正常体验的。 设置并分享体验版,其实也很简单: 1. 管理员在公众平台的「开发管理」找到「开发版本」一项,点 击右侧的下拉菜单,选择「设为体验版」; 2. 设置完毕后,分享「开发版本」一项左侧的「体验版」按钮的 二维码给体验者。 图 5-5-7 体验版二维码获取按钮 使用体验版前,你必须知道这些事情: l 管理员可手动为小程序绑定体验者,每个小程序最多可以添加 40 位体验者。 l 在整个体验流程中(包括添加体验者、体验者测试小程序等) 都不要求体验版本过审。 l 所有微信用户(包括其他小程序的开发者或普通用户)都可以 成为体验者。 管理员可以撤销体验版本,撤销体验版本的发布并不会令已经绑 定的体验者资格失效。 以上就是知晓程序(微信号 zxcx0101)为 大 家 带 来 的 小 程 序 审 核 和发布指南。希望本文可以帮助开发者快速将小程序提交审核,同时 也祝各位开发者能顺利通过审核。 第六节 小程序官方文档解读 想顺利开发出小程序,微信提供的小程序官方文档你不得不读。 官方文档共包含三个部分,分别是开发文档、设计文档和运营文 档。整个阅读和消化下来,差不多要花上一整天的时间。 如何能快速消化官方文档呢?知晓程序(微信号 zxcx0101)为 大 家准备了一份浓缩版的官网文档解读,只需要花一半时间,就能获得 官方文档的全部重点。 开发文档解读 如果你想开发小程序,就得先学会一套微信特制的「开发语言」。 为了让大家上手这门开发语言,微信官方提供了一份十分详细的 开发文档: 图 6-1-1 小程序开发文档入口 要是没时间通读,这里还有一份省时省力的替代品: 知晓程序(微信号 zxcx0101)准 备 了 一 份 官方开发文档的超简浓 缩版,不仅囊括了官方文档的所有重点信息,而且篇幅只有原文的三 分之一。 只要看完这篇文章,你就能快速上手小程序开发。 一、 语言与文件 各位可能已经知道,微信小程序开发与其他平台的开发最大差异 在于:微信使用的开发语言和文件很「特殊」。 小程序所使用的程序文件类型大致分为以下几种: l WXML(WeiXin Mark Language,微信标记语言) l WXSS(WeiXin Style Sheet,微信样式表) l JS(JavaScript,小程序的主体) 在语言方面,看上去小程序几乎重新定义了一套标准。但是实际 上,它们与「前端三件套」——HTML、CSS 和 JavaScript——差不 太多。 下面,我们就来对比一下小程序开发语言和「前端三件套」有什 么异同点: l HTML 与 WXML:两者差异比较大,如果之前没有接触过 Android 开发,可能会觉得有些头疼。事实上,WXML 更像 是 Android 开发中的界面 XML 描述文件,更适合于程序界 面的构建;而 HTML 则倾向于文章的展示(这与 HTML 的历 史有关),以及互联网页面的构建。 l WXSS 与 CSS:两 者 在 语 言 上 几 乎 没 有 差 别 ,可 以 直 接 通 用 。 l JS 文件:小程序的 JS 文件与前端开发使用的 JS 几乎没有 区别,小程序的 JS 新增了微信的一些 API 接口,并去除了 一些不必要的功能(如 DOM)。 在语言上,小程序完全向学习成本最低的前端开发看齐,但这不 代表所有前端开发者都能直接无缝迁移。 如果你是从前端开发转向小程序,就需要注意这两个点: l HTML 与 WXML 两种文件的构建思想差异较大,如果之前只 接触过前端开发,需要一点时间才能适应 WXML 的编写方法。 l 虽然小程序使用的是前端语言,但不代表可以继续沿用前端 的开发思想进行开发(类似前端向 Node.js 发展)。小程序 对前端开发的要求从「构建界面」升级成「开发完整应用」, 前端开发依然需要在意识上进行转变。 二、 界面构建 1. 基本逻辑 WXML 和 WXSS 两种文件是小程序界面元素声明及样式描述文 件。WXML 最大的特点是以视图(view)的方式串联界面元素,并 通过程序逻辑(AppService),将信息更新实时传递至视图层。 view 类似于 HTML 中的 div 元素。在构建的时候,view 可 以被多级嵌套,view 内可以放置任意视觉元素。 需要注意的是,元素一旦超出屏幕之外,用户是无法再看到的, 这与 HTML 有较大不同。举一个例子,将手机屏幕想像成一个舞台, 在舞台之外的演员是无法被观众看到的。 小程序有专门用于滚动的视图,如果希望界面是一个可以自由滚 动的界面(例如列表等),可以使用 scroll-view 视图,在 WXSS 中将其大小调整为整个屏幕,并设置 scroll-y(上下滚动)或 scroll-x(左右滚动)为 true。 Hello World 小程序中不能直接使用 DOM 控制 WXML 元素。如果需要进行数 据更新,需要使用 WXML 提供的数据绑定及元素渲染方法。 还有一点需要注意的是:小程序的栅格排版系统使用的是 Flex 布局,它是 W3C 在 2009 年提出的一种排版标准。 2. 绑定数据 对于单个字段,开发者可以使用数据绑定的方法进行信息更新。 绑定的数据除了在加载的时候可以更新,也可以在 JS 主程序中以函 数形式进行更新,更新同样可以反映到界面上被绑定的数据中。 3. 条件渲染与列表(循环)渲染 条件渲染适合带有意外情况提示的页面(如无法加载列表或详情 时做出提示等等)。它的渲染带有触发条件,即符合条件时渲染这个 页面,否则忽略或渲染另一段代码。 Hello, Tom! Hello, Anna! You neither Tom nor Anna. 两个花括号所包含的判断条件中的变量于主程序 JS 代码中的 data 中声明。 Page({ data: { boyname: 'Tom', girlname: 'Anna' } }) 若需要在界面中构建一个列表,可以使用 WXML 中的循环渲染, 将同一元素渲染代码进行集合。循环的数据可以通过数组的方式写入 data 中供 WXML 访问。 {{index}}: {{item.message}} Page({ data: { array: [{ message: 'foo', }, { message: 'bar' }] } }) 渲染完毕后,渲染判断条件的变动可以影响界面变动。 4. 模板与引用 WXML 支持使用模板与引用减少代码体积。 模板是在 WXML 代码中对相同的代码进行复用的方式。 可以将多个模板写入至同一文件,并使用 import 在其他文件中 进行引用。 //some other codes