ecomfe / okam Goto Github PK
View Code? Open in Web Editor NEWMini program development framework
Home Page: https://ecomfe.github.io/okam
License: MIT License
Mini program development framework
Home Page: https://ecomfe.github.io/okam
License: MIT License
index.js:1 thirdScriptError
Cannot read property 'forEach' of undefined;at api getSetting success callback function
TypeError: Cannot read property 'forEach' of undefined
百度智能小程序出错,微信小程序没有问题
Okam (源:奥卡姆剃刀,如无必要,勿增实体),提供 Vue 开发体验,致力于打造一套代码多平台运行的开发框架,目前支持百度小程序、微信小程序、支付宝小程序、快应用。
框架我们在持续不断的开发优化中,希望框架能帮助到做小程序开发的同学,但在开发量较多的情况下,我们没能同时完备的提供多样示例 Demo 供大家做参考学习,所以开个 issue 来收集优秀案例以及线上样例方便大家一起学习~
希望借助社区的力量,强烈希望大家能一起贡献优秀的 Demo 、案例,让 Okam 变得更好!
对于大家的反馈和提交,我们会持续跟进和回复
如果在开发过程中有问题或建议,也可以加 Okam 问题建议反馈群:QQ 群 728460911,入群备注:okam。
支持h5吗?
百度小程序提供的新的页面级生命周期 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
版本:[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...
okam框架中如何使用百度小程序的动态库?
https://smartprogram.baidu.com/docs/develop/framework/dynamiclib_use/
使用 “dynamicLib://myDynamicLib/special-list” 这种路径的形式 无法正确引入动态库文件
说明如何使用百度小程序的动态库文件
百度小程序近期上线了非兼容性改动,这将导致无法在小程序中获取全局变量(如通过 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求支持v-前缀的兼容,这样可以使开发者灵活的迁移移动端组件,实现小程序和移动web组件公用
语法兼容v-前缀
照着文档来的
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';
就会报错
图片14k 不支持 gif 图片吗?
启用vuex管理状态,其中,store启用了modules功能。通过mutation更改state的值后,界面没有发生变化,console打印state相关值已经是更新过后的了。通过手动调用this.$fireStoreChange()才能触发视图的更新。
okam是用的最新版。
希望可以支持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',
}
这种写法倒是可以运行
问题类型
- 如何实现某功能
- 报 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运行环境
微信小程序开发工具
如何使用 postcss 插件
postcss: {
extnames: ['less'],
options: {
plugins: [
require('autoprefixer')({
browsers: ['iOS >= 8', 'Android >= 6'],
}),
],
},
},
正常编译
报 TypeError: css.walkAtRules is not a function
props: {
pData: Object
},
components: {},
data: {},
computed: {
myData() {
let data = this.pData || {}
console.log(this.pData)
return data
}
}
props中的值变了,但是计算属性没有变
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,
微信小程序
有时候需要用到第三方的组件库,文档里没有写明是否支持。
config: {
pages: [
'pages/home/index'
]
},
globalData: {}, // 全局应用数据定义,同原生小程序
:class
采用简写编译有误
:class="{ isx, blur }"
应编译为
class="{{[isx?'isx':'',blur?'blur':'']}}"
class="{{[undefined?'isx':'',undefined?'blur':'']}}"
ios手百input 聚焦很慢很慢,但失焦快。造成多个input聚焦、失焦有功能问题
`okam-core` 版本: "okam-core": "^0.4.15",
`okam-build` 版本: "okam-build": "^0.4.24"
ios手百 全部版本
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>
: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"
单独使用watch就可以,两个一起使用就有问题
我看了下commit,感觉最近没怎么维护了,是项目停了吗?挺可惜的
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.