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` 优化及扩展、数据操作优化
- 微信请求优化
- 原生小程序和开发框架语法混用支持
代码示例
- 入口脚本
1 /** 2 * @file 小程序入口 3 * @author <author> 4 */ 5 6 'use strict'; 7 8 export default { 9 config: { 10 pages: [ 11 'pages/home/index' 12 ], 13 14 window: { 15 navigationbarbackgroundcolor: '#211e2e', 16 navigationbartextstyle: 'white', 17 backgroundtextstyle: 'light', 18 enablepulldownrefresh: true, 19 backgroundcolor: '#ccc' 20 }, 21 22 networktimeout: { 23 request: 30000 24 } 25 }, 26 27 $promisifyapis: [] 28 };
- 入口样式
1 /** 2 * @file the app entry style 3 * @author <author> 4 */ 5 6 @require './common/css/mixin.styl' 7 @require './common/css/variable.styl' 8 @require './common/css/common.styl'
- 页面
1 <template> 2 <view class="home-wrap"> 3 <hello :from="from" @hello="handlehello"></hello> 4 <view class="click-tip" if="clicked">you click me~</view> 5 </view> 6 </template> 7 <script> 8 import hello from '../../components/hello'; 9 10 export default { 11 config: { 12 title: 'page title' 13 }, 14 15 components: { 16 hello 17 }, 18 19 data: { 20 btntext: 'hello', 21 clicked: false, 22 from: 'homepage' 23 }, 24 25 methods: { 26 27 handlehello(e) { 28 this.clicked = true; 29 this.btntext = 'you clicked'; 30 31 this.$api.showtoast({ 32 title: 'received hello', 33 duration: 3000 34 }); 35 } 36 } 37 }; 38 </script> 39 <style lang="stylus"> 40 @require '../../common/css/variable.styl' 41 @require '../../common/css/mixin.styl' 42 43 .home-wrap 44 padding: 100px 45 height: 100vh 46 box-sizing: border-box 47 background: #ddd 48 49 .click-tip 50 margin-top: 100px 51 padding: 20px 52 text-align: center 53 color: red 54 55 </style>
- 组件
1 <template> 2 <view class="hello-wrap"> 3 <button plain class="hello-btn" @click="handleclick">hello in {{from}}</button> 4 </view> 5 </template> 6 <script> 7 export default { 8 config: { 9 }, 10 11 props: { 12 from: string 13 }, 14 15 components: { 16 }, 17 18 data: { 19 }, 20 21 methods: { 22 handleclick() { 23 this.$emit('hello', {from: this.from}); 24 } 25 } 26 }; 27 </script> 28 <style lang="stylus"> 29 .hello-wrap 30 padding: 20px 31 margin: 20px 0 32 33 .hello-btn 34 width: 846px 35 height: 148px 36 margin: 0 auto 37 line-height: @height 38 background: #fff 39 text-align: center 40 border-radius: 120px 41 border: none 42 </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 上,有问题或者建议,欢迎提 , 发 。
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请 点击进行留言回复,万千网友为您解惑!
网友评论