Okam(奥卡姆)：小程序开发框架，支持百度小程序、微信小程序、支付宝小程序
Okam 是什么
`Okam` 一个面向小程序开发的开发框架，开发体验类 `Vue`。详情
Okam 对各小程序的支持情况
- 支持 百度小程序
- 支持 微信小程序
- 支持 支付宝小程序
Okam 提供了什么
- 开发模式
- 支持单文件组件化开发方式，目录结构更加清晰简洁
- 支持 NPM 包的依赖管理和引用
- 提供渐进增强可配置方式，包括可配置的构建流程，来提升开发框架能力
- 开发语法
- 模板：支持类 `Vue` 模板语法、`Pug` 模板语法
- 样式：支持 CSS 预处理器和后处理器， `Stylus`、`Less`、`Sass`、`Postcss`
- 脚本：支持 `Typescript`、`ES Next` 语法支持
-
扩展的能力
- `HTML` 标签支持
- Vue` 数据操作语法，包括 `computed`、`watch` 支持
- `Redux` 数据状态管理
- 模板组件 `ref` 引用支持
- `Mixins` 支持
- `Promise`、`Async`、`await` 语法支持
- 原生接口支持可定制的 `Promise` 化
- 提供原生接口 `Hook` 能力
- 样式 `rpx` 单位自动转换
- 接口 `Mock`
- 图片自动压缩能力
- 其它
- 框架 `API` 优化及扩展、数据操作优化
- 微信请求优化
- 原生小程序和开发框架语法混用支持
代码示例
- 入口脚本
1 /** 2 * @file 小程序入口 3 * @author <author> 4 */ 5 6 ‘use strict‘; 7 8 export default { 9 config: { 10 pages: [ 11 ‘pages/home/index‘ 12 ], 13 14 window: { 15 navigationBarBackgroundColor: ‘#211E2E‘, 16 navigationBarTextStyle: ‘white‘, 17 backgroundTextStyle: ‘light‘, 18 enablePullDownRefresh: true, 19 backgroundColor: ‘#ccc‘ 20 }, 21 22 networkTimeout: { 23 request: 30000 24 } 25 }, 26 27 $promisifyApis: [] 28 };
- 入口样式
1 /** 2 * @file The app entry style 3 * @author <author> 4 */ 5 6 @require ‘./common/css/mixin.styl‘ 7 @require ‘./common/css/variable.styl‘ 8 @require ‘./common/css/common.styl‘
- 页面
1 <template> 2 <view class="home-wrap"> 3 <hello :from="from" @hello="handleHello"></hello> 4 <view class="click-tip" if="clicked">You click me~</view> 5 </view> 6 </template> 7 <script> 8 import Hello from ‘../../components/Hello‘; 9 10 export default { 11 config: { 12 title: ‘Page Title‘ 13 }, 14 15 components: { 16 Hello 17 }, 18 19 data: { 20 btnText: ‘Hello‘, 21 clicked: false, 22 from: ‘HomePage‘ 23 }, 24 25 methods: { 26 27 handleHello(e) { 28 this.clicked = true; 29 this.btnText = ‘You clicked‘; 30 31 this.$api.showToast({ 32 title: ‘Received Hello‘, 33 duration: 3000 34 }); 35 } 36 } 37 }; 38 </script> 39 <style lang="stylus"> 40 @require ‘../../common/css/variable.styl‘ 41 @require ‘../../common/css/mixin.styl‘ 42 43 .home-wrap 44 padding: 100px 45 height: 100vh 46 box-sizing: border-box 47 background: #ddd 48 49 .click-tip 50 margin-top: 100px 51 padding: 20px 52 text-align: center 53 color: red 54 55 </style>
- 组件
1 <template> 2 <view class="hello-wrap"> 3 <button plain class="hello-btn" @click="handleClick">Hello in {{from}}</button> 4 </view> 5 </template> 6 <script> 7 export default { 8 config: { 9 }, 10 11 props: { 12 from: String 13 }, 14 15 components: { 16 }, 17 18 data: { 19 }, 20 21 methods: { 22 handleClick() { 23 this.$emit(‘hello‘, {from: this.from}); 24 } 25 } 26 }; 27 </script> 28 <style lang="stylus"> 29 .hello-wrap 30 padding: 20px 31 margin: 20px 0 32 33 .hello-btn 34 width: 846px 35 height: 148px 36 margin: 0 auto 37 line-height: @height 38 background: #fff 39 text-align: center 40 border-radius: 120px 41 border: none 42 </style>
完整示例详见： https://github.com/ecomfe/okam-template
操作步骤：
git clone https://github.com/ecomfe/okam-template.git cd okam-template npm i npm run dev // 百度小程序开发模式 npm run dev:wx // 微信小程序开发模式 开发工具 打开 构建产物目录 `dist、wx_dist`
更多详细信息
技术交流
技术交流：QQ 群：`728460911`，入群备注：okam