Okam(奥卡姆)：小程序开发框架

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` 优化及扩展、数据操作优化
• 微信请求优化
• 原生小程序和开发框架语法混用支持

代码示例

• 入口脚本

 /**

 * @file 小程序入口

 * @author <author>

 */

 'use strict';

 export default {

     config: {

         pages: [

             'pages/home/index'

         ],

         window: {

             navigationBarBackgroundColor: '#211E2E',

             navigationBarTextStyle: 'white',

             backgroundTextStyle: 'light',

             enablePullDownRefresh: true,

             backgroundColor: '#ccc'

         },

         networkTimeout: {

             request: 30000

         }

     },

     $promisifyApis: []

 };

• 入口样式

 /**

 * @file The app entry style

 * @author <author>

 */

 @require './common/css/mixin.styl'

 @require './common/css/variable.styl'

 @require './common/css/common.styl'

• 页面

 <template>

 <view class="home-wrap">

     <hello :from="from" @hello="handleHello"></hello>

     <view class="click-tip" if="clicked">You click me~</view>

 </view>

 </template>

 <script>

 import Hello from '../../components/Hello';

 export default {

     config: {

         title: 'Page Title'

     },

     components: {

         Hello

     },

     data: {

         btnText: 'Hello',

         clicked: false,

         from: 'HomePage'

     },

     methods: {

         handleHello(e) {

             this.clicked = true;

             this.btnText = 'You clicked';

             this.$api.showToast({

                 title: 'Received Hello',

                 duration: 3000

             });

         }

     }

 };

 </script>

 <style lang="stylus">

 @require '../../common/css/variable.styl'

 @require '../../common/css/mixin.styl'

 .home-wrap

     padding: 100px

     height: 100vh

     box-sizing: border-box

     background: #ddd

 .click-tip

     margin-top: 100px

     padding: 20px

     text-align: center

     color: red

 </style>

• 组件

 <template>

 <view class="hello-wrap">

 <button plain class="hello-btn" @click="handleClick">Hello in {{from}}</button>

 </view>

 </template>

 <script>

 export default {

     config: {

     },

     props: {

         from: String

     },

     components: {

     },

     data: {

     },

     methods: {

         handleClick() {

             this.$emit('hello', {from: this.from});

         }

     }

 };

 </script>

 <style lang="stylus">

 .hello-wrap

     padding: 20px

     margin: 20px 0

 .hello-btn

     width: 846px

     height: 148px

     margin: 0 auto

     line-height: @height

     background: #fff

     text-align: center

     border-radius: 120px

     border: none

 </style>

完整示例详见

操作步骤：

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

技术学习：项目代码开源在 Github 上，有问题或者建议，欢迎提 issue, 发 pr。