微信小程序(Mini Program)技术栈与框架简介

关键字：微信小程序、Mini Program、技术栈、框架、WePy、MPVue

原生技术栈

---

原生小程序开发目录示例

原生小程序开发目录示例

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

WXML示例

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

WXSS示例

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

WXS示例

<!--wxml-->
<wxs module="m1">
var msg = "hello world";

module.exports.message = msg;
</wxs>

<view> {{m1.message}} </view>

JS示例

//logs.js
const util = require('../../utils/util.js')

Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log => {
        return util.formatTime(new Date(log))
      })
    })
  }
})

JSON示例

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ff0",
    "navigationBarTitleText": "我的第一个测试小程序DEMO",
    "navigationBarTextStyle":"black"
  }
}

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

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

开源框架

---

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

原生技术栈与框架的比较

---

小程序原生技术栈与框架WePY、MPVue之间的比较，参考简书博客

原生技术栈与框架的比较

参考

1. 某简书博客
2. 微信官方文档