小程序介绍PPT课件
- 格式:pptx
- 大小:5.99 MB
- 文档页数:46


⼩程序的介绍
1.⼩程序是什么?
⼩程序是⼀种新的开放能⼒,开发者可以快速地开发⼀个⼩程序。⼩程序可以在微信内被便捷地获取和传播,同时具有出⾊的使⽤体验。
任何⼀个普通的开发者,经过简单的学习和练习后,都可以轻松地完成⼀个⼩程序的开发和发布。
2.⼩程序的发展史 早年,随着微信越来越流⾏,微信逐渐成为移动互联⽹中⼀个主要的⼊⼝,越来越多的⼈会通过微信来分享和浏览⽹站。
微信基于WebView实现了前端界⾯的渲染,为了丰富微信中H5页⾯的功能,微信提供了JS-SDK,开放了拍摄、录⾳、语⾳识别、⼆
维码、地图、⽀付、分享、卡券等⼏⼗个API。给所有的 Web 开发者打开了⼀扇全新的窗户,让所有开发者都可以使⽤到微信的原⽣能⼒,去完成⼀些之前做不到或者难以做到的事情了。
JS-SDK 解决了移动⽹页能⼒不⾜的问题,通过暴露微信的接⼝使得 Web 开发者能够拥有更多的能⼒,然⽽在更多的能⼒之外,JS-
SDK 的模式并没有解决使⽤移动⽹页遇到的体验不良的问题。 ⽤户在访问⽹页的时候,在浏览器开始显⽰之前都会有⼀个的⽩屏过
程,在移动端,受限于设备性能和⽹络速度,⽩屏会更加明显。除了⽩屏,影响 Web 体验的问题还有缺少操作的反馈,主要表现在两
个⽅⾯:页⾯切换的⽣硬和点击的迟滞感。
为了提⾼⽤户体验和使⽤的流畅度,微信研发设计了微信⼩程序。
3.⼩程序的优势和劣势
(1)优势
微信助理,容易推⼴。在微信中,⼩程序拥有众多⼊⼝,例如附近的⼩程序、⼩程序码、分享、发现-⼩程序等五⼗多个的⼊⼝。这些⼊⼝有助于企业更好的获取流量,从⽽进⾏转化、变现。
使⽤便捷。⽤户在使⽤⼩程序时,只需要轻轻点⼀下就可以使⽤,更加符合⽤户对使⽤⽅便、快捷的需求,所以⼩程序的⽤户数量不断增加。
体验良好,有接近原⽣app的体验。在微信⽣态⾥,⼩程序在功能和体验上是可以秒杀掉 H5 页⾯的,H5 页⾯经常出现卡顿、延时、加载慢、权限不⾜等原因,⽽这些问题在⼩程序⾥都不会出现。
微信乘车码小程序怎么用使用方法介绍
近日腾讯正式在微信上线了乘车码小程序功能,那么这里有用户不知道微信乘车码小程序怎么用,下面就让小编为大家介绍一下使用方法,一起来看看吧。
使用方法介绍:
1、打开微信-发现-小程序,然后通过搜索“腾讯乘车码”小程序或扫描“腾讯乘车码”小程序码进入。 2、授权绑定手机 3、开通免密支付,需要绑定银行卡或用微信“零钱”支付
4、输入支付密码 5、开通成功自动进入微信卡包;再次使用时在“我-卡包-会员卡”可以轻松找到。
腾讯与羊城通正式宣布推出二维码乘车,广州市民和外地游客在部分站点乘坐公共交通时可通过腾讯乘车码小程序或者羊城通APP一键享受移动支付便捷乘车。
首次开通后,乘车时只需将二维码靠近公交或BRT的扫码机“嘀”一下,就可以完成付款。
ps:继杭州、武汉、深圳之后,广州也将实现扫码乘公交的便捷乘车方式。
微信⼩程序开发02-⼩程序基本介绍
前⾔
前⾯我们研究了下微信⼩程序的执⾏流程,因为拿不到源码,只能算我们的猜想,我们需要更加了解⼩程序还需要做具体的项⽬,于是我们将原来那套还算复杂的
业务拿出来:
(有些晦涩有些乱,但是对于整体了解⼩程序结构有帮助)我们⽤⼩程序实现这⾥的代码,看看是个什么样的体验,另外我这⾥想保证代码最⼤程度重⽤,为后续⼀端代码四端运⾏做前驱探索。
页⾯复杂度还是⽐较⾼的,包括了:
① 弹出层
② 页⾯跳转
③ 缓存
④ 数据请求
⑤ 列表页、滚动分页
⑥ ......我相信完成了这个例⼦,我们对⼩程序业务代码怎么写会有⽐较好的了解,于是让我们开始今天的代码吧。
⼩程序的布局
为什么不使⽤HTML&CSS
微信⼩程序这种平台型的超越Hybrid系统诞⽣还是有⼀些客观条件的,其中⼀个就是移动端的应⽤相对来说简单的多,想想PC负责的布局,如果要使⽤⼩程序实
现,那么复杂度会提⾼很多。
⼩程序代码编写逻辑层依旧使⽤JS完成,但是结构层以及样式层推出了:
① WXML,Weixin Markup Language,是微信设计的⼀套标签语⾔,与HTML类似,做过React&Vue的同学会⾮常熟悉
② WXSS,WeiXin Style Sheets,是⼀套样式语⾔,⽤于定义样式,与CSS类似,⼀般认为是CSS的⼦集
因为⼩程序中UI组件都是Native实现,所以⼩程序直接⼿起⼑落压根放弃让我们使⽤HTML容器,这样做我觉得有个好处是:
为了更好的限制,我之前也在做Hybrid乃⾄前端框架,⼀般来说我会限制到View级别的实习,要求必须按照我的规则做,但是因为⼊⼝为index.html⽂件,我甚⾄
将全局控制器App的实例化放到了main.js⾥⾯,只提供了建议的做法,事实上HTML还是太过灵活,有些同事逐渐根本不按照我们的规则玩,他觉得他的做法更
好,但是这样⼀来便会破坏了项⽬的总体性,后续的⼯程性的优化或者监控可能就不能帮助他了,从某个⾓度来说,我是认可⼩程序的做法的。
微信⼩程序开发⼩程序框架及⽂件⽬录介绍
2019-12-18
10:35:27
逻辑层初步介绍
除了视图层(即我们所看到的页⾯),⼩程序逻辑层各部分的功能如下:
index.js 逻辑代码
index.json 页⾯配置⽂件
index.wxml 页⾯结构
index.wxss 表⽰index.wxml结构的样式
app.js app.json app wxss的作⽤与index是类似的,但它们作⽤于全局
在后续的课程中我们将对逻辑层进⾏更深⼊的讲解。
⼩程序框架及⽂件⽬录介绍
⼩程序框架介绍
⼩程序框架的核⼼是⼀个响应的数据绑定系统。整个系统分为两块,视图层和逻辑层。
视图层 (view)
内容展⽰
⽂本样式
视图层由WXML与WXSS编写。
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language)⽤于描述页⾯的结构。
WXSS(WeiXin Style Sheet)⽤于描述页⾯的样式。
组件(Component)是视图的基本组成单元。
逻辑层(app service)
业务逻辑
数据处理
⼩程序开发框架的逻辑层是由JavaScript编写。
逻辑层将数据进⾏处理后发送给视图层,同时接受视图层的事件反馈。 每个页⾯有独⽴的作⽤域,并提供模块化能⼒。
⼩程序⽂件介绍
⼩程序⽂件包含⼀个描述整体程序的app和多个描述各⾃页⾯的page.
页⾯
⼀个页⾯由四个⽂件组成,如下所⽰:
index(默认)
⼩程序注册及配置
⼊⼝⽂件
配置⽂件
全局样式
app.js⽂件,⽤来定义⼩程序的全局数据和函数,控制、监听⼩程序的全⽣命周期。在这⾥可以见到的全局函数有onlaunch(监听⼩程序初始化),onshow(监听⼩程序显⽰),onhide(监
听⼩程序隐藏)等。app.js中还可以定义⼀些全局变量,其他页⾯引⽤app.js⽂件后就可以直接使⽤这个⽂件中的函数和变量。
app.json是配置⽂件,可以配置以下信息:页⾯路径,窗⼝信息,标签导航,⽹络超时等。