ecomfe / okam Goto Github PK

View Code? Open in Web Editor NEW

416.0 36.0 65.0 4.71 MB

Mini program development framework

Home Page: https://ecomfe.github.io/okam

License: MIT License

JavaScript 89.29% CSS 0.18% TypeScript 0.09% Smarty 0.11% Vue 9.71% Shell 0.01% Stylus 0.37% Less 0.24%

swan wxapp miniprogram baidu wechat okam weapp alipay quickapp toutiao

okam's Introduction

Okam

奥卡姆，一个面向小程序开发的开发框架，提供类 Vue 的开发体验。

Introduction

平台支持

功能特性

开发模式
- 支持单文件组件化开发方式，目录结构更加清晰简洁
- 支持 NPM 包的依赖管理和引用
- 提供渐进增强可配置方式，包括可配置的构建流程，来提升开发框架能力
开发语法
- 模板：支持类 Vue 模板语法、Pug 模板语法
- 样式：支持 CSS 预处理器和后处理器， Stylus、Less、Sass、Postcss
- 脚本：支持 Typescript、ES Next 语法支持
扩展的能力
- HTML 标签支持
- Vue 数据操作语法，包括 computed、watch 支持
- Vue 双向绑定 v-model 指令支持
- filter 模板语法支持
- Redux / Vuex 数据状态管理
- 模板组件 ref 引用支持
- Mixins 支持
- Promise、Async、await 语法支持
- 原生接口支持可定制的 Promise 化
- 提供原生接口 Hook 能力
- 样式 rpx 单位自动转换
- 接口 Mock
- 图片自动压缩能力
其它
- 框架 API 优化及扩展、数据操作优化
- 微信请求优化
- 原生小程序和开发框架语法混用支持

Usage

Main Packages

Package	Status	Description
okam-build		okam 构建工具
okam-core		okam 核心运行框架
okam-cli		okam 命令行工具

Contribution

具体可以参考文档

Communication

有任何问题或者建议，欢迎提 issue, 发 pr。

技术交流：

QQ 群 728460911，入群备注：okam
百度同学可以加 Hi 群：1637339

License

MIT

okam's People

Contributors

Stargazers

Watchers

okam's Issues

目前还在更新维护吗

我看了下commit，感觉最近没怎么维护了，是项目停了吗？挺可惜的

template 中简写编译有误

问题详情

:class 采用简写编译有误

期望效果

:class="{ isx, blur }"

应编译为

class="{{[isx?'isx':'',blur?'blur':'']}}"

实际情况

class="{{[undefined?'isx':'',undefined?'blur':'']}}"

如何使用 postcss 插件

问题类型

问题详情

如何使用 postcss 插件

    postcss: {
      extnames: ['less'],
      options: {
        plugins: [
          require('autoprefixer')({
            browsers: ['iOS >= 8', 'Android >= 6'],
          }),
        ],
      },
    },

期望效果

正常编译

实际情况

报 TypeError: css.walkAtRules is not a function

内联样式当有逗号时编译错误

问题类型

问题详情

:style="{ transform: 'translate(-50%, -50%) rotate(' + preview.rotate + 'deg)' }"

期望效果

style="transform: {{ 'translate(-50%, -50%) rotate(' + preview.rotate + 'deg)' }}"

实际情况

style="transform:{{'translate(-50%}};-50%) rotate(' + preview.rotate + 'deg)':{{-50%) rotate(' + preview.rotate + 'deg)'}}"

问题环境

okam-build 版本:0.4.19

另外补充一个问题内联样式使用 es6 写法也编译失败
eg: :style="{ width: `${width}px` }" 无法正常编译为 style="width:{{ width }}px"

代码示例和线上项目收集

Okam (源：奥卡姆剃刀，如无必要，勿增实体)，提供 Vue 开发体验，致力于打造一套代码多平台运行的开发框架，目前支持百度小程序、微信小程序、支付宝小程序、快应用。

框架我们在持续不断的开发优化中，希望框架能帮助到做小程序开发的同学，但在开发量较多的情况下，我们没能同时完备的提供多样示例 Demo 供大家做参考学习，所以开个 issue 来收集优秀案例以及线上样例方便大家一起学习~

希望借助社区的力量，强烈希望大家能一起贡献优秀的 Demo 、案例，让 Okam 变得更好！

对于大家的反馈和提交，我们会持续跟进和回复

如果是使用 Okam 开发的开源项目，采纳后我们将在 Okam 官方文档作为官方推荐，可以的话，也可以收录在 awesome-okam 中，供大家更好的查找和学习；
如果是使用 Okam 开发的不开源商用/线上项目，提供二维码效果地址，项目我们也将收集在 Okam 官方文档中；

如果在开发过程中有问题或建议，也可以加 Okam 问题建议反馈群：QQ 群 728460911，入群备注：okam。

computed和watch有冲突

单独使用watch就可以，两个一起使用就有问题

使用redux报错

照着文档来的

VM126989:1 thirdScriptError 
 sdk uncaught third Error 
 process is not defined 
 ReferenceError: process is not defined

   framework: [
        'data',
        'ref',
        'watch',
        'redux'
    ],

export default (state = 0, action) => {
  let {type, value} = action;
  switch (type) {
      case 'INCREMENT':
          return state + value;
      case 'DECREMENT':
          return state - value;
      default:
          return state;
  }
};

import {combineReducers} from 'redux';
import counter from './counter';

export default combineReducers({
    counter
});

import {createStore} from 'redux';
import rootReducer from './reducer';

export default createStore(rootReducer);

app.js里只要引入store import store from './store/store'; 就会报错

是否支持第三方小程序组件库

有时候需要用到第三方的组件库，文档里没有写明是否支持。

[Feature Request] rematch支持

希望可以支持rematch, 现在写rematch可以用，就是直接写一个方法

inc () {
  this.$store.dipatch.count.increment()
}

computed 倒是没问题，actions写法，原生的redux写法用rematch好像不行，我自己简单改了下extend/redux里的这里

   toAction && Object.keys(toAction).forEach(k => {
        let act = toAction[k];
        toAction[k] = function (...args) {
            // this.$store.dispatch(act.apply(null, args));
            this.$store.dispatch({type: act, payload: args});

        };
    });

然后用

    actions: {
          'inc': 'count/increment',
          'dec': 'count/decrement',
          'up': 'count/up',
          'addToCart': 'cart/add',
      }

这种写法倒是可以运行

async 报错 ReferenceError: regeneratorRuntime is not defined

regeneratorRuntime is not defined; [Component] Event Listener Error @ components/Hello#(anonymous)
ReferenceError: regeneratorRuntime is not defined

created () {
        this.getData()
},

methods: {
    async getData () {
         console.log('result')
    }
}

在base.config.js中加入了 polyfill: ['promise', 'async']

环境：

node : v10.05
okam: 0.3.0，
微信小程序

求支持v-前缀的兼容

问题类型

问题详情

求支持v-前缀的兼容，这样可以使开发者灵活的迁移移动端组件，实现小程序和移动web组件公用

期望效果

语法兼容v-前缀

如何实现支持v-html

问题类型

问题详情

期望效果

实际情况

复现步骤和问题示例

问题环境

百度小程序Page.onInit中不支持通过赋值this.xxx修改视图

问题类型

问题详情

百度小程序提供的新的页面级生命周期 Page.onInit ，执行时机介于 App.onLaunch 、Page.onLoad之间，使用okam不支持在Page.onInit函数中通过this.xx赋值的方式修改视图。

期望效果

在Page.onInit中通过赋值this.xx可以修改视图

实际情况

在onInit中给this.xxx赋值不能修改视图

复现步骤和问题示例

略

问题环境

`okam-core` 版本:0.4.11
`okam-build` 版本:0.4.17

引用钉钉扩展组件，绑定的事件的参数并不是event.currentTarget.dataset导致报错

<template>
  <list-item @Click="clickItem" />
  <!-- 这种写法也无效 -->
  <!--<list-item @Click="clickItem(index)"> -->
</template>
<script>
export default {
  methods: {
    clickItem(){}
  }
}
</script>

编译过后使用事件代理：

background-image生产未转成base64的问题

问题类型

如何实现某功能

报 BUG

某功能改进建议

新功能建议

文档问题

其他/以上都不是

问题详情

在dev开发环境中background-image会转成base64，但是prod时，没有转换，导致文件不能访问

期望效果

background-image:url('base64:')同时把源文件删除

实际情况

还是相对路径url("../")

问题示例和复现步骤

background-image: url("../common/back.png");

问题环境

okam-core 版本:0.3.3
okam-build 版本:0.3.2

运行环境
微信小程序开发工具

误报，可以忽视，sorry

index.js:1 thirdScriptError
Cannot read property 'forEach' of undefined;at api getSetting success callback function
TypeError: Cannot read property 'forEach' of undefined
百度智能小程序出错，微信小程序没有问题

问题类型

问题详情

期望效果

实际情况

复现步骤和问题示例

问题环境

app.json未找到

问题类型

问题详情

期望效果

实际情况

复现步骤和问题示例

问题环境

升级之后运行不了项目了

问题类型

问题详情

okam upgrade project
之后运行不了项目

期望效果

实际情况

问题示例和复现步骤

问题环境

okam 相关包版本
okam-core 版本:0.4.0-beta.0
okam-build 版本:0.4.0-beta.0
okam-cli 版本(若是 cli 问题):0.1.0-beta.0

运行环境
微信小程序开发工具 or 真机

[ERROR] src/common/img/loading.gif skipped

图片14k 不支持 gif 图片吗？

问题类型

问题详情

期望效果

实际情况

复现步骤和问题示例

问题环境

okam框架中如何使用百度小程序的动态库？

问题类型

问题详情

okam框架中如何使用百度小程序的动态库？
https://smartprogram.baidu.com/docs/develop/framework/dynamiclib_use/

使用 “dynamicLib://myDynamicLib/special-list” 这种路径的形式无法正确引入动态库文件

期望效果

说明如何使用百度小程序的动态库文件

实际情况

复现步骤和问题示例

问题环境

App 脚本 app.js 配置时文档里面这样配置编译不通过，把globalData放到config 里面就不报错

config: {
pages: [
'pages/home/index'
]
},

globalData: {}, // 全局应用数据定义，同原生小程序

问题类型

问题详情

期望效果

实际情况

复现步骤和问题示例

问题环境

why would it called Okam?

百度小程序无法找到 regeneratorRuntime 问题

问题类型

问题详情

百度小程序近期上线了非兼容性改动，这将导致无法在小程序中获取全局变量（如通过 window/root/global/Function('return this')() 等），
使得无法将一些属性挂载在全局变量，从而导致小程序运行异常。

典型的例子：使用了 async，编译后的代码运行会往全局变量挂载 regeneratorRuntime 属性。

对于 Okam 的影响：如果使用了 polyfill: ['async']（目前的 swan.config.js 默认配置），
请在 swan.config.js 中将 polyfill 改为 localPolyfill，并重新编译上传包

期望效果

实际情况

复现步骤和问题示例

代码中包含了 async，并且使用了 polyfill: ['async']

问题环境

okam-cli 0.1.11
百度小程序环境：可参考公告内容

vuex下通过mutation或action更新数据后，视图不更新

问题详情

启用vuex管理状态，其中，store启用了modules功能。通过mutation更改state的值后，界面没有发生变化，console打印state相关值已经是更新过后的了。通过手动调用this.$fireStoreChange()才能触发视图的更新。
okam是用的最新版。

okam css 后处理postcss支持其他postcss插件吗？比如雪碧图postcss-sprites，装了下插件依赖运行报错，若支持怎么配置？

问题类型

问题详情

期望效果

实际情况

复现步骤和问题示例

问题环境

支持app吗？

问题类型

问题详情

期望效果

实际情况

复现步骤和问题示例

问题环境

支持h5吗？

组件中引用组件时wxss有时不生成

问题类型

问题详情

index页面引用Hello

hello中引入其他组件

其他组件

期望效果

实际情况

问题示例和复现步骤

问题环境

okam 相关包版本

`okam-core` 版本:0.3.3
`okam-build` 版本:0.3.2
`okam-cli` 版本(若是 cli 问题):

微信小程序开发工具；真机

TypeError: this.$watch is not a function

按文档这写的，https://ecomfe.github.io/okam/#/component/setData?id=%E7%9B%91%E5%90%AC%E5%99%A8

compute不重新计算

   props: {
      pData: Object
    },
    components: {},
    data: {},
    computed: {
      myData() {
        let data = this.pData || {}
        console.log(this.pData)
        return data
      }
    }

props中的值变了，但是计算属性没有变

was signed into my sons account

https://github.com/unicode-org/cldr/blob/main/docs/requesting_changes.md

模板中for循环可以正常使用，v-for不行

okam 0.1.5
okam-build 0.4.8
okam-core 0.4.6
v-for无效，for可以用
复现方法：
okam init建立项目，在home/index.vue中加入

<div v-for="item in 5">{{item}}</div>

配置项是正则表达式时merge函数会产生错误结果

版本：[email protected]
https://github.com/ecomfe/okam/blob/master/packages/okam-build/lib/build/init-build-options.js#L101
配置项entry.script为正则表达式时，merge的结果entry.script是一个空对象
复现方法：
在配置中增加entry.script

module.exports = merge({}, require('./base.config'), {
    entry: {
        script: /^src\/okam\/app\.(js|es|es6|ts)$/
    },
    polyfill: ['async'],
    rules: []
});

打了点日志：

    console.log('>>>userConfig before merge<<<\n', userConfig);
    console.log('>>>buildConf before merge<<<\n', buildConf);
    buildConf = merge({}, buildConf, userConfig, {appType});
    console.log('>>>buildConf after merge<<<\n', buildConf);

日志内容如下：

>>>userConfig before merge<<<
 { verbose: false,
  root: '/Users/liyinan/code/edu-core-fe',
  output: { dir: 'dist', depDir: 'src/common' },
  component: { extname: 'vue', template: { transformTags: {} } },
  framework: [ 'data', 'watch', 'broadcast', 'ref', 'redux' ],
  processors: 
   { babel7: { extnames: [Array] },
     postcss: { extnames: [Array], options: [Object] } },
  server: { port: 9090, type: 'connect', middlewares: [] },
  prod: { rules: [ [Object] ] },
  dev: { rules: [ [Object], [Object] ] },
  test: { rules: [ [Object] ] },
  entry: { script: /^src\/okam\/app\.(js|es|es6|ts)$/ },
  polyfill: [ 'async' ],
  rules: [],
  configPath: undefined }
>>>buildConf before merge<<<
 { verbose: false,
  root: '/Users/liyinan/code/edu-core-fe',
  designWidth: 750,
  framework: null,
  api: null,
  polyfill: null,
  localPolyfill: null,
  resolve: null,
  script: null,
  source: { dir: 'src', exclude: [], include: [ /^project\.\w+$/ ] },
  entry: 
   { script: /^src\/app\.(js|es|es6|ts)$/,
     style: /^src\/app\.(css|styl|less|sass|scss)$/,
     projectConfig: /^project\.\w+$/ },
  output: 
   { dir: 'dist',
     depDir: 'src/dep',
     file: [Function: file],
     appBaseClass: { app: 'App', component: 'Component', page: 'Page' },
     pathMap: 
      { projectConfig: 'project.swan.json',
        entryScript: 'app.js',
        entryStyle: 'app.css',
        appConfig: 'app.json' },
     componentPartExtname: { script: 'js', style: 'css', tpl: 'swan', config: 'json' } },
  component: 
   { global: null,
     extname: 'okm',
     template: { transformTags: null } },
  wx2swan: false,
  native: true,
  processors: 
   { cssImport: 
      { processor: 'postcss',
        extnames: [Array],
        rext: 'css',
        options: [Object] } },
  rules: 
   [ { match: [Function: match], processors: [Array] },
     { match: [Function: match], processors: [Array] },
     { match: [Function: match], processors: [Array] } ],
  watch: false,
  server: null,
  dev: {} }
>>>buildConf after merge<<<
 { verbose: false,
  root: '/Users/liyinan/code/edu-core-fe',
  designWidth: 750,
  framework: [ 'data', 'watch', 'broadcast', 'ref', 'redux' ],
  api: null,
  polyfill: [ 'async' ],
  localPolyfill: null,
  resolve: null,
  script: null,
  source: { dir: 'src', exclude: [], include: [ /^project\.\w+$/ ] },
  entry: 
   { script: {},
     style: /^src\/app\.(css|styl|less|sass|scss)$/,
     projectConfig: /^project\.\w+$/ },
  output: 
   { dir: 'dist',
     depDir: 'src/common',
     file: [Function: file],
     appBaseClass: { app: 'App', component: 'Component', page: 'Page' },
     pathMap: 
      { projectConfig: 'project.swan.json',
        entryScript: 'app.js',
        entryStyle: 'app.css',
        appConfig: 'app.json' },
     componentPartExtname: { script: 'js', style: 'css', tpl: 'swan', config: 'json' } },
  component: { global: null, extname: 'vue', template: { transformTags: {} } },
  wx2swan: false,
  native: true,
  processors: 
   { cssImport: 
      { processor: 'postcss',
        extnames: [Array],
        rext: 'css',
        options: [Object] },
     babel7: { extnames: [Array] },
     postcss: { extnames: [Array], options: [Object] } },
  rules: 
   [ { match: [Function: match], processors: [Array] },
     { match: [Function: match], processors: [Array] },
     { match: [Function: match], processors: [Array] } ],
  watch: false,
  server: { port: 9090, type: 'connect', middlewares: [] },
  dev: { rules: [ [Object], [Object] ] },
  prod: { rules: [ [Object] ] },
  test: { rules: [ [Object] ] },
  configPath: undefined,
  appType: 'swan' }
okam [INFO] build start...
okam [INFO] build app type: swan
okam [INFO] load process files from edu-core-fe
okam [INFO] load process files done, file count: 44, load time: 9.98 ms
okam [INFO] build for dev env
okam [INFO] process project.json5 4.45 ms
okam [INFO] src/wise/assets/img/apple-touch-icon.png has already been compressed
okam [INFO] process src/wise/assets/img/apple-touch-icon.png 148 ms
okam [INFO] src/okam/common/img/okm.png has already been compressed
okam [INFO] process src/okam/common/img/okm.png 617 μs
okam [INFO] process files done: 154 ms
okam [INFO] output files to dist done: 19 ms
okam [INFO] build done: 183 ms
okam [INFO] Watch file change start...

ios下的input，@focus很慢，多个input 进行切换，状态不对

问题类型

问题详情

ios手百input 聚焦很慢很慢，但失焦快。造成多个input聚焦、失焦有功能问题

期望效果

实际情况

复现步骤和问题示例

问题环境

`okam-core` 版本:  "okam-core": "^0.4.15",
`okam-build` 版本: "okam-build": "^0.4.24"

 ios手百 全部版本

ecomfe / okam Goto Github PK

okam's Introduction

Okam

Introduction

平台支持

功能特性

Usage

Main Packages

Contribution

Communication

License

okam's People

Contributors

Stargazers

Watchers

Forkers

okam's Issues

问题详情

期望效果

实际情况

问题类型

问题详情

期望效果

实际情况

问题类型

问题详情

期望效果

实际情况

问题环境

问题类型

问题详情

期望效果

问题类型

问题详情

期望效果

实际情况

复现步骤 和 问题示例

问题环境

问题类型

问题详情

期望效果

实际情况

复现步骤 和 问题示例

问题环境

问题类型

问题详情

期望效果

实际情况

问题示例 和 复现步骤

问题环境

问题类型

问题详情

期望效果

实际情况

复现步骤 和 问题示例

问题环境

问题类型

问题详情

期望效果

实际情况

复现步骤 和 问题示例

问题环境

问题类型

问题详情

期望效果

实际情况

问题示例 和 复现步骤

问题环境

问题类型

问题详情

期望效果

实际情况

复现步骤 和 问题示例

问题环境

问题类型

问题详情

期望效果

实际情况

复现步骤 和 问题示例

问题环境

复现步骤和问题示例

复现步骤和问题示例

问题示例和复现步骤

复现步骤和问题示例

复现步骤和问题示例

问题示例和复现步骤

复现步骤和问题示例

复现步骤和问题示例

复现步骤和问题示例

复现步骤和问题示例

复现步骤和问题示例

复现步骤和问题示例

问题示例和复现步骤

复现步骤和问题示例