安卓简单购物商城源码-[实操]从入口到场景

Q:为什么说小程序就像朋友?

A:小程序发布后不久,有一个流行的笑话:APP就像原来的设备,一年用几次; 服务账号就像情人,每月固定好几次; 订阅账号就像酒店卡,每天可以卖广告; 小程序就像性伴侣,用完就走。

妓女、各类平台、垂直大鳄等资本瓜分了线上流量,所以未来流量的战场一定是在实体场景。 许多巨头实际上已经证明了线下流量的巨大潜力。 在快递包裹上打印自己的二维码并关注公众号,就会产生两次寄快递的粘性。 Pokemon Go允许用户在物理地图上捕获Pokemon。

未来的入口不只限于二维码,而是所有富媒体。 QR 码对应于 2D 识别,复杂图案对应于 AR,语音命令对应于 Siri(一种发射信号的芯片); 使用这些入口的人不限于人类。 要识别这些入口,除了人们扫描二维码外,还有自动驾驶汽车识别路标并找到实体店的坐标; 智能助手会根据业主的喜好,自动在电商平台上寻找合适的商品并下单。

总之,未来的流量将来自线下,流量的入口将来自多媒体。 整个战场将从移动互联网向“物理互联网”转变安卓简单购物商城源码,作为后续向“物联网”普及化的过渡。

所以对于微信来说,小程序利用二维码等富媒体(图片)来将线下商家的流量聚集到微信上。 另外,从微信的服务品类来看,这将是腾讯朝着成为互联网水电的目标又迈出了一大步,下文将进一步分析。

目录

1. 商业登记流程

2.小​​程序到底是什么?

3.小程序入口

4、小程序应用场景

5、是否应该做小程序(想法、小程序和H5的区别、红利期、小程序类别)

6. 一些要点

7、小程序能力(自带组件、事件、硬件能力、微信能力)

一、企业注册流程

2.小​​程序到底是什么?

编写小程序时,它使用 JavaScript(一种 Web 开发语言)。 第一次运行时,“网页”会缓存在本地,所以并不是不需要下载,只是下载的包比较小。 然后转换为相应的Java或Objective-C方法并通过Android或iOS各自的JSBridge方法运行。

比如我在一个小程序中写了一个方法:

程序会识别wx.showToast及其参数(文本、图标、持久事件),然后执行本地方法:

弹出一个原始的Toast组件。 上述描述只是为了方便解释。 实际的运行环境会复杂得多。

上图左侧是大家在微信公开课Pro会场看到的奇微云平台的快销报表小程序。 它确实看起来像一个独立的应用程序。 虽然我看不到它的源代码,但我尝试恢复其中一个页面作为示例。

每个页面都是一个独立的文件夹(微信开发者工具会自动为您创建)。 每次添加新页面时,都需要向 app.json 文件的页面列表中添加一项。

一般来说,src目录建议用来放置固定的企业介绍视频或者宣传图片等(整体包大小不能超过1M)。

如果不放在这个目录下,也可以放在自己的服务器上,以便远程访问。 例如一些经常更换的活动促销横幅。

app.json可以配置整个程序的底部导航标签和导航栏的背景色(好像不能转成图片。如果想做京东app超级品牌日那样的全屏氛围渲染,建议在banner图片的上部使用渐变颜色过渡(到你配置的状态栏背景色)、导航栏标题、导航栏颜色、是否支持下拉刷新等。

app.js是全局方法,比如获取用户信息、配置全局数据等。

js会部分转换成原生java和oc代码执行,但是页面呢? 您是否使用操作系统本机的组件? 带着这个疑问,我使用UI测试工具打开微信:

你看到有一个 YYWKWebview 的东西了吗? WKWebview是一个原生浏览器控件,相当于只是用一个小程序打开下载的本地网页。 而且它采用了类似weex/vue的技术,所以页面切换非常流畅。 (大家可以自行百度搜索阿里巴巴weex)

上面可以看到,每个页面都是一个文件夹,那么里面的四个文件分别是什么呢?

.json 是配置文件。 就像你的简历,上面写着你的名字、毕业日期等,而小程序的json会记录一些信息:导航栏背景颜色、导航栏标题颜色、导航栏标题文字内容、窗口背景颜色、下拉背景字体、加载图的样式、是否开启下拉刷新、页面整体是否可以上下滚动。

.wxml是页面的基本骨架。 就像骨架规定了人的大致相貌一样,wxml是一种类似XML的结构化文本,描述了小程序页面的元素。 例如,一篇文章需要有标题、作者、时间和正文,但它并不关心这些元素如何排列。

.js是前端脚本语言javascript的文件。 如何移动人体四肢需要大脑和肌肉的控制。 正是js的作用,让小程序从“骨架”变成了“有血有肉”。 Node.js 做一些动态的事情,比如请求数据、控制元素上下移动、判断用户输入的密码是否安全等。

.wxss决定了整个页面元素的颜色等表达方式。 就像同一个人可以穿不同的衣服,化不同的妆,看起来也不同。 wxml文件中也写了一个按钮,但是可以为其配置不同的背景颜色:

3.小程序入口

线下实体(商店、停车场、政务服务窗口等)

比如我YY一下这次微信公开课给出的场景例子。

停车场入口处有一个摄像头对着你的车牌号。 扫码打开小程序后,点击开始停车。 如果有空闲停车位,系统会自动开门并记录停车开始时间。 此时,小程序会显示室内地图,引导您左转、右转到达目标停车位,停车离开。 当您来取车时,开车到门口,再次扫描二维码或直接从历史记录中打开小程序,选择结束停车,激活微信支付,停车场摄像头会识别车牌号,并打开大门让你走。

整个过程不需要停车卡和专职人员服务,既环保又节省人工成本。

在线电脑导航站:

手机导航站:

微信群分享:

性冷淡风格(分享自节目介绍页):

不可抗拒的风格(分享自程序内部页面):

关键词精准搜索:

发现入口:

聊天列表顶部:

4、小程序应用场景

应用场景主要分为微信群协作和实体服务。

微信群协作

微信群协作主要用于一些企业内部服务或工作交流。

问卷投票:公司即将召开年会,哪项活动最好? 通过小程序投票并在群里分享,可以实时看到前三名。

会议助理:临时召开紧急会议,需要相关人员尽快确认参会状态。 把一个会议通知小程序扔进群里,只有特定的人才能打开,了解会议内容,确认谁参加、谁请假。 参加人数一目了然。 当活动时间到来时,您还可以使用小程序的消息服务能力向参与者发送会议提醒; 到达集合地点后,您可以通过打开小程序进行签到。 真正意义上的,需要的时候用,用完就走。

虽然使用奇微微信企业号组件可以实现很多办公场景,但并不是每个企业都有企业号。 对于普通的小公司、小团队来说,这些能力在小程序中还是快捷方便的。

实体服务

睡觉前,扫描贴在床头的二维码,打开“金客外卖”,下单早餐外卖,然后扫描“京家智能家居”小程序二维码,检测到是晚上,自动关闭电源。灯。 。 对Siri(iOS智能语音助手)说“晚安,明天7点叫醒我”,然后就可以美美地睡一觉了。

第二天,Siri 叫醒了我。 等了一会儿,早餐就送来了。 吃完饭后,我在微信聊天窗口打开小程序服务通知,点击早餐外卖支付成功模板消息,进入“金客外卖”小程序页面给了差评(你要求的是有钱却为什么不给差评?!哈哈哈)。 吃完早饭我们就出去了。

昨天我把自行车落在公司了,今天就骑吧。 我在楼下发现了一辆肉色的自行车,打开摩比单车小程序,扫码解锁,骑上它,高高兴兴地回到了公司。

来到公司,我打开并登录了小程序,在公司前台扫描了动态变化的二维码。 同时,小程序识别出了我的地理位置,签到成功! 回到座位上,开始一天的奋斗。

午餐时,同事都说饿了,外卖有折扣。 然后快速打开饥饿吧小程序。 红烧鸡30元包邮,于是我发起了团购,然后把这个页面分享到了公司群。 朋友们点击页面选择自己想要的套餐,每次付款完成后,都会收到一条“付款成功,发货中”的模板消息。

然后在小程序上,还可以实时看到外卖小哥去过哪里,超级贴心。

中午睡觉,插上耳机,打开睡眠小应用,听听舒适的背景音乐。

下班后就可以开车了。 去地下车库取车,开车到门口,再次扫描二维码或直接从历史记录中打开小程序,选择结束停车,激活微信支付,停车场摄像头就会识别车牌号,然后打开门。 发布。 我接了地上的几个同事,去亿达广场找吃的。 附近没有停车场,所以我们随便找了个空地停车。 下车后,我看到一个巨大的广告牌:

Tanniao 提供特别优惠。 我快速扫描二维码,打开探鸟小程序,点击排队按钮。 提示我前面有5个人。 它很快就到了。 剩下2个人的时候,小程序提示我点餐。 订单已经下了,我们五个人点两只鸡,应该够了。

因为喝了一点酒,所以酒后就没有开车。 吃完饭,我打开嘟嘟旅游,要了司机。

当我去取车时,我发现它夹着草! 有违章停车罚单……我喝醉了,扫描上面的二维码,打开交警小程序二维码,输入车牌号码,系统自动拉出罚单列表,点击刚才违章停车罚单,是通过微信支付完成支付的。 所以有经验的司机朋友们,不要随意停车。

…………以上故事纯属虚构…………

5.我们应该做小程序吗?

去年年初,我写过一篇文章《App账号能否接管App Store?》 “你是不是想太多了?” 已经提到了这个问题,那么现在小程序正式上线了,我们再讨论一下。

理念在商业中的实践

重后端轻前端是技术架构上的策略。 由于前端代码更容易被反编译和破解,因此很多核心逻辑和算法都在服务器后台运行。 在商业环境中,这个想法其实非常适用。

我们来回顾一下人类发展的各种“前端”呈现形式:

龟甲、兽骨、竹简、木碑、金石、帛纸——PC电脑网页——黑白屏手机短信——智能手机时代的iOS和安卓APP——手机H5——公众号服务账号、小程序-智能眼镜-智能硬件上的显示屏-直接向大脑输入信息

这些事情正在迅速变化,但什么是不变的呢? 信息本身的价值、信息处理的价值、核心服务的价值不变。 一千年前你去餐馆吃饭,今天你去餐馆也是吃饭; 10年前你为了xxoo去酒店,今天你还是为了xxoo去; 更多的时候我们应该关注自己的服务和业务的闭环,无论是app还是小程序,都只是一种呈现形式。 如果你餐厅的饭菜非常难吃,无论你发布在饿吧外卖平台上、小众点评,还是你跟风做个小程序,都不会有人打扰你。 照顾好你的餐厅。

专注于您的核心服务,将其余的交给第三方。 由于规模优势,他们自然能够做得更好、成本更低。

小程序和H5的区别

正如上面“小程序的真面目”一章提到的,微信小程序是一个本地缓存的网页。

为什么小程序比H5更流畅、更酷?

因为小程序缓存在本地,所以第二次打开时不需要再次加载,但事实真的是这样吗? 如果小程序开发者让图片、文字等很多页面元素动态加载而不进行缓存,那么每次打开小程序就相当于……重新下载app,这和原来的H5是一样的。

但事实证明,H5的页面切换不流畅,总是要加载,而小程序却不能。 怎么能说小程序和H5一样呢?

原因在于,过去大多数外包开发者更喜欢将各个页面逐一编写,页面逻辑混乱。 当你想跳转到新的页面时,你必须再次向服务器请求页面,这是极其恶心的。

随着Vue等前端框架的流行,越来越多的SPA架构的Web应用出现。 微信小程序应该是基于这个技术的。 使用SPA架构的应用程序只需要在开始时加载并切换到应用程序内的其他页面,不需要加载新页面,因此非常流畅。 那是不是意味着我们可以直接用vue来写,而不用做一个小程序呢?

不,小程序的入口比H5多很多。 对于传统商家来说,找外包商用Vue写微官网的成本和找外包商做小程序的成本是一样的,甚至更贵。 小程序的成本仍然很高。 因为小程序这么受欢迎,肯定有大量的第三方开发者为各个行业制作小程序模板。 只需一点配置即可一键生成,而且成本非常低。

但小程序的原生能力比H5多很多不是吗?

微信之前也开放了JSSDK,也有分享接口、图片接口、音频接口、设备信息、摇一摇、扫一扫等可以在移动H5端使用的能力。 小程序的优势在于比JSSDK拥有更多的数据存储能力,比如视频、图片、音频等,可以由用户在wifi环境下保存到本地,然后使用移动网络时可以离线查看。 但是如果JSSDK开放了这些能力也是可以做到的,只不过微信隐形后会帮你标准化,让你可以使用SPA架构来构建网页。 这正是小程序在技术层面所做的事情。

还有其他区别吗?

各有各的优点,所以我想如果两者都做的话成本会很高吧?

如果你原来的Web应用是使用Vue框架构建的,那么创建微信小程序的成本很低,需要做一些转换和适配。 例如,Vue的自定义标签功能被定义为微信小程序的视图。 我相信将来开源社区会有人贡献这些转换后的代码。 如果你原来的网页不是SPA结构的,那么建议找第三方开发者制作一个小程序,成本较低,但限制会较多。 如果你有精力或者想要获得更多的能力,你可以逐步朝着我刚才提到的方向去做一些工具来完成从Web应用程序到小程序的桥接转换。

红利期在哪里?

在2017年微信公开课Pro版中,男神张小龙对小程序进行了详细的分析和解答。 此前,很多人都认为微信小程序会带来一波流量红利,但张小龙告诉大家,小程序在微信上没有入口,也不能订阅。 想通过小程序获得红利的人一定要失望了。

但真的是这样吗?

回想1840年代和1850年代美国西进时期的淘金热,也许就更容易理解了。 最终从淘金热中获利的人不是淘金者,而是船夫、卖水者、卖铲子以及其他支持淘金热的人。 如果说小程序引发了“淘金热”,那么它最大的红利可能并不是小程序本身。 会是什么?

我认为是以下几个方面:

1.第三方外包开发商

目前,市场上外包一个简单的商城小程序的价格在300到1000左右。 对于个人开发者来说,这基本上是无利可图的,很少有人会去定制。 对于灵活性要求较高、需要一些基础组件、定制开发的企业,需要有一个能够大规模输出基础组件,并在此基础上为部分企业定制开发的第三方服务商。 这适合一些在企业账户奖金浪潮中表现出色的开发者。 它们很可能成为同样专注于企业用户的小程序。 例如,奇微云荣获微信公开课Pro平台“2016年度微信电子发票优秀合作伙伴”奖。

2.自动生成小程序

虽然微信小程序的开发门槛明显低于APP,但问题是:开发者需要适应和学习其一套语言标准,开发的应用程序无法移植到其他应用程序。 可以在微信上运行。 如果技术新手能够通过拖拽或基于模板的方式自动生成小程序,这将进一步降低开发和使用的门槛。 但这样的平台不够灵活。

目前该类公司有维辰、有赞等。

3、提供后端数据托管服务的云服务商

小程序只是一个前端。 整个开发涉及企业认证、云数据存储、ICP域名注册等,对于单个企业来说非常繁琐。 因此,需要一个能够提供一站式后端托管服务的第三方平台。

目前腾讯云正在做这件事,阿里云不会推出微信小程序托管服务。

4.小程序开发及运营培训

虽然可以通过第三方外包或者拖拽自动化的方式来开发小程序,但前者可能会面临成本问题,而后者则可能无法定制出专门满足需求的小程序。 那么最好的解决办法就是“自己动手,丰衣足食”。 提供小程序开发培训的机构可以从中受益。

5、小程序导航网络

张小龙在公开课中表示:“我们没有小程序商店,所以我们不会像外界猜测的那样建设APP分发商店。” 既然微信不做,而且入口价值巨大,其他人自然会做。 要求别人记住这么多小程序的名字,每次要用的时候都要搜索,非常麻烦。 如果小程序能在想用的时候在导航网站上汇总查找就方便多了。

哪些项目不适合

1、依靠向外界输出流量来盈利的App

比如今日头条、Zaker等资讯类APP商业变现方式过于单一。 它们基本上是广告。 小程序不提供商业变现手段。 当他们制作小程序时,他们感觉有点革命性……但他们可以提供一种简单的方式来将他们的业务货币化。 大量小程序入口增加品牌曝光度。

2、需要更多依赖系统原生能力的应用

例如:

工作流程是一个工具,可以通过剪贴板等进行输入,然后设定动作。 可以做分词、发送邮件、检查是否有诈骗电话号码等,还有很多定制的工作流程。 Workflow需要获取用户剪贴板的内容、启动电子邮件、Evernote等第三方应用、打开网页等系统功能。 小程序并没有将所有系统API暴露给开发者,这与小程序的定位不符。

另一个例子是一款名为优读的阅读应用程序。 这个产品要解决的问题是如何从大量的信息中过滤出有价值的内容。 他们的想法是使用“有才华的”推荐和机器算法来实现这一目标。 为了方便用户在优度上分享内容,他们做了很多便捷的操作。 例如,当您在任何应用程序中阅读内容时,当您想将这篇文章分享到优度时,只需复制链接,然后下拉通知即可。 中心,您可以选择收藏或分享文章。 这非常方便。 但对于小程序来说就完全不适合了。

3、需要大存储空间的应用

这一类通常是视频和音频应用,例如腾讯视频、网易云音乐等。用户使用此类应用的场景很大一部分是在移动环境中,他们会提前在本地缓存歌曲或电视剧。 但微信小程序的10M存储限制根本无法满足。 不过网易云也可以将私有FM独立出来,制作一个小程序来利用。

4、需要大规模3D渲染

这方面主要是关于游戏的。 一个游戏包一般在10M以上。 小程序上做网页游戏是不可能的,所以唯一的办法就是做Flappy Bird。

5、可服务性弱、与线下场景连接弱的应用

例如Evernote等工具产品。

6、如果你不能做好自己的APP,就不要加入小程序的热闹。

如果你做一个app没人能用,那么你做一个小程序也没人用。 因为核心是服务和价值,小程序的定位是在你有免费流量的情况下让用户更方便地访问你的服务,而不是为你的服务吸引流量。 例如,如果你在商店租了一堆广告牌并发布小程序二维码,用户可以更好地使用你提供的服务。 如果你没有流量入口,那么小程序也没有。 就像app一样,仍然无法推送,也没有保留。

可上架的小程序类别

以下为小程序允许的服务类别及所需材料。 从下图可以看出,微信对政务、工具、出行、实体商户四大类的细分极其详细。 可以看出,这就是微信重点发展的四大品类。 一旦所有政府机构都使用小程序,我们必须使用的许多政务服务必将刺激更多的中老年用户使用微信。 另外,旅行是高频需求,从n年前微信支付和支付宝争夺移动旅行入口的竞争就可以看出。 另外,微信虽然不提供导航,但为什么会有这么详细的分类,即使所需的评论信息是一样的呢? 发人深省。

6. 一些要点

一些数字

重定向能力有限

您无法在小程序中跳转到对应的公众号,也无法诱导公众号的关注。 但会显示在小程序的介绍页面,可以点击跳转至绑定的公众号。 您可以通过介绍页面在公众号和小程序之间跳转,但无法通过长按网页或聊天窗口中的二维码打开小程序。

Android小程序可以放在桌面上,但iOS目前还不能这样做。

但不排除未来会以Safari书签的形式放置在桌面上。 技术上是可以的,但是用户操作路径比Android上一键放到桌面要麻烦一些。

页面上不能出现引导您下载自己的应用程序的文字。

微信官方文档5.1:

只有管​​理员可以上传代码

开发者无法上传

任意页面均可生成带参数的二维码,最多10万个

这是非常有想象力的。 在床头贴一个金钥匙智能管家小程序二维码,参数action=closeLight,扫码后灯会自动关掉;

在门口放一个金钥匙智能管家小程序二维码,参数action=out,出门扫一扫,即可自动关闭家里的总电源开关(嗯,除了冰箱)。

厕所里放个二维码,行动=焦点,扫一扫,自动关注微信公众号jinkey-love。

同样,带参数的二维码可以在小程序的不同功能区使用,供线下商户和政务服务直接进入相应服务,无需使用多个小程序。 例如安卓简单购物商城源码,去银行用取号机扫描二维码获取号码,或者在金银柜台扫码了解各种金融产品。

注意手机空间和数据量不够

小程序不需要下载,但第一次使用时会发包,相当于缓存网页。 下次打开会更快,但是……你已经下载了,而且是“不需要确认的下载”,点击它就可以下载,然后你的流量就会暴增……下图是微信小程序的下载页面,不过在正式版中,微信已经去掉了“数据正在下载,请稍等……”的文字,但仍然是下载,因此,微信所说的“免费下载”更多的是“无意义下载”。

小程序空间有限

整个小程序包上传大小不能超过1M。 加载到用户手机后,缓存大小不能超过10M(可能会被清除),永久存储大小不能超过10M(下次进来时仍然可以打开)。

请注意您的姓名和头像

小程序名称每年可修改一次,头像每月可修改5次,小程序简介每月可修改5次。

7、小程序能力

为什么你需要知道这个?

默认组件

有哪些组成部分?

该组件是什么样子的?

当然,小程序本身只是一个网页。 可以使用CSS自定义组件的样式或者自己编写一些特殊的组件,比如电商购物车的计步器。

事件钩子(建议非产品经理、运营等请求者跳过钩子和事件部分)

1.什么是钩子?

一只小乌龟头上有数字7和8(嗯,好像没有什么问题)。 他需要走过一个装有加法机的盒子,然后数字15就会出现在他的头上。 那么这个盒子就称为钩子函数。 如果里面放一个乘数,那么穿过立方体后,小乌龟头上的数字就变成了56。

小程序就相当于小乌龟。 当它运行的时候(小乌龟走路),会触发很多事件(钩子函数,相当于小乌龟经过的立方体)。 这些立方体中放入了什么逻辑,取决于坑比的产品。 经理。

例如,当电子商务计步器更改值时:

2. 有哪些钩子?

应用程序生命周期挂钩

小程序的生命周期分为程序和页面两部分:

1. 程序有三个事件:启动(未显示)、显示和隐藏。

2、页面有五个事件:加载、显示、就绪(第一次)、卸载页面、隐藏页面。

另外还有下拉刷新时的onPullDownRefresh、上拉无限加载时的onReachBottom、点击右上角分享按钮时的onShareAppMessage。

其中,我觉得onShareAppMessage还是比较有用的。 例如,当用户点击右上角的分享按钮时,页面顶部会叠加一张分享图片(高度为页面高度的80%)。 这会改变页面在聊天窗口中共享的方式(这里还没有实践过,只是猜测,大家可以自己尝试一下)

3.触摸事件

分为点击、长按、触摸开始、触摸移动(比如可以用来拖拽列表)、触摸结束、触摸取消(比如看视频的小程序需要你双手按在手机上即可播放(当你看快要高潮的时候,如果你女朋友打电话,就会触发touchcancel事件)

4. 组件事件

组件事件有几种主要类型:值更改事件、输入开始事件和输入完成事件。

例如,如果一个文本框需要输入电子邮件地址,由于用户输入时会触发input事件,因此可以绑定一个钩子函数,获取用户每次输入的字符串并判断是否包含“@”和“。” ,如果是,则判定为合法。

其他详情请看下图自查。

5. 富媒体活动

富媒体事件主要有以下几种类型:开始(加载)播放、暂停播放、结束播放、播放(加载)失败、播放进度更新。

6. 硬件能力

7. 微信功能

(1)微信登录

(2)获取用户的头像、昵称、性别、国家、城市、省份

(3)微信支付

(4) 模板消息

只有以下两种行为可以触发模板消息:

(5)客服留言

用户通过客服消息按钮进入会话,1分钟内可发送一条消息。 超时后无法发送;

用户在客服窗口发送消息,最多可回复3条消息,且需在48小时内回复。

(6) 分享到聊天窗口

共享镜像不可自定义; 当前页面的图片,从顶部开始,高度为屏幕宽度的80%,将作为共享图片。

来源:虎秀网公众号

PS:后端回复:代码,可以查看最全的小程序演示代码。

后端回复:插件,可以查看小程序UI和插件。

后台回复:视频,可以查看完整版视频教程。