应用开发快速入门

Appearance

手机JS应用编程 ​

进入在线编程 ​

在线编程环境codeserver ​
  • 将代码编写、调试、编译、运行以及其他相关操作都集成在一起，为开发者提供了一个统一的开发平台。
  • 不同用户之间：用户空间独立，租赁方式共享编程环境。
进入在线编程 ​

在工作台选择打开应用，进入在线编程环境 * 第1步：进入工作台 > 应用视图 > 项目应用 或 个人应用 * 第2步：调整筛选项筛选应用，或输入应用的中文名或英文名搜索应用. * 第3步：从列表中选择目标电视应用（类型为rn-mobile），点击vscode图标，进入codeserver。 alt text

代码仓库构成 ​

开发者打开应用后，codeserver后会自动检出显示该应用的源码仓和发布仓。

  • 1个源码仓
    • index.js 应用入口文件
    • package.json 包依赖配置文件
    • debug.py 真机预览脚本
    • release.sh 编译控制脚本
  • 1个发布仓
    • baselines.yml 发布仓基线
  • 截图说明： alt text

保存提交代码 ​

  • 第1步：保存修改后的源代码。有以下两种操作方式：
    • 鼠标焦点离开编辑的文件窗口时自动保存。
    • 用户修改代码过程中按Ctrl+s手动保存。
  • 第2步：在源码仓先后执行下面两条命令，将代码推送到远程仓库
    1. git tag v1.0.xx
    2. gita push origin v1.0.xx
      补充说明：v1.0来源于发布仓baselines.yml中jssource指定的tag（如下注释）， xx为从1开始递增的整数。
      下方为baselines.yml中截取的部分内容块:
    source:
  - url: "${REPO_URL}/git/jsapp_dev/jsapp_tools.git"
    tag: "v1.0"
    name: "toolkit"
  - url: "${REPO_URL}/git/mobileProject1/mb_simple_app.git"
    tag: "v1.0" //v1.0来自jssource指定的tag
    name: "jssource"

真机预览调试 ​

开发人员可以通过手机真机预览应用，进行代码的开发调试。

  • 第1步：在源码仓执行install命令安装package.json中指定的依赖包

    • install命令格式

      //install命令
npm install  --legacy-peer-deps

    • 操作截图 alt text

    • 安装依赖包完成结果提示 alt text

  • 第2步：在源码仓执行yarn start 启动Metro Bundler服务
    Metro Bundler是一个React Native的JavaScript打包器。
    运行yarn start时会启动Metro Bundler服务, 它会监听项目中的文件变化; 同时会启动一个http服务器, 使模拟器或真机上可以预览应用。

alt text

  • 第3步：源码仓打开新的终端执行yarn debug启动手机真机预览
    执行命令后，终端会打印输出： 真机预览地址(服务器代理后的http地址)、真机预览启动结果.
    alt text

  • 第4步：手机下载安装调试用的metro版APP

    • ios手机:
    1. 在浏览器上打开metro版APP的安装地址
    //ios手机 metor版APP下载地址
https://testflight.apple.com/join/671O8gAQ
    1. 在显示的页面上打开testflight(如果没有安装testflight则根据提示下载testflight), 从“开始测试”进入安装“爱家宝-开发"
    • andriod手机：
    1. 使用浏览器打开metro版APP的安装地址，下载安装APP
    //andriod手机 metor版APP下载地址
https://ipanelcloud2.ipanel.cn:50443/iapp/static/app/android/debug/app-debug.apk

  • 第5步：打开安装好的metro版APP，摇一摇进入开发者模式，配置好真机预览地址

    • ios手机操作截图 alt text

    • andriod手机操作截图 alt text

  • 第6步：手机上重新打开metro版APP进行预览

    • 手机预览效果 支持独立页面、导航页面两种预览方式
      alt text
    • 手机预览访问的文件
    andriod访问: index.andriod.js
ios访问:  index.ios.js
    • 预览时codeserver metro服务的打印 alt text
    • 真机预览中，保存修改的应用代码时，电视会实时刷新显示

编译打包推送 ​

  • 操作: 提交代码后，在源码仓执行yarn release命令，进行编译打包推送 alt text
  • 命令执行过程打印说明:
    1. rek u -- 检出发布仓基线baselines.yml中source指定的源 alt text
    2. rek b -- 安装依赖进行编译
      alt textalt text
    3. rek pack -- 打包 alt text
    4. rek push -- 推送发布到远程仓库 alt text