小程序開發

上海小程序開發 > 開發教程 > 【第1467期】使用 okam 小程序開發框架快速開發百度智能小程序

【第1467期】使用 okam 小程序開發框架快速開發百度智能小程序

編輯時間:03-09 09:27 瀏覽次數:103

【第1467期】使用 okam 小程序開發框架快速開發百度智能小程序

,之前據說要12月份開源,不知道開了嗎?今日早讀文章由百度[email protected]投稿分享。

進入正文閱讀前,聽聽來自@大凡凡要加油了對前端五年來的感悟:

正文從這開始~~


Okam 簡介

奧卡姆,一個面向小程序開發的開發框架,開發體驗類 Vue, 目前已支持所有主流小程序平臺的開發,包括百度小程序、微信小程序、支付寶小程序

  • 開發模式

    • 支持單文件組件化開發方式,目錄結構更加清晰簡潔

    • 支持 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 優化及擴展、數據操作優化

    • 微信請求優化

    • 原生小程序和開發框架語法混用支持

    • cli 快速構建


本篇文章,主要著重介紹基于 okam 框架進行百度小程序的開發。如果你對 Vue 比較熟悉或者之前使用過 wepy、mpvue 小程序開發框架,對于上手 okam 應該是一件很容易的事情,不需要太多額外學習成本,更多關于該框架的使用可以參考官方文檔。

使用 okam 快速開發百度智能小程序

準備工作
  • Node 安裝(要求 Node >=8 && NPM >= 3),具體安裝可以到官網下載

  • CLI 工具安裝: npm install okam-cli -g

  • 安裝成功后,可以命令行輸入 okam 回車,如果有看到相應的命令使用信息,說明已經安裝成功

創建項目

安裝成功后,可以通過命令行方式,快速初始化百度小程序項目:

okam init my-okam-project
cd
my-okam-project
npm install

運行調試
  • 百度小程序運行命令

    • npm run dev: 帶 watch 開發模式

    • npm run dev:clean: 刪掉構建產物(不包括項目配置文件)并重新構建且帶 watch 開發模式

    • npm run dev:server: 帶 watch && 開發 Server 開發模式

    • npm run build: 刪掉構建重新構建(沒有 watch && 開發 Server)

    • npm run prod: 生產環境構建

  • 下載開發者工具,打開開發工具,打開項目構建目錄:開發工具 -> 打開 -> 項目Root/dist

  • 等待開發工具編譯,就可以看到預覽效果

目錄結構

項目初始化后,會生成如下項目結構,建議項目開發過程中按如下方式進行代碼的組織。

.
├── README.md             // 項目說明文件
├── ci.yml                // 項目 CI 配置
├── package.json          // 項目包配置信息
├── doc                   // 放置項目源圖片或者其它文檔目錄
├── dist                  // 百度小程序 構建產物,開發工具得選擇該構建產物目錄作為項目根目錄方能預覽
├── .tinyimgcache         // 自動生成,圖片壓縮的緩存信息,不可刪掉,否則會導致圖片重復壓縮
├── project.json5         // 小程序項目配置文件,除了語法使用 JS 對象形式,配置說明參考官方小程序說明
├── scripts               // 構建相關腳本
  ├── build.js          // 構建入口腳本
  ├── build.sh          // CI 腳本
  ├── base.config.js    // 基礎構建配置文件
  └── swan.config.js    // 百度 Swan 小程序構建配置文件
└── src                   // 項目源碼
   
├── app.js            // 小程序入口腳本
   
├── app.styl          // 小程序入口樣式
   
├── common            // 項目公共代碼
   
  ├── img           // 項目圖片資源
   
  ├── tpl           // 項目公共模板文件
   
  └── ...
   
├── components      // 自定義組件
   
└── pages           // 小程序頁面集合
       
├── home        // 首頁
       
├── ...
       
└── ...

Okam 實現機制簡介

目前 okam 核心實現有兩個主要模塊:

  • okam-build: 提供核心代碼構建以及其它輔助開發能力,包括增量構建、開發 Server 等;

  • okam-core: okam 核心運行時框架,運行于原生小程序框架之上,規范化了小程序頁面和組件定義方式,包括生命周期、API 跟 Vue 對齊。

okam 框架給小程序提供的一系列框架擴展能力,都是依托于構建配置文件,該構建配置不同于其它開源框架,不僅僅是用于聲明代碼轉譯構建處理流程,還可以用于聲明框架要使用的擴展能力及可以靈活的對小程序 API 和 組件進行擴展聲明。這樣設計,也使得開發者可以更加靈活控制自己框架要使用的能力,同時可以靈活的擴展自己的框架 API 和組件,可以更容易在不同平臺間實現無縫對齊,減少了各種平臺代碼特殊處理邏輯。

因此,雖然我們提供了 Vue 的數據操作方式包括 Computed Watch 能力,開發者完全也可以把這個能力從核心框架移除掉。基于這種方式,開發者可以真正實現按需增強自己開發框架能力。而 okam 框架構建是基于依賴分析進行構建的,因此完全不用擔心不同平臺代碼或者沒用到的框架擴展能力會被構建到目標平臺里。

構建配置文件

下面是構建配置文件大概的樣子,完整的構建配置定義可以參考這里。

const path = require('path');
module.exports = {
   verbose
: false,
   root
: path.join(__dirname, '..'),
   output
: {
       dir
: 'dist',
       depDir
: 'src/common'
   
},
   component
: {
       extname
: 'vue'
   
},
   framework
: [ // 框架擴展配置
       
'data', 'watch', 'behavior', 'ref'
   
],
   designWidth
: 750,
   processors
: { // 處理器配置
      postcss
: {
           extnames
: ['styl'],
           options
: {
               plugins
: ['px2rpx', 'env']
           
}
       
}
 
},
  dev
: { // 開發環境的附加配置
 
}
};

入口腳本 - app.js

相比原生小程序包括目前開源的一些開發框架,你要做的事情非常簡單,導出入口腳本定義,如下所示:

export deafult {
   config
: {}, // 原生小程序 app.json 配置都定義在這里
   
// 其它定義同原生
};

對于頁面組件也是一樣的比較簡潔,不需要原生各種 App/Component/Page 的包裹,也不需要各種煩人擴展定義方式: import App from ‘xx’; class MyApp extends App {};

如果你想使用各種新的 ES Next 語法,包括 asyn await 語法,這些都是支持的,你唯一要做的事情,只是變更構建配置,代碼不需要額外引入任何東西,剩下的就交給開發框架來做。

入口樣式 - app.css

入口樣式跟原生保持一致,此外提供了可選的預處理語言供選擇,包括 stylus less sass ,開發者可以自行選擇自己喜歡的。

如果 rpx 單位轉換讓你頭痛,可以使用 okam 提供的 px2rpx 插件,來幫你自動完成這個事情。

頁面定義

相比原生開發,一個頁面往往需要最多四個同名文件定義,而在 okam 框架里,只需要一個單文件組件同 Vue 就可以輕松完成一個頁面定義。當然,定義的頁面需要在 app.js config.pages 屬性里聲明,方能訪問到。

<template>
<view class="page-wrap"></view>
</template>
<script>
import mixinA from '../common/mixinA';
import MyComponent from '../components/MyComponent';
export default {
   
// 同原生小程序頁面配置定義
   config
: {
      title
: 'page title' // title 等價于原生的 navigationBarTitleText 配置
   
},
   
// 聲明依賴的自定義組件,不需要使用原生 usingComponents 定義
   components
: {
       
MyComponent
   
},
   
// mixin 支持
   mixins
: [mixinA],
   data
: {},     // 頁面數據定義
   computed
: {}, // 聲明計算屬性
   watch
: {},    // 聲明要 watch 數據、屬性
   
// 生命周期鉤子
   created
() {},
   mounted
() {},
   destroyed
() {},
   
// 頁面原生鉤子
   onShow
() {},
   onHide
() {},
   
// 其它自定義方法,包括事件監聽處理器定義
   methods
: {
     onClick
() {}
   
}
}
</script>
<style lang="stylus">
.page-wrap
</style>

自定義組件定義

為了更好實現組件復用功能,同時讓整個頁面結構更清晰一點,okam 框架提供了自定義組件支持,在自定義組件實現上是基于小程序提供的原生組件實現的,而不是像 wepy 這些早期框架基于模板方式實現。在 okam 框架里,不管是頁面還是自定義組件都被抽象成 Vue 單文件組件形式。頁面和自定義組件兩者定義基本一樣,除了自定義組件,多了個 props 屬性定義外。

okam 雖然擴展了組件定義方式,但也支持原生的自定義組件使用,尤其當我們依賴組件可能是來源于第三方組件時候,需要通過 NPM 安裝,在 okam 里,你完全可以不用特別區分是基于 okam 語法還是原生語法定義的組件,使用方式完全是一致的。

<template>
   
<view>
       
<npm-component @hi="handleHi"></npm-component>
   
</view>
</template>
<script>
import NpmComponent from 'npm-component';
export default {
   components
: {
       
NpmComponent
   
},
   methods
: {
       handleHi
() {}
   
}
}
</script>

更強大靈活的模板語法

原生小程序模板語法使用上不夠簡潔靈活,為此 okam 對模板語法重新做了優化,基本對齊 Vue,除了指令少了 v- 命名空間前綴外,其它的使用基本一致跟 Vue,由于原生實現受限,目前支持的只是 Vue 模板語法一個子集,完整支持介紹可以參考文檔。

<template>
   
<view>
     
<button @click="handleClick('hi')">Click me</button>
     
<view for="num in arr">{{num}}</view>
     
<view if="flag">A</view>
     
<view else>B</view>
   
</view>
</template>
<script>
export default {
   data
: {
       arr
: [1, 23],
       flag
: false
   
},
   methods
: {
       handleClick
(info) {
            console
.log(info); // hi
       
}
   
}
}
</script>

使用原生小程序提供的 API

小程序提供了豐富的 API,使得小程序的能力得以增強,為了使用小程序提供的 API,只需要在對應的 App Page Component 實例上下文訪問 this.$api.xxx 方式訪問相應的小程序 API 即可,等價于 原生小程序 swan.xxx 訪問方式。 之所以這么設計,是為了保證框架代碼平臺無關性,為后續一套代碼能夠遷移到不同平臺做準備。

// app.js
export default {
   onLaunch
() {
       
let result = this.$api.getSystemInfoSync();
       
// ...
   
}
}

如果想框架外部訪問 API,可以通過如下方式:

import {api} from 'okam-core/na/index';
// ...

如果想擴展框架 API,一樣的也是可以基于構建配置方式,在 swan.config.js 配置文件 api 配置項加入如下配置:

// common/api/hi.js
// 要注入的 hi api 定義
export default function hi() {
   console
.log('hi');
}

// swan.config.js 構建配置里增加 api 配置項
module
.exports = {
   api
: {
       hi
: './common/api/hi'
   
}
};

數據請求

數據請求是我們業務開發中經常需要面臨的場景,okam 框架封裝了原生請求接口,優化了接口使用。

  • 默認組件、頁面或者 App 上下文提供了一個封裝好的請求對象: $http

  • 該請求對象請求接口默認返回的是 Promise,建議開發過程中直接使用該請求對象發起 HTTP 請求

  • 請求對象接口

    • $http.get(url, options): 發起一個 GET 請求,請求選項可以參考原生請求接口定義

    • $http.post(url, options): 發起一個 POST 請求

    • $http.fetch(url, options): 發起自定義 Method 請求

       this.$http.fetch(
           
      'http://xxx.com/xx',
           
      {method: 'PUT', data: {}}
       
      ).then(
           res
      => console.log(res),
           err
      => console.error(err)
       
      );

一般開發過程中,如果后端接口沒有 ready,一般需要前端自己構造數據接口,為了方便開發過程中自測,okam 框架提供請求 mock 機制來完成請求接口自測,具體可以參考文檔。

免責聲明:我司網站轉載此文,不代表本網的觀點和立場。不以盈利為目的,如有侵犯公司或個人權益,我司會第一時間刪除文章,歡迎咨詢免費獲取思維導圖!
感受專業服務,從來電咨詢開始
15821967367158-2196-7367
cache
Processed in 0.005380 Second.
浙江20选5几点开奖