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` 優化及擴展、數據操作優化
- 微信請求優化
- 原生小程式和開發框架語法混用支持
代碼示例
- 入口腳本
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 };View Code
- 入口樣式
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'View Code
- 頁面
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>View Code
- 組件
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>View Code
操作步驟:
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。