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。