Skip to content

支持百度/微信/支付宝/头条小程序、快应用实例代码,一套代码多平台运行

Notifications You must be signed in to change notification settings

awesome-okam/okam-examples

Repository files navigation

Okam Examples

基于 okam 开发多平台支持的示例,展现 Okam 支持的能力特性

TODO 目前示例还待完善

快速开始

准备工作

  • 安装 Node (Node >= 8 && npm >= 3)

  • 执行 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: 生产环境构建

  • 微信小程序运行命令

    • npm run dev:wx: 微信小程序开发构建

    • npm run dev:wx:clean: 删掉构建产物(不包括项目配置文件)并重新构建且带 watch 开发模式

    • npm run dev:wx:server: 带 watch && 开发 Server 开发模式

    • npm run prod:wx: 微信小程序生产环境构建

  • 支付宝小程序运行命令

    • npm run dev:ant: 支付宝小程序开发构建

    • npm run dev:ant:clean: 删掉构建产物(不包括项目配置文件)并重新构建且带 watch 开发模式

    • npm run dev:ant:server:带 watch && 开发 Server 开发模式

    • npm run prod:ant: 支付宝生产环境构建

  • 头条小程序运行命令

    • npm run dev:tt: 头条小程序开发构建

    • npm run dev:tt:clean: 删掉构建产物(不包括项目配置文件)并重新构建且带 watch 开发模式

    • npm run dev:tt:server:带 watch && 开发 Server 开发模式

    • npm run prod:tt: 头条小程序生产环境构建

  • 快应用运行命令

    • npm run dev:quick: 快应用开发构建

    • npm run dev:quick:clean: 删掉构建产物(不包括项目配置文件)并重新构建且带 watch 开发模式

    • npm run dev:quick:server:带 watch && 开发 Server 开发模式

    • npm run prod:quick: 快应用小程序生产环境构建

  • 对于小程序,分别到小程序官网下载相应的开发者工具,打开开发工具,打开项目构建目录:开发工具 -> 打开 -> <项目Root>/dist

    <项目Root>/dist         百度小程序
    <项目Root>/wx_dist      微信小程序
    <项目Root>/ant_dist     支付宝小程序
    
  • 对于快应用,需要安装相应的工具,具体可以到官网查看,电脑上只需要全局安装 hap-toolkit 工具: npm i hap-toollit -g;手机上安装下官网提供的调试器即可。启动后,用手机扫码查看效果。

    <项目Root>/quick_dist         快应用构建目录
    <项目Root>/quick_dist/src     构建出来的快应用代码
    <项目Root>/quick_dist/build   快应用基于自己工具构建出来的代码
    <项目Root>/quick_dist/dist    快应用基于自己工具打包出来的代码
    
  • 等待开发工具编译,就可以看到预览效果

目录结构说明

.
├── README.md             // 项目说明文件
├── ci.yml                // 项目 CI 配置
├── package.json          // 项目包配置信息
├── doc                   // 放置项目源图片或者其它文档目录
├── swan_dist             // 百度小程序 构建产物,开发工具得选择该构建产物目录作为项目根目录方能预览
├── wx_dist               // 微信小程序 构建产物,开发工具得选择该构建产物目录作为项目根目录方能预览
├── ant_dist              // 支付宝小程序 构建产物,开发工具得选择该构建产物目录作为项目根目录方能预览
├── tt_dist               // 头条小程序 构建产物,开发工具得选择该构建产物目录作为项目根目录方能预览
├── quick_dist            // 快应用 构建产物,具体调试预览跟小程序不同,详见后面说明
├── .tinyimgcache         // 自动生成,图片压缩的缓存信息,不可删掉,否则会导致图片重复压缩
├── project.json5         // 小程序项目配置文件,除了语法使用 JS 对象形式,配置说明参考官方小程序说明
├── scripts               // 构建相关脚本
│   ├── build.js          // 构建入口脚本
│   ├── build.sh          // CI 脚本
│   ├── base.config.js    // 基础构建配置文件
│   ├── tt.config.js      // 头条小程序构建配置文件
│   ├── init-quick-app.js // 快应用项目初始化脚本
│   ├── quick.config.js   // 快应用构建配置文件
│   ├── ant.config.js     // 支付宝小程序构建配置文件
│   ├── wx.config.js      // 微信小程序构建配置文件
│   └── swan.config.js    // 百度 Swan 小程序构建配置文件
└── src                   // 项目源码
    ├── app.js            // 小程序入口脚本
    ├── app.styl          // 小程序入口样式
    ├── common            // 项目公共代码
    │   ├── img           // 项目图片资源
    │   ├── tpl           // 项目公共模板文件
    │   └── ...
    ├── components      // 自定义组件
    └── pages           // 小程序页面集合
        ├── home        // 首页
        ├── ...
        └── ...

About

支持百度/微信/支付宝/头条小程序、快应用实例代码,一套代码多平台运行

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published