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
     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。