小程序技术栈

原生技术栈

原生小程序开发目录示例

image.png

• WXML。微信标记语言，用于展示UI模板，类似HTML，文件后缀名为“.wxml”。
• WXSS。WeiXin Style Sheets，用于规定UI样式，具有 CSS 大部分特性。在CSS基础上扩展了尺寸单位和样* 式导入。文件后缀名为“.wxss”
• WXS。WeiXin Script。封装后的JS，一般内嵌于WXML页面，很方便构建页面，标签为”<wxs></wxs>"。
• JS。普通的JavaScript，常用于控制整个页面的逻辑。后缀名为“.js”
• JSON。用于项目全局配置或单页面配置，后缀名为“.json”。
  MVVM。类似Vue.js风格。

整体小程序开发类似Web App开发，尤其是使用了Vue或React框架的Web App开发。

• 熟悉Web APP技术的开发者很容易上手小程序的开发。
• 由于小程序封装了MVVM框架、网络请求等非常实用的API、打包等操作，所以相对于普通的Web APP上手以及开发更加简单。尤其在与微信的交互方面，小程序开发非常方便。

开源框架

• WePY。微信组件化框架，类Vue.js风格，让Web App的开发者更容易开发小程序。类Vue.js风格；支持引入NPM包、组件化开发、ES2015+特性、Promise、多种编译器(Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug)等。GitHub Start 14864。
• mpvue。使用 Vue.js 开发小程序的前端框架，美团点评团队出品。在最理想的状态是，可以一套代码可以直接跑在多端：WEB、小程序（微信和支付宝）、Native（借助weex）。使用该框架，Vue开发者几乎可以无缝开发小程序。GitHub Start 14041
• weui-wxss。微信UI框架，包含一些常用的组件如button、cell、dialog、 progress等。GitHub Start 7473
• wafer。小程序开发全栈资源套件，企业级微信小程序全栈方案。GitHub Start 1910

原生技术栈与框架的比较

小程序原生技术栈与框架WePY、MPVue之间的比较

image.png

最近几次小程序开发均基于mpvue框架进行开发，优点是mpvue是从整个Vue的核心代码上经过二次开发而形成的一个框架，相当于是给Vue本身赋能，增加了开发微信小程序的能力。相比较原生技术栈，mpvue提供了更为高效的开发效率以及熟悉的开发流程，因为一直都在使用VUE框架开发已经很久了。

使用mpvue开发小程序，你将在小程序技术体系的基础上获取到这样一些能力：

• 彻底的组件化开发能力：提高代码复用率
• 完整的 Vue.js 开发体验
• 方便的 Vuex 数据管理方案：方便构建复杂应用
• 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload
• 支持使用 npm 外部依赖
• 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
• H5 代码转换编译成小程序目标代码的能力

附上mpvue官方文档链接 http://mpvue.com/mpvue/