小程序开发指小程序开发指南2018-11-23两年前还籍籍无名的小程序，如今已经成为移动互联网的新风口。***早小程序在微信平台上成名，手握10亿月活用户的微信，很快成为小程序创业者的掘金之地。巨头的嗅觉敏锐，***宝、百度随即跟进，今日头条也开始内测小程序，几大平台纷纷出手，让小程序赛道更加拥挤，小程序生态多元化的背后，是巨头新一轮圈地。而小程序之所以这么火，是因为其自身的引流模式和盈利模式，毕竟既会技术、又知道如何将技术变现的开发人员到哪都是香饽饽。本文以四大巨头都在关注的小程序电商为例，手把手教你开发小程序版网上商城。1.开发小程序商城本文将实现一款小程序版的网上商城，前端使用J***aScript开发小程序，后端使用Node.jsExpressMySQL。首先用SQL脚本建立MySQL数据库，数据库名为orishop。MySQL用户名是root，密码是12345678，也可以使用其他用户名和密码。下面先看一下本项目的主界面，本项目分为客户端和服务端实现，客户端涉及到轮询图、按钮、图片列表、产品展示、购物车等。项目效果展示：2.轮序图设计轮序图是在App首页上部显示的，用于展示商品信息，可以以一定时间自动切换商品信息。轮序图需要使用swiper组件，每一个轮序图Item需要使用swiper-item组件，通常每一个Item是一个图片，可以直接在lt;swiper-itemgt;中放置一个lt;imagegt;标签。轮序图的布局代码如下。3.控制轮序图轮序图的布局代码中使用了很多变量来控制轮序图的显示，例如，indicatorDots用来控制是否显示面板指示点，autoplay用于控制是否自动切换图像。interval用于控制切换时间的间隔，duration用于控制滑动动画时长。这些变量都需要在index.js文件的data变量中设置，代码如下：在上面的代码中imgUrls变量没有设置值，如果想测试轮序图，可以在小程序工程的根目录创建一个images目录，并且在该目录中放置若干个图像文件。为了让轮序图水平充满整个界面，需要在index.wxss文件中添加如下的样式代码。4.使用Node.jsExpress连接MySQL数据库由于本项目需要使用服务端，所以在编写客户端的同时，还要编写服务端的程序，这一部分会使用Node.jsExpress连接MySQL数据库，在连接MySQL数据库之前，先要创建相关的表和视图。本项目使用WebStorm开发，创建一个名为service的工程，接下来在service工程中创建my_connect.js文件，并输入下面的代码。接下来测试连接数据库的代码是否正确，小程序申请，在service工程的index.js文件中添加如下代码。由于Node.js提供的模块不支持操作MySQL数据库，所以运行本例的代码需要使用下面的命令行安装MySQL模块。然后在浏览器地址栏中输入http://localhost:3000，就会在WebStorm的控制台看到输出结果。5.从MySQL数据库中获取要显示的轮询图信息在这一部分仍然编写服务端代码，在小程序端需要显示轮询图，轮序图中的数据需要从v_goods视图获取，该视图可以得到，销售的商品信息。接下来在mysql_connect.js文件中添加如下代码。接下来创建路由脚本文件hnf.js，并添加下面的代码：接下来在app.js中使用下面的代码注册hnf路由。6.动态显示轮询图现在修改小程序端的代码，在这一部分会在小程序端通过wx.request函数访问上一部分创建的路由，并根据返回数据动态显示轮序图。在index.js文件的onload()函数中添加下面的代码。7.实现导航按钮布局在轮序图下方是一排导航按钮，效果如下图所示：导航按钮的布局代码需要添加到小程序工程的index.wxml文件中。接下来在app.wxss文件中添加如下的样式，其他布局也会用这个样式，所以将该样式添加到全局的app.wxss文件中。在index.wxss文件中添加样式代码，每一个按钮占整个宽度的11%。导航按钮也是动态显示的，数据依赖于n***igationData变量，可以在index.js文件的data中添加如下代码来测试导航按钮的布局是否正确，记住，这只是用于测试的代码，在后面的布局会用动态的数据替换这些实验数据。8.动态显示导航按钮本节会在服务端从数据库中获取导航按钮的数据，客户端会根据这些数据动态显示导航按钮。首先切换回WebStorm，在mysql_connect.js文件中添加如下的方法，该方法用于获取商品类型，也就是导航按钮数据。有多少个商品类型，就显示多少个导航按钮。在服务端创建一个type.js路由文件，在app.js文件中添加代码注册路由。切换到小程序端，在index.js文件的onLoad方法中添加下面的代码。9.显示、畅销商品在小程序首页下方通过列表显示了、畅销商品，与轮询图显示的商品类似，此处只是为了演示列表的使用。10.显示商品详细信息本节显示了显示商品详细信息的布局，首先在小程序端创建shopinfo.wxml布局文件，并输入下面的代码。接下来在shopinfo.wxss文件中输入代码，***终显示的效果如下图所示。小程序，用户和场景的新矿藏带你了解小程序的微信开发小程序的理念是“无需安装，用完即走”。在实际的使用过程中，现在的小程序大多界面简洁，功能实用。在小程序的发展过程中，小程序发展的不只是功能，而是更明确了***和使用场景。小程序的出现，让微信看起来更像一个操作系统，小程序之于微信，就像是APP之于手机。不过，小程序与APP还是有很大区别的，***重要及***根本的还是理念上的区别：小程序强调的是“去中心化”，APP则需要集中流量。小程序开发者也从***开始照搬APP的功能开发小程序，到现在背靠着小程序生态开发出更符合的小程序。比如转发获得奖励的的小游戏，微信拼团的拼多多。此外，低频刚需、刚需高频Lite版应用其实更适合用小程序，既省事、又安静，耗流量低、占用内存小。而且因为在微信里面，换手机也无需重新安装了。比如摩拜单车、美团，用户使用他们的小程序即可使用，无需APP。从这个角度上说，小程序可以取代某些APP，但是小程序与APP终究是互补的。张小龙说，两者是不同的应用方式，小程序不是来取代App，而是丰富App的场景。我们先从用户说起。虽说APP面向的是所有手机用户，但是安装这一步骤就拦住了许多用户，尤其是中老年用户。APP的用户比微信的用户人群年龄上更小，在微信里面用户年纪较大，他们不会、也不爱装APP。小程序的“无需安装”的特性决定了它可以接触到年龄更为广泛的用户，举个例子——唱吧小程序。在没有小程序前，用户的习惯是这样的——我看到我的家人朋友分享了一个唱吧的链接，点进去，我没有唱吧APP需要，我就放弃了。但现在，有小程序了，我不用APP也能唱歌、评论、转发，小程序实际上是把一批不太愿意APP的用户了，相当于借助小程序开拓了一个新的用户群。除了触及更多用户，小程序还能够“唤醒用户”。在APP上，用户需要更新APP才能够体验到新的功能，而在这个过程中，APP会不厌其烦地发送推送，但是依然难以唤醒用户更新；而微信几乎不存在这个现象，基本不会有人想着屏蔽微信通知，开发者的小程序只需要通过腾讯审核就能立即生效。从数据上来看，小程序更是证明了自己在转化用户上的能力。拼多多小程序抓住了初期上线的流量红利，仅半年多就获得了超过1亿的访问量，做到3亿用户、千亿元年GMV只用了两年；当大家都在为流量和转化率发愁的时候，蘑菇街仅用三个月就吸引了6000多万小程序用户，单日成交额已达到2016年双十一期间单日的20多倍。说好了用户，我们再来看小程序的使用场景。就现阶段而言，微信小程序主要适合一些低频刚需的场景。根据这个特点，微信小程序比较适合点餐场景、工具类产品以及电商类产品。线下进入小程序的入口就是通过扫描二维码进入。数据显示，2018年上半年在小程序餐饮用户场景入口分布中，二维码占比，达到28.4%。餐饮小程序的使用场景主要是在线下，因此，扫描二维码进行点餐或领取优惠券等活动成为餐饮类小程序用户的主要需求，例如麦当劳就在2017年12月上线了小程序点餐功能，该功能的上线为麦当劳带来了大量的新会员注册，也大富提升了门店的点餐效率和减少用户排队等候时间。再来看一个数据。据《中国餐饮报告2018》显示，2017年我国餐饮业收入达到3.9万亿元，市场规模巨大。美股、港股、A股中的一些市值很高的的餐饮企业，又都具有显著的零售化特征，例如广州酒家，它将近40%的营收是零售化产品。同时，餐饮行业竞争激烈有目共睹，我国2017年年底比年初新增了311万家餐厅，但餐饮门店的关店数是开店数的91.6%，平均每个玩家的生命周期仅508天。此外，外卖平台竞争格局逐渐稳定，补贴力度早已下降，每单外卖含7-10块钱的超高物流成本，微信里的小程序，让客单价30元以下的餐品无法支撑盈利。而如果是餐饮商户自己的小程序则不需要向平台***服务费，能够将这部分成本用在提升自身服务质量上。餐饮小程序不仅可以只用于门店点餐，也可以通过小程序进行外卖下单，还能够帮助商户进行数据经营管理，提升门店经营效率，增加收益。小程序作为一种新型的轻量级应用，它的出现无疑是给原来已经呈现中心化的移动互联网带来一种新的可能。张小龙在微信公开课上是这么说小程序的原则：小程序不为任何场景特殊设计，平台要足够抽象；微信不会以裁判的身份下场，好的小程序要由用户自己发现；小程序在2018年要更多的连接线下，搜索、扫码、对话是小程序的「去中心化」流量入口。小程序的存在对于许多企业来说，是自身产品的延伸，可以将扩大用户基数，通过微信来获取更多的流量；对于线下商户来说，小程序更像是一个生产工具，提升了效率，降低了成本。小程序更是催生了小程序相关的行业，诞生了一大批第三方服务商和无数的商机，小程序上一定有更广阔的机遇和未来，给所有怀抱梦想的人以回应。这些“场景”你可能还没用上微信公开课冠球xiaochengxu让生意变好2018-12-05昨天，2019微信公开课PRO正式售票十分钟后，前排的200个位置迅速***。你买票了吗？一起“同行WithUs”。关于PRO的***，小程序是微信，我们释放了一组海报，其中就有这张。这也是我们想和大家在PRO上探讨的问题。常常有开发者问我们，小程序到底有没有入口？其实，我们已经开放了超过60多个小程序场景“入口”。每个入口的释放，都代表它可能一个新的场景。在PRO之前，我们先给大家准备了一份入口“秘籍”。1小程序60多个入口，你知道几个？微信开放平台基础部助理总经理杜嘉辉就提起过，小程序代表一个时代的连接器，App只能够在系统桌面上点开，H5比App有更多的连接场景，比如浏览器和公众号。但是，在移动互联网没有网址的概念，记住一个网址很难，而小程序提供了60多种连接方式。60多种连接方式代表60多个小程序入口，一年多来，我们已经将小程序入口嵌入线上线下各个场景当中，开发者可以将流量无缝导入小程序中。这些入口大体分为线上与线下两个方向：从线上看，主要有公众号、会话、广告、搜索、App跳转等场景，小程序，从线下看，有扫码、附近小程序等等。具体来看：公众号：公众号自定义菜单栏、公众号模板消息、公众号文章、公众号详情页相关小程序列表等等；群聊会话：分享到群/个人小程序卡片、聊天小程序等；广告推广：公号文中广告、朋友圈广告、小程序Banner广告、小游戏激励式视频广告等；微信搜索：品牌搜索、服务搜索等；App跳转：从App转发的小程序卡片、App里直接打开小程序等；扫码：扫描小程序码、扫描二维码、长按图片识别小程序/二维码等。除此之外，我们还新增了小程序任务栏（这不是入口^_^）和“我的小程序”，方便用户更快地触达常用的小程序。当然，这些只是冰山一角，未来我们还会尝试打通更多场景，在方便用户更快触达小程序的同时，让小程序真正深入各行业，成为其服务用户、业务流程流转的一部分。了解完整版入口，戳这里。2把一个入口用到？他们有办法微信是一个开放的生态，我们一直秉持着去中心化的理念，把机会赋予所有开发者。我们发现，每个新能力开放时，总有一群人能及时跟进、尝鲜，挖掘新“入口”背后的商业价值，实现流量的自然增长，他们都是怎么玩的？或许这些案例可以给你带来启发。▌会话会话是许多小程序的流量来源，这个入口背后承载着微信庞大的社交关系链，当小程序的玩法与社交场景相契合，就能带来合理的流量增长。连咖啡在小程序里上线了“口袋咖啡馆”，用户将自己的咖啡馆折叠为一张张小程序卡片，通过会话向好友推荐自己喜欢的咖啡。这样，咖啡就成了“传情达意”的介质，成了人人际交往的润滑剂。“口袋咖啡馆”上线首日，PV就突破420万，10%以上实现了真实销售。详细链接传送门→“咖啡社交”来了，是什么让100W人开了自己的咖啡馆？▌公众号对于主要承载内容传播功能的公众号而言，小程序能够丰富公众号的服务场景，给公众号插上了“翅膀”，让公号内容以更加鲜活的表现形式触达用户。人民日报公众号有很多受欢迎的音频节目，但文章能插入的音频链接有限，用户查找相关音频只能通过手动翻阅。因此，人民日报把公号的音频栏目搬到了小程序“人民日报FM”里。人民日报每次公号推文时，都会带上“人民日报FM”的小程序，凭借着人民日报庞大的粉丝量以及小程序流畅的体验，小程序刚一推出就受到了粉丝的欢迎。人民日报用这个办法，把公众号篇篇10万的阅读量，通过小程序把用户留存下来。详细链接传送门→当AI时代来临，人民日报用小程序“触电”人工智能▌扫一扫现在，人们早已习惯通过微信来扫码，通过小程序码/二维码/一维码的实际应用场景没有限制，都可以进入小程序，可以说“万物皆入口”。因此，对于拥有几万SKU的家乐福而言，借助小程序扫商品的能力，扫码就成了连接小程序与商品的入口。通过小程序扫描商品上的条形码，用户可以直接在小程序里付款，离开超市时通过出示“出场码”即可离店，相当于为每位顾客配上了一把“扫码枪”。上线9个月，“家乐福中国”小程序访问量突破2亿。这在传统的互联网时代，是一个不可企及的数字。详细链接传送门→用小程序把用户“串”起来后，家乐福收割2亿访问量！▌微信搜索在搜索场景里，流量的价值在于用户需求十分精准。今年，我们开放了“品牌搜索”和“服务搜索”功能，让小程序有明确的品牌标识，同时把核心功能直接外露，让用户可以“即搜即用”。开通“品牌搜索”后，用户通过搜索品牌词“人机”等，都能快速地找到无人机产品以及对应服务，强化了品牌形象，并有效提升了产品***和服务触达，例如在线人工服务在接入后提升了50%的访问。（更多案例可搜索“韩都衣舍”、“名创优品”、“兰蔻”体验）报名工具是一款实用的活动统计、信息收集小程序。自从开通服务搜索“功能直达”之后，日***PV提升了2000多，依赖于搜索场景精准地吸引到众多的报名活动发起人。对比之前，每天的新增活动发起人数提升了50%，提升效果明显。▌App跳转对于深耕App多年的企业而言，小程序是其触达新用户、挽回流失用户的工具。通过App分享小程序卡片及App里直接打开小程序的能力，让小程序与App的场景形成联动，服务更多用户。用户在大众点评的App里分享餐厅给微信好友，就是以小程序的形式，好友直接点击进入“大众点评”小程序，就能了解到餐厅的详细信息，感受到大众点评的核心服务。小程序并非没有入口，其实处处皆入口，而你要做的是，找到那个合适你的场景，去思考这个场景触达用户的入口是什么？然后运营好它。▌场景1PRO揭晓当然，在2019年1月9日-10日的2019微信公开课PRO上，小程序也会有全新的动作，到底是什么呢？买票上车就知道了！文章转载自微信公开课微信公开课微信ID:wx-gongkaike1.点击历史信息，查看更多内容2.长按右侧二维码，关注微信公开课长小程序-微企邦业务4部-微信里的小程序由临沂微企邦网络技术服务有限公司666提供。“小程序”就选临沂微企邦网络技术服务有限公司666（/），公司位于：山东省临沂市兰山区鲁商中心B03-1404，多年来，微企邦业务4部坚持为客户提供好的服务，联系人：张继营。欢迎广大新老客户来电，来函，亲临指导，洽谈业务。微企邦业务4部期待成为您的长期合作伙伴！)