Omi - 前端跨框架跨平台框架

最新推荐文章于 2024-05-30 10:11:23 发布
最新推荐文章于 2024-05-30 10:11:23 发布
阅读量3.2k 收藏 7
点赞数 1
分类专栏： 技术 前端开发 文章标签： 前端

omi

omi

Omi - 前端跨框架跨平台框架

基于 Web Components 并支持 IE8+(omio)，小程序(omip) 和 任意前端框架集成

Omi 生态

→ Omi 生态学习路线图

基础生态

项目描述
omi-docs 和 例子Omi 官方文档
omimOmi 打造的跨框架 Material Design UI 组件库, 任意框架可以使用,(DOCS & REPL && 加入我们!)
omio兼容老浏览器的 Omi 版本(支持到IE8+)
omis服务端同构渲染解决方案(目前只能用 omio)
omiu简单 Omi UI
omi-routerOmi 官方路由,超级小的尺寸，只有 1KB 的 js
omi-devtools谷歌浏览器开发工具扩展
omi-cli项目脚手架工具，各种模板任你选 → 基础模板 and → 其他模板
omilOmi components 的 Webpack loader
omi-snippetsVSCodse omi 文件扩展, 立即安装!

小程序生态

项目描述
omi-cloud小程序•云开发
omip直接使用 Omi 开发小程序或 H5 SPA
mps原生小程序增强框架(JSX + Less 输出 WXML + WXSS)，也支持 QQ 轻应用
cax小程序 Canvas 和 SVG 渲染引擎
omix极小却精巧的小程序框架
omi-mp通过微信小程序开发和生成 Web 单页应用(H5 SPA)
comi小程序代码高亮和 markdown 渲染组件
wx-touch-event基于 AlloyFinger/omi-finger 改造的小程序手势解决方案

其他

项目描述
md2site用 markdown 生成静态网站文档.
omi-mvvmMVVM 王者归来, mappingjs 强力加持。
omi-chart一个 chart-x 标签搞定报表
mp-mvvm小程序插上 MVVM 的翅膀, mappingjs 强力加持。
omi-30-seconds30 秒理解一段有用的 Omi 代码片段.
omi-swiperOmi + Swiper
omi-vscodeVscode extension for omi, Install now!
omi-spriteWeb Components, JSX 和 Canvas 的完美融合
omi-canvasWeb Components, JSX 和 Canvas 的完美融合
omi-exOmi.js 扩展(TypeScript)
omi-transformOmi 和 css3transform 完美结合. 让 css3 transform 在你的 Omi项目中变得超级简单.
omi-fingerOmi 官方手势库
omi-touch丝般顺滑的触摸运动
omi-snap预渲染骨架屏
omi-i18nOmi 国际化解决方案
omi-page基于 page.js 的 Omi 路由

特性

  • 框架无关，任何框架可以使用 Omi 自定义元素
  • 提供桌面、移动和小程序整体解决方案
  • 超快的更新和渲染
  • 小巧的尺寸
  • 拥有官方跨框架 UI 组件库 - omim
  • 使用 omio 可以兼容到 IE8
  • 真正的 MVVM, 拥有 mappingjs 强力支持
  • 支持 TypeScript
  • 响应式数据绑定
  • 增强了 CSS, 支持 rpx 单位，基于 750 屏幕宽度
  • 原生支持 tap 事件
  • 基于 Shadow Dom 设计
  • 利用Chrome 开发工具扩展 轻松调试，从 Chrome 应用商店安装
  • 符合浏览器的发展趋势以及API设计理念
  • Web Components + JSX + HTM 融合为一个框架 Omi
  • Web Components 也可以数据驱动视图, UI = fn(data)
  • JSX 是开发体验最棒(智能提示)、语法噪音最少、图灵完备的 UI 表达式，模板引擎不完备，模板字符串完备但是语法噪音太大
  • 看看Facebook React 和 Web Components对比优势，Omi 融合了各自的优点，而且给开发者自由的选择喜爱的方式
  • Shadow DOM 与 Virtual DOM 融合，Omi 既使用了虚拟 DOM，也是使用真实 Shadow DOM，让视图更新更准确更迅速
  • 局部 CSS 最佳解决方案(Shadow DOM)，社区为局部 CSS 折腾了不少框架和库(使用js或json写样式，如:Radium，jsxstyle，react-style；与webpack绑定使用生成独特的className文件名—类名—hash值，如：CSS Modules，Vue)，还有运行时注入scoped atrr 的方式，都是 hack 技术；Shadow DOM Style 是最完美的方案
  • 独创的 Path Updating的 store 系统，基于 Proxy 全自动化的精准更新，功耗低，自由度高，性能卓越，方便集成 requestIdleCallback，自动化按需更新局部视图

对比同样开发 TodoApp， Omi 和 React 渲染完的 DOM 结构，Omi 使用 Shadow DOM 隔离样式和语义化结构:

OmiReact
OmiReact

TypeScript 智能提示

import { h, WeElement, tag, classNames } from 'omi';
import * as styles from './_index.less';

interface ButtonProps {
  href?: string,
  disabled?: boolean,
  type?: 'default' | 'primary' | 'danger',
  htmltype?: 'submit' | 'button' | 'reset',
  onClick?: (e: any) => void
}

const TAG = 'o-button'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      [TAG]: Omi.Props & ButtonProps
    }
  }
}

@tag(TAG)
export default class oButton extends WeElement<ButtonProps, {}> {
...
...
...
 

omi

必须收藏的资源

目录

一个 HTML 完全上手

下面这个页面不需要任何构建工具就可以执行

<!DOCTYPE html>
<html>

<head>
  <title>Omi demo without transpiler</title>
</head>

<body>
  <script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
  <script>
    const { define, WeElement, html, render } = Omi

    define('my-counter', class extends WeElement {

      install() {
        this.data.count = 1
        this.sub = this.sub.bind(this)
        this.add = this.add.bind(this)
      }

      sub() {
        this.data.count--
        this.update()
      }

      add() {
        this.data.count++
        this.update()
      }

      render() {
        return html`
          <div>
            <button onClick=${this.sub}>-</button>
            <span>${this.data.count}</span>
            <button onClick=${this.add}>+</button>
          </div>
          `}
    })

    render(html`<my-counter />`, 'body')
  </script>
</body>

</html>

使用 store

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Omi demo without transpiler</title>
</head>

<body>
  <script src="https://tencent.github.io/omi/packages/omi/dist/omi.js"></script>
  <script>
    const { define, WeElement, html, render } = Omi

    define('my-counter', class extends WeElement {
      initUse() {
        return ['count']
      }

      install() {
        this.sub = this.sub.bind(this)
        this.add = this.add.bind(this)
      }

      sub() {
        this.store.data.count--
      }

      add() {
        this.store.data.count++
      }

      render() {
        return html`
          <div>
            <button onClick=${this.sub}>-</button>
            <span>${this.store.data.count}</span>
            <button onClick=${this.add}>+</button>
          </div>
          `}
    })

    render(html`<my-counter />`, 'body', {
      data: {
        count: 1
      }
    })
  </script>

</body>

</html>

通过上面脚本的执行，你已经定义好了一个自定义标签，可以不使用 render 方法，直接使用 like-button 标签：

<body>
    <like-button></like-button>
</body>

再花 30 秒完全上手

你也可以使用现代化的 JS 语法，快速构建 Omi 项目:

import { tag, WeElement, render } from 'omi'

@tag('my-counter')
class MyCounter extends WeElement {
  data = {
    count: 1
  }

  static css = `
    span{
        color: red;
    }`

  sub = () => {
    this.data.count--
    this.update()
  }

  add = () => {
    this.data.count++
    this.update()
  }

  render() {
    return (
      <div>
        <button onClick={this.sub}>-</button>
        <span>{this.data.count}</span>
        <button onClick={this.add}>+</button>
      </div>
    )
  }
}

render(<my-counter />, 'body')

→ counter demo

快速入门

安装

$ npm i omi-cli -g    # install cli
$ omi init my-app     # 初始化项目，也可以在空目录里执行 'omi init'
$ cd my-app           # 如果在空目录里执行 'omi init' 忽略这条命令
$ npm start           # 开发
$ npm run build       # 编译发布

npx omi-cli init my-app 也支持(要求 npm v5.2.0+)

目录说明:

├─ config
├─ public
├─ scripts
├─ src
│  ├─ assets
│  ├─ elements    //存放所有 custom elements
│  ├─ store       //存放所有页面的 store
│  ├─ admin.js    //入口文件，会 build 成  admin.html
│  └─ index.js    //入口文件，会 build 成  index.html

Scripts

"scripts": {
    "start": "node scripts/start.js",
    "build": "PUBLIC_URL=. node scripts/build.js",
    "build-windows": "set PUBLIC_URL=.&& node scripts/build.js",
    "fix": "eslint src --fix"
}

你也可以设置 PUBLIC_URL, 比如：

...
"build": "PUBLIC_URL=https://fe.wxpay.oa.com/dv node scripts/build.js",
"build-windows": "set PUBLIC_URL=https://fe.wxpay.oa.com/dv&& node scripts/build.js",
...

切换 omi, omio 和 reomi

增加或删除 package.json 里的 alias config 可以切换 omi 和 omio 渲染:

"alias": {
  "omi": "omio"
}

项目模板

Template TypeCommandDescribe
基础模板(v3.3.0+)omi init my-app基础模板，支持 omi 和 omio(IE8+)
小程序模板(v3.3.5+)omi init-p my-appOmi 开发小程序
基础模板(v3.3.9+)omi init-o my-app支持 IE8 的基础模板，只是 build 的时候支持 IE8，开发调试请用 IE9
支持预渲染快照骨架的模板omi init-snap my-app基础模板，支持 omi 和 omio(IE8+)，内置预渲染
TypeScript Template(omi-cli v3.3.0+)omi init-ts my-app使用 TypeScript 的模板
Mobile Templateomi init-weui my-app使用了 weui 和 omi-router 的移动 web app 模板
omi-mp Template(omi-cli v3.0.13+)omi init-mp my-app小程序开发 Web 的模板
MVVM Template(omi-cli v3.0.22+)omi init-mvvm my-appMVVM 模板

基础模板(omi init my-app)是基于单页的 create-react-app 改造成多页的，有配置方面的问题可以查看 create-react-app 用户指南。

Hello Element

先创建一个自定义元素:

import { define, WeElement } from 'omi'

define('hello-element', class extends WeElement {
  onClick = evt => {
    // trigger CustomEvent
    this.fire('abc', { name: 'dntzhang', age: 12 })
    evt.stopPropagation()
  }

  //如果需要在 html 里直接使用 <hello-element></hello-element>，必须声明 propTypes
  static propTypes = {
    msg: String
  }

  static css = `
      div {
        color: red;
        cursor: pointer;
      }`

  render(props) {
    return (
      <div onClick={this.onClick}>
        Hello {props.msg}
        <div>Click Me!</div>
      </div>
    )
  }
})

使用该元素:

import { define, render, WeElement } from 'omi'
import './hello-element'

define('my-app', class extends WeElement {
  data = { abc: 'abc' }

  // define CustomEvent Handler
  onAbc = evt => {
    // get evt data by evt.detail
    this.data.abc = ' by ' + evt.detail.name
    this.update()
  }

  static css = `
      div{
          color: green;
      }`
  }

  render(props, data) {
    return (
      <div>
        Hello {data.abc}
        <hello-element
          onAbc={this.onAbc}
          msg="WeElement"
        />
      </div>
    )
  }
})

render(<my-app name="Omi v4.0" />, 'body')

告诉 Babel 把 JSX 转化成 Omi.h() 的调用:

{
    "presets": ["env", "omi"]
}

需要安装下面两个 npm 包支持上面的配置:

"babel-preset-env": "^1.6.0",
"babel-preset-omi": "^0.1.1",

如果你使用 babel7，也可以使用如下包和配置：

npm install --save-dev @babel/preset-env
npm install --save-dev @babel/preset-react
{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "pragma": "Omi.h"
      }
    ]
  ]
}

如果不想把 css 写在 js 里，你可以使用 webpack to-string-loader, 比如下面配置:

{
    test: /[\\|\/]_[\S]*\.css$/,
    use: [
        'to-string-loader',
        'css-loader'
    ]
}

如果你的 css 文件以 _ 开头, css 会使用 to-string-loader. 如：

import { tag, WeElement render } from 'omi'

define('my-app', class extends WeElement {

  css = require('./_index.css')
  ...
  ...
  ...

你也可以忘掉这一对繁琐的配置直接使用 omi-cli，不需要你配置任何东西。

TodoApp

下面列举一个相对完整的 TodoApp 的例子:

import { define, render, WeElement } from 'omi'

define('todo-list', class extends WeElement {
  static propTypes = {
    items: Array
  }

  render(props) {
    return (
      <ul>
        {props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    )
  }
})

define('todo-app', class extends WeElement {
  static observe = true

  data = { items: [], text: '' }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <todo-list items={this.data.items} />
        <form onSubmit={this.handleSubmit}>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.data.text}
          />
          <button>Add #{this.data.items.length + 1}</button>
        </form>
      </div>
    )
  }

  handleChange = e => {
    this.data.text = e.target.value
  }

  handleSubmit = e => {
    e.preventDefault()
    if (!this.data.text.trim().length) {
      return
    }
    this.data.items.push({
      text: this.data.text,
      id: Date.now()
    })
    this.data.text = ''
  }
})

render(<todo-app />, 'body')

Store

Omi 的 Store 体系： 从根组件注入，在所有子组件可以共享。使用起来非常简单：

import { define, render, WeElement } from 'omi'

define('my-hello', class extends WeElement {
  render() {
    //任意子组件的任意方法都可以使用 this.store 访问注入的 store
    return <div>{this.store.name}</div>
  }
})

define('my-app', class extends WeElement {
  handleClick = () => {
     //任意子组件的任意方法都可以使用 this.store 访问注入的 store
    this.store.reverse()
    this.update()
  }

  render() {
    return (
      <div>
        <my-hello />
        <button onclick={this.handleClick}>reverse</button>
      </div>
    )
  }
})

const store = {
  name: 'abc',
  reverse: function() {
    this.name = this.name.split("").reverse().join("")
  }
}
//通过第三个参数注入
render(<my-app />, document.body, store)

与全局变量不同的是， 当有多个根节点的时候就可以注入多个 store，而全局变量只有一个。

生命周期

钩子方法触发时机
install初始化安装
installed插入到文档之后且安装完成
uninstall从文档中卸载移除
beforeUpdateupdate 之前
updatedupdate 之后
beforeRenderrender() 之前
receiveProps父组件更新时候触发, 返回 false 可以阻止更新

调试工具

使用 Omi 开发工具 可以非常简单地调试和管理你的 UI。不需要任何配置，你只要安装然后就能调试。

既然 Omi 使用了 Web Components 和 Shadow-DOM, 所以不需要像 React 一样安装其他元素面板，只需要使用 Chrome 自带的 Elements' sidebar 便可，它和 React 开发者工具一样强大。

Omi DevTools

查看所有注册的元素

console.log(Omi.elements)

浏览器兼容

Omio - 兼容老浏览器的 Omi 版本(支持到IE8+)

Omi 4.0+ works in the latest two versions of all major browsers: Safari 10+, IE 11+, and the evergreen Chrome, Firefox, and Edge.

→ Browsers Support

→ polyfills

<script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-bundle.js"></script>

贡献者们

维护者

任何 Omi 相关问题欢迎联系我们。也可以加入 Omi QQ 群进行讨论交流。

感谢

Thy拾
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
mtu:跨平台框架的材质设计UI组件库
04-01
Mtu UI组件库 $ npm i mtu 完全响应式跨框架的UI组件库，基于封装，兼容React ， Vue等前端框架，或者在electron中间发布，设计规范参考了Google ，并针对移动端进行了优化，适用于需要同时兼容移动端的Web项目，门户网站，后台管理系统等。 优势 响应式；自适应不同分辨率设备，并在窗口或组件中发生变化时更新样式（横屏竖屏）。 跨框架；兼容所有框架，无论是原生开发还是任何前端框架均可使用。 零依赖；不依赖任何第三方库。 按需约会；通过webpack或vite ，你可以按需约会组件，减少体积。 本地化；完全中文的开发文档支持。 无门云；基于Web Components封装，通常是常规的div ， select的布局使用。 SEO；支持SEO，旨在渲染的MVC应用。 Mtu 完全约会： import 'mtu' //引入默认样式 import 'mtu/st
omi：前端跨框架框架-前端跨框架跨平台框架
02-06
Omi-前端跨框架框架 将Web组件，JSX，虚拟DOM，功能样式，观察或代理合并到一个体积很小且具有高性能的框架中。 一次编写组件，在任何地方都可以使用，例如Omi，React，Preact，Vue或Angular。 大宫 由Omi支持的跨...
前端人必须知道的三种移动跨平台方案
Lydiasq的博客
06-05 1545
Web App、PWA（Progressive Web Apps）、Hybrid App、PHA（Progress Hybrid App）都可以实现跨平台，WebView 是一种基于浏览器内核的跨平台解决方案，通过在移动应用中嵌入一个浏览器组件，可以使用 HTML、CSS 和 JavaScript 来构建应用界面和逻辑。这种方案可以快速开发应用，同时具备一定的跨平台能力，因为 WebView 在不同的平台上基本上都有良好的支持。
【前端篇】前端开发跨平台框架盘点
最新发布
友大冰的博客
05-30 1422
前端开发的跨平台框架愈发成为开发者们的首要之选，其能够让开发者借助统一的技术栈来构建可适用于多个平台的应用。于 App 领域而言，React Native、Flutter、Weex 以及 Hippy 提供了原生渲染的本领；在客户端范畴，Electron、Tauri 以及 Nw.js 使得 Web 技术可以构建桌面应用；而在小程序方面，uniapp 和 Taro 达成了一次编写、多端运行的美好愿景。此文将对这些框架予以简要介绍，助力选择出最契合项目的开发工具！
开源项目介绍 ｜OMI-前端【跨框架】框架
腾讯开源
06-16 662
2021腾讯犀牛鸟开源人才培养计划开源项目介绍滑至文末报名参与开源人才培养计划提交项目ProposalOMI项目介绍标签：前端、小程序web 技术栈：typescript， javas...
开源项目介绍｜OMI - 前端跨框架框架
腾讯开源
06-26 492
2022腾讯犀牛鸟开源人才培养计划开源项目介绍滑至文末报名参与开源人才培养计划提交 OMI 项目ProposalOMI 项目介绍OMI 是基于webcomponents前端跨框架框架，曾荣登GitHub上最热门的JavaScript开源项目，2018年被risingstars入选明星项目。OMI 项目导师介绍张磊OMI、Westore、Cax等框架作者，Kbone框架贡献...
什么是前端跨平台？有哪些跨平台框架？
weixin_63490373的博客
12-03 324
React Native 可以在 iOS 和 Android 平台上开发原生应用，同时也可以在 Web 平台上使用 React 框架进行开发。Electron 可以将 Web 应用程序打包成桌面应用程序，可以在 Windows、macOS 和 Linux 等多个平台上运行。这些跨平台框架大大简化了开发过程，提高了开发效率，同时也保证了应用程序在多个平台上的兼容性和用户体验。我了解过的跨平台框架包括。
Omi:前端跨框架框架-开源
05-15
Omi（发音为/ ˈomɪ /）是基于Web Component的跨框架框架，您也可以使用具有相同语法的omio兼容IE8 +。 一个框架，移动和桌面以及小程序。 只需下载并包含. Omi will be registered as a global variable. If you ...
omi-frame-sample:Omi 框架的示例
06-21
"omi-frame-sample"项目是学习和理解 Omi 框架的一个理想起点。通过分析和实践这个示例，你可以掌握 Omi 的基本用法，包括组件定义、状态管理、事件处理等关键概念。随着对 Omi 深入的理解，你将能够利用它的优势，...
精通 Omi 框架等四个电子书
07-06
Omi是一款轻量级、高性能的前端框架，由腾讯Wechat团队开发，主要设计用于构建跨平台的Web和小程序应用。Omi的核心理念是统一DOM、Shadow DOM和小程序的渲染层，提供了一套统一的API，使得开发者在不同平台上编写...
omi-Blog:omi的博客使用beego框架
05-30
omi-blog omi的博客使用beego框架 谢谢 ulricqin 环境 sudo yum install go sudo yum install git sudo yum install mariadb-server mariadb sudo systemctl start mariadb.service mkdir ~/go export GOPATH=...
uni-app跨平台前端框架介绍(终极跨平台解决方案)
01-27
多端泛滥当前是一个多端泛滥的时代,除了原有的Android、IOS、H5、小程序平台,支付宝、百度、淘宝、今日头条等都陆续发布了自己的小程序和快应用规范,用户被众多平台分散,为了覆盖更多的用户,开发者需要更多的学习、适配和维护成本。体验不好过去的跨平台框架在app上的体验并不好。生态不丰富过去的跨平台框架在周边的生态一直不丰富,开发者很难获取更好更多的SDK。uni-app是一个使用Vue.js开发跨平台应用的前端框架，开发者编写一套代码,可编译到Android、iOS、H5、小程序等多个平台。uni-app在跨端数量、拓展能力、性能体验、周边生态、学习成本、开发成本等6大
破界！Omi生态omi-mp发布，用小程序开发生成Web
03-29
omi-mp 是什么 Omi 框架是微信支付线研发部和 AlloyTeam 开源的通用 Web 组件化框架，基于 Web Components，用来开发 PC、手机浏览器或者微信、手Q webview 的 Web 页面。自今年5月开源以来，该项目共获得 Star 数 ...
omi-docs:milomil文档
03-11
【omi-docs:milomil文档】是一份关于Omil技术的详细教程和案例集合，主要面向使用React、JSX、SFC（单文件组件）以及HTML的开发者。Omil，全称为“Omi Light”，是腾讯AlloyTeam团队开发的一个轻量级前端框架，它...
Omi-NTFS-for-mac-1.1.3.pkg
01-18
NTFS Disk by Omi Mac版是Mac电脑上的一款免费的NTFS磁盘管理器。使用NTFS Disk by Omi，你可以轻松地在Mac上读写Windows NTFS磁盘的文件。支持在Mac上修复和格式化NTFS磁盘。 支持最新的Mac OS Monterey 完美支持M1...
前端-跨端跨平台框架介绍
qq_33418013的博客
10-22 2076
前端工程师 学的跨端跨平台
开源的前端代码跨平台运行的前端开发框架
JCjunior的博客
02-13 1115
开源的前端代码跨平台运行的前端开发框架
前端需要理解的跨平台知识
薛定谔的猫-前端领域
08-25 644
混合开发是指使用多种开发模开发App的一种开发模式，涉及到两大类技术：原生 Native、Web H5。原生 Native 主要指 iOS（Objective C）、Android（Java），原生开发效率较低，开发完成需要重新打包整个App，发布依赖用户的更新，性能较高功能覆盖率更高；Web H5主要由HTML、CSS、JavaScript组成，Web可以更好的实现发布更新，跨平台也更加优秀，但性能较低，特性受限。跨平台开发是围绕着和两个主题去打造的，通过在两者之间进行取舍，诞生了多种跨平台解决方案。
omi数据so2单位
01-06
OMI测量SO2浓度的单位是DU（Dobson Unit）。DU是大气中SO2浓度的一个国际公认的度量单位。它是根据大气中SO2分子吸收紫外线的光学深度来定义的。具体来说，一个DU表示10^-2淡化光通量的SO2浓度。 OMI是一种卫星观测...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值