关键字：微信小程序、Mini Program、技术栈、框架、WePy、MPVue
原生技术栈
原生小程序开发目录示例
原生小程序开发目录示例
- 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风格。
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开发。
- 熟悉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 1,2531。
- mpvue。使用 Vue.js 开发小程序的前端框架，美团点评团队出品。在最理想的状态是，可以一套代码可以直接跑在多端：WEB、小程序（微信和支付宝）、Native（借助weex）。使用该框架，Vue开发者几乎可以无缝开发小程序。GitHub Start 1,1674。
- weui-wxss。微信UI框架，包含一些常用的组件如button、cell、dialog、 progress等。GitHub Start 6207。
- wafer。小程序开发全栈资源套件，企业级微信小程序全栈方案。GitHub Start 1765。
原生技术栈与框架的比较
小程序原生技术栈与框架WePY、MPVue之间的比较，参考简书博客
原生技术栈与框架的比较
