258资源分享网

一、小程序的价值观

张小龙是以小程序的价值观为出发点解释产品开发的思路的，他认为应用号的形态大致为：“一种新的公众号形态，这种形态下面用户关注了一个公众号，就像安装了一个 APP 一样。他要找这个公众号的时候就像找一个 APP，在平时这个号不会向用户发东西的，所以 APP 就会很安静的存在那里，等用户需要的时候找到它就好了，这样的话我们可以尝试做到让更多的 APP 有一种更轻量的形态，但是又更好使用的一种形态来存在，这是我们在探讨的一种新的公众号形态，叫应用号。”

开发者应该从应用号的价值观出发去思考产品的可能性。比如商城就太复杂而且不符合“用完即走”的价值观，而比较成功的案例有摩拜单车、冷气机的应用、微信支付等一些轻量级的应用。通过在微信里设计一个界面（页面）或添加一个按钮就可以去满足用户需求。

二、MINA 框架概述

小程序融合了很多前端开发界的概念，但是并没有采用任何一个框架，包括流行的REACT、VUE，还有CORDOVA。它不是三者中的任意一个，而是拼凑出一个新的框架。这个过程类似于：

三、现代化前端技巧

小程序引入了一些很重要的现代化前端开发的概念，包括：

Virtual DOM：开发者写 iOS 和原生的 h5 应用的时候，很多时候是手动地去操作 UI，用户按按钮之后改变页面。当应用很复杂的时候在改变的过程可能就会产生错误，Virtual DOM 每次要去改变一个界面的时候，重新把界面做一次再进行修改，避免出错。

MVVM：分离逻辑和数据。

组件化：功能、风格模块化，每个风格封装在组件里就不会泄露。

四、MINA 是不是 HTML 5

微信小程序一出来，大家都在猜测是基于什么技术，是 H5 还是原生。它的框架看起来既像 H5，又像原生。小程序写的是 H5 代码，但是它又不遵从 H5 的标准写法。它很多方面借用了 Web 技术，但很多细节又不一样。

1.MINA 是 HTML 5

支持大多数 CSS 属性：最新的Flexbox布局、传统的文件流布局、百分比单位、CSS 动画、Transform

几乎所有的组件都是 HTML5 实现

可以选择ES6自动转成ES5

2.MINA 不是HTML5

非标准标签（组件）：我们知道写浏览器用的都是标准的主键，但是在 MINA 里面，小程序自成一个体系，虽然后台还是一样用浏览器的主键去实现的，但是在前面写 HTML 的时候加上它自己的一套标准。

非标准CSS：rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.

非标准事件系统：当按下一个按钮的时候分配一个事件，这个事件也是非标准的，但是跟非标准很像。包括冒泡阶段和捕捉阶段。

非标准 JS API：支持微信的接口，但是没有任何标准 JS接口。

不能操作 document 或者 DOM：虽然是在浏览器里面运行，但是不能操作浏览器本身，不能操作原生文件本身，只能用Virtual DOM 去改变页面。

有些组件有奇怪的默认高宽(scroller,image)：通常在 Web 浏览器里面，主键是按图片内容的高度，基本上所有组件默认高宽都是0，小程序的image是按照background-image来实现的，所以所有图像会得到一个初始宽高320 240，而且无法通过auto重置，只可以通过具体的值来重写。

Require：因为小程序自成一个体系，JS 的包、CSS 框架都不能用，全部都要重新开始。

1M打包上线：能够更快地下载。

五、完整的小程序应用演示

前端开发者可以快速开发小程序，因为概念基本相同，如风格、Javascript 是一样的。但具体接口不同，不能直接套用，一些事件的处理小程序有自己的标准。比如点击一个按钮，代码需要去审核、发布请求等。

微信小程序整体是基于MINA框架，官方提供了很多已经封装好的组件和API 供开发者调用，不仅包括一些常用的滚动视图，按钮，图片组件，还提供了地图（map）和画布（canvas）组件，这让未来小程序内嵌一些小游戏以及简单的地图应用成为可能。

MINA 组件

基本：view,text

表单：button,input,radio,slider

媒体：image,video,audio,canvas

模态：action-sheet,modal,toast,loading

容器：swiper,scroller

导航：navigator,tabbar