微信小程序要这样去解读

微信小程序要这样去解读

九个月之前张小龙的一次公开演讲第一次提到应用号,今天终于以小程序的名字正式对外小范围公测,只有200个邀请名额,我知道你肯定没有被翻牌子,我也没有。不管是朋友圈、订阅号、服务号,只要是抢先专注机会的人都尝到了不小的甜头,那么如今的小程序也一样,很多创业者、开发者都跃跃欲试。

微信小程序请公测以来已经一周了,有三类同学对词比较关注。一是创业者,二是App开发者,三是前端开发者。基于此,创业者可能思考更多的是能否减少成本,能否把产品做的更好,其中能有哪里价值和可为的事。App开发者在思考小程序对App开发的冲击有多大?是不是像传言一样,小程序会抢占App的开发市场,导致App开发者会失业?前端开发者也许嘴角上扬了一下,近几年微信订阅号、服务号、企业号已经在带动着H5的发展,这下小程序绝对是一个重磅炸弹。那么事实究竟是怎么样的呢?且听我慢慢道来。

小程序究竟究竟能做什么

要想搞清楚这个问题,我们必须彻底的了解微信小程序是什么、它的开发流程、它的能力、它的优点、它的局限性,了解了这些我们才能把它对于企业的作用发挥到最大。

首先来看看张小龙同学是怎么说的:

小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无需安装卸载。

看了这句话的人可能大概明白了“小程序”这个产品要做什么,它提供的能力是什么。那么它对于企业来说究竟能做什么呢?

小程序的发布、与如何打开

看到张小龙的圈下面有人评论到“App Store不让叫应用号、苹果想霸占App这个词”,也许你已经想到了,微信的小程序发布也需要微信的审核,但是时间远远没有App Store那么长。

打开已经发布了的小程序有两种方式,一是扫二维码、二是微信搜索,扫码已经可以扫了,但是目前是小范围公测阶段,所以很多人没有体验的权限。微信搜索目前还没开放出来,所以在客户端看不到响应的入口。在搜索出结果后点击确认后会进入小程序的欢迎页,欢迎页在下面会讲到。

如何把握现有App和小程序的度

企业主和App开发者都会思考这个问题,小程序的的出现对App有什么影响呢?

我认为我们应该保持现在App的迭代更新,将小程序作为一个lite版去做一些产品、功能性实验,毕竟小程序的开发成本、发布上线时间等都是相对比较低的。

有人说我们应该把选择权交给用户。粗略考虑这话没错,我们也确实应该在更多的渠道去抓用户,但是我认为我们始终应该把握住App这个阵营,说不定微信哪天就没落了,我们绝不能没有自己的产品线。

同样的道理,微信、支付宝很早就为淘宝、口碑、滴滴、饿了么、京东等App开了专门的用户通道,但是用户还是用原生App的占绝绝绝大多数。

小程序和公众号内嵌H5有什么区别

为什么没有直接说小程序和公众号的区别呢?因为小程序原名叫应用号,它也是公众号的一种,所以我这里把它和传统的公众号内嵌H5来做对比。

从产品的角度来讲

之前做公众号时,微信底部会提供菜单作为功能引导入口,最终的结果还是引导用户到H5页面,其实H5的体验和Native App的差距还是比较大的。而微信小程序吸引人的地方在于它提供了丰富的框架组件和API接口供开发者调用,具体包含:界面、视图、内容、按钮、导航、多媒体、位置、数据、网络、重力感应等。在这些组件和接口的帮助下,运行在微信上的小程序基本保持和Native APP一样的流畅度,极大的提高了用户的体验。

从开发的角度来讲

由于不论是App、H5,它们的Server端都一样,所以这里不讨论。

之前的开发就是我们讲的传统的前端:html、js、css,加上微信用js提供的一些原生能力,最终的展现形式也是用手机内置浏览器(WebView)打开我们的页面,但是归根结底都是H5,这种方式我们应该熟悉的不能再熟悉了。

小程序我们可以简单粗暴的理解为RN(React Native),用大白话来讲就是用H5写的程序,最后以Native App的方式来运行,他们的原理都是用JS调用底层Native组件。

在写这篇文章之前,我也亲自去写了一个Demo体验了一把,配置文件用.json,页面的结构文件用.wxml,事件与逻辑处理用.js,页面样式用.wxss,这里把编辑器一角截了一张图:

可以把wxml理解为html、wxss理解为css,稍微有点变化,但是语法还是一样的。

小程序的能力有哪些

这里说的能力除了界面、视图、内容、按钮、导航、多媒体、位置、数据、网络、重力感应这些api大家脚后跟都能想到的能力外,介绍一些之前公众号H5不能实现的功能。

一、微信导航栏

在传统的公众号开发时,我们不能对导航栏做任何的样式定制,现在在小程序中我们可以定义导航栏的背景颜色(background-color)。但开发者需要规定小程序各个页面的跳转关系,让导航系统能够以合理的方式工作。

微信导航栏分为导航区域、标题区域以及操作区域。其中导航区控制程序页面进程。目前导航栏分深浅两种基本配色。

导航区(iOS、Android):导航区通常只有一个操作,即返回上一级界面,而点击安卓手机自带的硬件返回键也起到相同作用。

微信导航栏自定义颜色规则(iOS、Android):小程序导航栏支持基本的背景颜色自定义功能,选择的颜色需要在满足可用性前提下,和谐搭配微信提供的两套主导航栏图标。建议参考以下选色效果:

二、页面内标签分页导航

我们可以根据需要在页面添加标签(Tab)分页导航,若仅为一般线性浏览的页面建议仅使用微信导航栏即可。

标签分页栏可固定在页面顶部或者底部,标签数量不得少于2个,最多不得超过5个,为确保点击区域,建议标签数量不超过4项。一个页面也不应出现一组以上的标签分页栏。

其中小程序首页可使用微信提供的原生底部标签分页样式,该样式仅供小程序首页使用。开发时可自定义图标样式、标签文案以及文案颜色等:

同样的,我们在设计的时候也注意风格选色:

三、小程序App启动页

小程序启动页是小程序在微信内容一定程度上展现品牌特征的页面之一。本页面将突出展示小程序品牌特征和加载状态。启动页除品牌标志(Logo)展示外,页面上的其他所有元素如加载进度指示,全部由微信统一提供,我们不用开发也不能开发。

四、小程序页面下拉刷新与加载

在微信小程序内,微信提供标准的页面下拉刷新加载能力和样式。在样式上,微信提供了深色、浅色两套方案,并且刷新图标与下拉标示配色已捆绑,我们在开发时应注意下拉标识与刷新图标的和谐统一,这些下拉的交互和动画等由微信统一提供,我们不需要开发。

为了防止造假与作弊,微信小程序提供了下拉刷新时的标志,此处标示提供深浅两套方案,文字颜色不可自定义,我们在开发时应注意配色要和标志颜色明确区分。iOS和Android配色方案相同如下展示:

so,和上面一样,我们不应该这样配色

无论在什么页面我们都应该告诉用户目前的加载状态,以免让用户误以为App卡死。对于此,微信也提供了两种页面加载样式。第一种可以明确的告诉用户目前的加载状态、进度等;第二种由于覆盖整个页面无法明确告知具体加载的位置或内容将可能引起用户的焦虑感,因此我们要慎用第二种菊花。

微信小程序设计指导提示我们:

* 若载入时间较长,应提供取消操作,并使用进度条显示载入的进度。

* 载入过程中,应保持动画效果,以免用户产生App卡死的错觉。

* 不要在同一个页面同时使用超过1个加载动画。

注意:这里只例举了最重要的四点,当时它的能力不仅仅是这些,更多的待你去挖掘。

小程序的优点和缺点

我始终相信凡事都是有两面性的,而对于一个产品来说,它肯定有有点和缺点的,如果合理利用了它的优点和缺点,那也是事半功倍的。

微信小程序的好处很多,不然就算腾讯推到天上去也绝不可能这么火,我就不一一例举了,但是目前最明显的就是不用用户安装我们App,就可以让用户体验到媲美Native App的流畅度。

它的缺点其一在于在于我们不能使用dom、window等对象了,可能限制了一些功能,但是看了微信的封装后我觉得这也并不是坏事。

缺点其二是微信小程序发布时的代码限制大小为1024kb,也许正是因为它小,所以叫小程序吧。

我们最最关心的有两点:

  1. 如何获取用户关注度。
  2. 如何在众多的小程序中脱颖而出博得存在感。

这两个问题可不是精准的关键字和美观的UI能解决的问题,等微信小程序开放全面公测后,以目前微信小程序的热度,到时候不知道要冒出来多少应用呢,这是个难点。

微信小程序会干掉App吗

终于回到主题了,我的观点超级无敌的明确:绝对不会。js可能会干到app,但是绝对不会是微信小程序,就像今年很火的React Native一样,过一点时间大家冷静下来认识清楚了也就都回归了。等有一天js的性能提升了,硬件对于产品和用户都不再那么昂贵了,应该会实现的,但不是现在。

官方干货连接

微信小程序简易教程

微信小程序设计指南

微信小程序工具下载

微信小程序API文档

时间: 2024-08-04 18:04:21

微信小程序要这样去解读的相关文章

微信小程序开发--flex详细解读(2)

一.align-items和其参数  stretch / baseline 注:sretch只有在交叉轴没有设置固定长度的情况下才有作用                                  baseline是以第一个子元素为基准,后面的子元素与第一个子元素对齐. 二.flex-wrap 和其参数 row-wrap (默认)  /  wrap    / flex-wrap:作用---换行 flex布局,基础内容已经结束,欢迎大家一起交流. <view class="root&q

CSDN博文精选 微信小程序全方位解析

责编:陈秋歌,关注微信开发等领域,寻求报道或者投稿请发邮件chenqg#csdn.net.研发心得.项目实战.前沿技术.外文翻译--,只要是技术干货,十分欢迎投稿至chenqg#csdn.net.人人都是主编,这里就是你的舞台. 欢迎加入"微信开发技术"群,参与热点.难点技术交流.请加群主微信「Rachel_qg」,申请入群,务必注明「公司+职位」. 九个月之前,应用号首次被提出.近日,应用号以"小程序"的名称,正式向200人发出公测邀请."无需下载,用完

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

我看小程序系列文章:1 不一样的角度 解读微信小程序

大家好,我是Beta007. 最近一直在研究小程序,会在这里整理出一系列的文章,和大家交流. 第一篇文章首发在了知乎专栏:小楼昨夜又秋风:https://zhuanlan.zhihu.com/p/22891188 知乎ID:七月在夏天  (头像是只喵~) 不一样的角度 解读微信小程序 七月在夏天· 2 天前 前段时间看完了雨果奖中短篇获奖小说<北京折叠>.很有意思的是,张小龙最近也要把应用折叠到微信里,这些应用被他称为:小程序. 含着金钥匙的小程序,还未展现全貌,就已经成了开发界的头条大事儿.

商超行业微信小程序开发定制一般多少钱 (行业技术人员解读)

商超行业微信小程序开发多少钱?如果想要开发一个商超行业微信小程序大概得 需要多少钱呢?随着时代的发展小程序已经逐渐取代了很多传统APP的存在. 越来越多的品牌和企业个人都将小程序的开发作为首要目标,这也足以证明小程 序的优势是非常大的.那么下面我们就来说一说小程序开发大概需要多少钱. 一.模板开发模板开发具体步骤 模板小程序开发多少钱?首先在小程序开发之前必须搞清楚自己的需求,如果你 想要开发的小程序功能比较普遍,跟市面上的小程序基本相似,而且同样的商业 形态还很多的话,比方说网店.商城.分销系

一起脱去小程序的外套和内衣 - 微信小程序架构解析

版权声明:本文由渠宏伟  原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/760767001484042227 来源:腾云阁 https://www.qcloud.com/community 作者介绍: 渠宏伟,腾讯高级工程师,从事Web前端开发5年,先后负责企鹅电竞.腾讯视频VIP.腾讯OA开发框架.腾讯微信HR助手等项目.对Web前端架构..NET架构有丰富的经验. 微信小程序的公测掀起了学习小程序开发的浪潮,天生跨

微信小程序组件解读和分析:五、text文本

text文本组件说明: text 文本就是微信小程序中显示出来的文本. text文本组件的示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 <view > <text>我是文本组件</text> </view> <text>{{text}}</text> 下面是JS代码: [JavaScript] 纯文本查看 复制代码 ? 01 02 03 04 05 06 07 08 09 10 1

微信小程序组件解读和分析:六、progress进度条

progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress进度条组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-t

原创:去繁存简,回归本源:微信小程序公开课信息分析《一》

以前我开过一些帖子,我们内部也做过一些讨论,我们从张小龙的碎屏图中 ,发现了重要讯息: 1:微信支付将成为重要场景: 2:这些应用与春节关系不小,很多应用在春节时,有重要的场景开启可能性: 3:春节是一个重要的推广时机,非常适合推广,微信应该不会错过这个时机: 4:春节前需要做好准备,那么预留一定的天数是必要的,10-15天是一个合理的准备时间: 在12月19号时,我回帖中有一个个人的预测:http://www.wxapp-union.com/forum ... pid=11965&fromui