框架开发

小程序的开发除去常见的原生小程序语法的开发模式，还可以应用层框架开发，用类现代框架 (vue/react) 的语法去开发小程序，提升开发体验和解决跨平台的问题。本文主要讲解如何用常见的小程序框架开发百度小程序。

  • -

    Taro

    第一步: 安装开发工具

    @tarojs/cli;使用 npm 或者 yarn 的方式都可以获取，也可以直接使用 npx(在 npm 5.2+ 下)
    1.   $ npm install -g @tarojs/cli    $ yarn global add @tarojs/cli

    第二步: 初始化项目

    使用命令创建模板项目
    1.   $ taro init swan-taro
    Taro 开发百度小程序示例

    第三步: 安装依赖

    进入项目目录，安装依赖
    1.   $ npm install

    第四步: 构建目标代码

    去掉 —watch 将不会监听文件修改，并会对代码进行压缩打包
    1.   npm script    $ npm run dev:swan // 开发模式    $ npm run build:swan // 线上模式    仅限全局安装    $ taro build --type swan --watch    $ taro build --type swan

    第四步: 开发者工具打开项目

    dist 目录，进行调试、预览、上传，方式二：使用 2.8.1 及以上版本开发者工具打开项目目录，同时进行以下配置，配置完成后，就可以在开发者工具中开发、调试、预览、上传。
  • npm run build:swan
  • project.swan.json文件中增加配置 "smartProgramRoot": "dist"（如果已有此配置，请忽略）
    • npm run dev:swan 并勾选 异步执行
  • npm run build:swan -

    mpvue

    第一步: 初始化项目

    使用示例项目:
    1.   $ git clone git@github.com:hucq/mpvue-platform-sample.git
    mpvue 开发百度小程序示例

    第二步: 安装依赖

    进入项目目录，安装依赖
    1.   $ npm install    $ npm install mpvue@beta mpvue-loader@beta mpvue-template-compiler@beta

    第三步: 构建目标代码

    1.   $ npm run dev:swan  // 开发模式    $ npm run build:swan // 线上模式

    第四步: 开发者工具打开项目

    dist/swan 目录，进行调试、预览、上传，方式二：使用 2.8.1 及以上版本开发者工具打开项目目录，同时进行以下配置，配置完成后，就可以在开发者工具中开发、调试、预览、上传。
  • npm run build:swan
  • project.swan.json文件中增加配置 "smartProgramRoot": "dist/swan"（如果已有此配置，请忽略）
    • npm run dev:swan 并勾选 异步执行
  • npm run build:swan -

    WePY

    第一步: 安装开发工具

    wepy-cli;
    1.   $ npm install -g wepy-cli@1.7.3-alpha6

    第二步: 初始化项目

    使用命令创建模板项目
    1.   $ wepy init standard
    WePY 开发百度小程序示例

    第三步: 安装依赖

    进入项目目录，安装依赖
    1.   $ npm install

    第四步: 构建目标代码

    注：去掉 —watch 将不会监听文件修改，并会对代码进行压缩打包
    1.   仅限全局安装    $ wepy build -o baidu --watch    $ wepy build -o baidu

    第五步: 开发者工具预览

    dist目录，就可以在开发者工具中预览项目。

    Okam

    第一步：安装 CLI 工具

  • Node >=8 && NPM >= 3），具体安装可以到官网下载； -
    1. npm install okam-cli -g

    第二步：初始化项目

    1. okam init my-projectcd my-projectnpm install

    第三步：构建目标代码

    第四步: 开发者工具打开项目

    dist 目录，进行调试、预览、上传，方式二：使用 2.8.1 及以上版本开发者工具打开项目目录，同时进行以下配置，配置完成后，就可以在开发者工具中开发、调试、预览、上传。
  • npm run prod
  • project.swan.json文件中增加配置 "smartProgramRoot": "dist"（如果已有此配置，请忽略）
    • npm run dev 并勾选 异步执行
  • npm run prod
  • Okam 使用，可以参考 Okam 文档。