一个页面一个文件夹
小程序每一个页面都由一个wxml(其实就是html),一个wxss(其实就是css)和一个js文件构成。并且页面之间样式和js都是隔离开的,而路由统一由根目录下的app.json配置而成
内置常用组件
使开发变得简洁
小程序的本质
VUE + 内置一堆JS方法 + 禁止使用JQUERY。而微信小程序的开发者工具可以看作配置好的vue开发环境
操作dom
const query = wx.createSelectorQuery()
query.select('#the-id').boundingClientRect()
https://developers.weixin.qq.com/miniprogram/dev/api/wxml/SelectorQuery.html
小程序主要优点
不需要下载(不占手机内存)
使用起来比较流畅,不会出现卡顿
为很多中小型公司或者节省了开发APP的成本
可以捆绑在公众号上,让关注公众号的粉丝体验。
小程序的主要缺点
微信小程序只有2M的大小,这样导致无法开发大型一些的小程序。所以目前你会看到很多小程序真的很小很简单。
需要像APP一样审核上架,这点比HTML5即做即发布要麻烦些
从设计者的角度理解小程序的运行机制
- 如何获取数据
-
通过 HTTPS 请求去服务端获取数据,,小程序对 HTTPS 有限制,除了要求通信协议是 HTTPS,出现的域名必须提前预设之外,还将应用层协议限定到了 JSON 格式下
-
小程序提供了丰富的 API 供开发者在手机系统上存取文件。可用本地文件来做缓存、状态记忆等
- 界面如何呈现
-
在小程序中,和 HTML 对应的是 WXML,保留下来的只有 HTML 的概念,而传统的div a标签都完全被抛弃了。和 Facebook 的 React 类似,小程序引入了自己的 HTML 标签,它和 article section 这样的语义标签不同,小程序中的标签更像是传统客户端开发中的组件(或者叫控件)每个组件都有自己背后的职能和使用方式。
-
和 HTML 相比,小程序的 WXSS 算是比较完整地保留了 CSS 的特征。WXSS 在语义上最大的不同,一是在于它支持了相对尺寸单位 rpx(responsive pixel),每 750rpx 等价于当前设备的屏幕宽度,它的引入,把那种繁复的屏幕尺寸适配变得简单了不少。
-
小程序中虽然支持 ES6 标准的 JavaScript,但窗口级的 JavaScript 却完全被废弃掉了,开发者无法用 JavaScript 去调用 window、document 对象来修改界面元素完成逻辑。
小程序中的 JavaScript 其实直接对应 Node.js 的用法,用来完成后台业务逻辑,而不是直接控制交互。小程序的这个设计,使其可以用到 Virtual Dom 的方式来渲染界面,让界面数据更新时的性能优化成为可能,但付出的代价就是少了窗口级 JavaScript 的那层胶水黏合,使得很多功能的开发变得极其呆板和繁复。
- 如何交互
通过触发事件,然后通过绑定的数据触发更新来实现交互
举个实际的例子,假设开发者需要做一个滑动切换页面的效果,在小程序中该如何实现?首先,是将变量数据引入渲染页面:
<view
class="page"
id="current-page"
style="left:{{distance}}rpx;"
bindtouchstart="movePage"
bindtouchcancel="movePage"
bindtouchmove="movePage"
bindtouchend="movePage">
</view>
可以看到,distance 是一个模版参数,它初始值为 0,表示移动的距离。通过 bindtouchstart 等函数绑定上 JavaScript 的方法,将事件回传。
movePage: function(event) {
var status = {
needUpdate: false,
distance: 0
}
// 处理各种事件,计算是否需要刷新,和移动方向
if ("touchstart" === event.type) {
// 开始计算移动
...
} else if ("touchend" === event.type) {
// 判定移动的距离是否足够.
...
} else if ("touchcancel" === event.type) {
// 被打断就算了.
...
} else if ("touchmove" === event.type) {
// 计算移动距离
...
}
// 根据移动的距离,来更新界面
if (status.needUpdate) {
this.setData({
distance: status.distance
})
}
}
而在 JavaScript 一端,则捕获事件、计算偏移量,然后将新的偏移量送到前端界面。
从用户的角度,理解开发模式
- 基于现成的模板进行编辑
-
优点:简单快捷,如果图片素材等提前准备到位了,通过模板编辑配置的模式开发微信小程序,一般1、2个小时就能搞定!
-
缺点:很难找到完全符合用户需求的模板
- 模板 + 拖拽
这种模式下,工具平台方会提供一些比较典型的行业、场景模板,同时还会提供比较丰富的相关功能模块,这些功能模块可以自由“装卸”到模板上去。模板比较全面地体现了相关类别小程序的整体框架,用户基于该模板框架,结合自身的具体需求,通过拖拽方式对各种各样的模块进行自由组合,从而实现各种各样的个性化需求。
-
**优点:**比较简单快捷,对制作者几乎没有技术背景的要求,同时还有比较大的个性化拓展可能性
-
缺点:难以实现真正的定制,而且后期难以修改
- 组件化的快速开发
主要特征是将各种比较通用的代码模块封装成一个个组件,未来开发中不用重复编写这些模块的代码,而是直接拖用组件。
- 优点:因为是在代码层面进行开发,对小程序的功能实现有最大的掌控度。因为进入了代码层面,所以对于一些特殊需求的复杂小程序,就能根据需要随时全面开展性能优化了。此外,由于组件化,开发速度也还比较高
- 缺点: 难度较大,需要有的一定的编码基础。开发周期相对较长
小程序能解决的问题
- 解决低曝光问题,由于小程序中有“就近小程序功能”,该功能可以让实体店在5公里范围内直接向微信用户展示,微信的人气非常高,实体店可以经常使用小程序来提高曝光率。
- 解决高昂广告费的问题,由于小程序的营销特点,小程序中有各种各样的营销插件,它们是完全免费的
- 处理客户损失,实体店在开店互动后,可以增加会员模块,重新配置无排队、全国打卡等功能,提高用户黏性,促进用户的重复消费,从而为门店发展一批忠实用户。