12.22 小程序的开发模式

一个页面一个文件夹

小程序每一个页面都由一个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即做即发布要麻烦些

从设计者的角度理解小程序的运行机制

1. 如何获取数据

• 通过 HTTPS 请求去服务端获取数据，，小程序对 HTTPS 有限制，除了要求通信协议是 HTTPS，出现的域名必须提前预设之外，还将应用层协议限定到了 JSON 格式下

• 小程序提供了丰富的 API 供开发者在手机系统上存取文件。可用本地文件来做缓存、状态记忆等

2. 界面如何呈现

• 在小程序中，和 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 的那层胶水黏合，使得很多功能的开发变得极其呆板和繁复。

3. 如何交互

通过触发事件，然后通过绑定的数据触发更新来实现交互

举个实际的例子，假设开发者需要做一个滑动切换页面的效果，在小程序中该如何实现？首先，是将变量数据引入渲染页面：

<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. 基于现成的模板进行编辑

• 优点：简单快捷，如果图片素材等提前准备到位了，通过模板编辑配置的模式开发微信小程序，一般1、2个小时就能搞定！

• 缺点：很难找到完全符合用户需求的模板

2. 模板 + 拖拽

这种模式下，工具平台方会提供一些比较典型的行业、场景模板，同时还会提供比较丰富的相关功能模块，这些功能模块可以自由“装卸”到模板上去。模板比较全面地体现了相关类别小程序的整体框架，用户基于该模板框架，结合自身的具体需求，通过拖拽方式对各种各样的模块进行自由组合，从而实现各种各样的个性化需求。

• **优点：**比较简单快捷，对制作者几乎没有技术背景的要求，同时还有比较大的个性化拓展可能性

• 缺点：难以实现真正的定制，而且后期难以修改

3. 组件化的快速开发

主要特征是将各种比较通用的代码模块封装成一个个组件，未来开发中不用重复编写这些模块的代码，而是直接拖用组件。

• 优点：因为是在代码层面进行开发，对小程序的功能实现有最大的掌控度。因为进入了代码层面，所以对于一些特殊需求的复杂小程序，就能根据需要随时全面开展性能优化了。此外，由于组件化，开发速度也还比较高
• 缺点: 难度较大，需要有的一定的编码基础。开发周期相对较长

小程序能解决的问题

1. 解决低曝光问题，由于小程序中有“就近小程序功能”，该功能可以让实体店在5公里范围内直接向微信用户展示，微信的人气非常高，实体店可以经常使用小程序来提高曝光率。
2. 解决高昂广告费的问题，由于小程序的营销特点，小程序中有各种各样的营销插件，它们是完全免费的
3. 处理客户损失，实体店在开店互动后，可以增加会员模块，重新配置无排队、全国打卡等功能，提高用户黏性，促进用户的重复消费，从而为门店发展一批忠实用户。