开发工具使用说明

1 概述

YonStudio是为开发者提供的移动低代码集成开发工具，基于业界领先的代码编辑器——VSCode深度定制。在包含VSCode已有的专业编码功能的基础上，内置扩展了可视化编程方式，提供拖拉拽快速构建页面功能，可快速生成专业级源代码。

YonStudio提供日志控制台、页面实时预览、WIFI真机同步调试等诸多开发功能，并与YonBIP移动开发控制台互通，支持移动打包、移动插件管理等云端功能帮助开发者轻松构建多端应用。一套代码，多端编译，为YonBIP开发者提供开发-调试-预览-发布完整闭环的移动开发体验。

2 下载

2.1 下载路径（一）：

点击应用详情页的「YonStudio开发工具下载」按钮下载YonStudio开发工具

应用详情页的页面访问路径如下：

  • 通过用友开发者中心 - 开发者工作台
  • 点击顶部左侧的四叶草图标，选择云平台 - 低代码开发平台 - 移动开发服务 - 移动开发控制台
  • 在应用列表选择具体应用，即可进入应用详情页

应用详情页

2.2 下载路径（二）：

访问https://developer.yonyou.com/product/appdevelopment/appdriven#download，跳转下载页面

产品下载页2

3 YonStudio 详细说明

本章将向您详细介绍YonStudio的相关功能和使用流程。

整体预览

注意事项

登录

创建项目

项目导入

创建模版文件

stml编译

移动打包

自定义Loader

WIFI同步

WIFI自动同步

修改WIFI端口号

USB同步

html和stml实时预览

WIFI真机预览

代码提示

中英文切换

在微信开发者工具预览

增量编译微信小程序

编译为微信小程序【全量】

代码管理

整体预览

index

注意事项

  • Mac版运行的时候，YonStudio的存放位置不要放在Downloads文件夹下，推荐放到应用程序文件夹下。

  • 一些跟平台相关的操作在YonStudio上需要验证登录。YonStudio客户端可以和云端同时在线，但是多个YonStudio不允许一个账号同时在线。

  • 更新需知

    • Mac上如果有更新提示，点击重启更新后，只需等待重启即可，无需手动重启。因为是全量更新，重启时需要等待大约30秒左右。

  • WIFI/USB同步需知

    • 在每次打开YonStudio后，在进行同步之前最好先进行全量同步，之后再进行增量同步。

登录

点击侧边栏用户区域--登录，弹出登录界面，输入用户名，密码登录，如图所示

login

创建项目

点击菜单栏项目-新建项目，在创建项目界面按照内容提示输入项目信息，如图所示

createapp

项目导入

菜单栏选择项目-->导入项目，会弹出项目来源的复选框 或 点击主页的导入项目 快捷按钮

import-1

import-2

  • 本地导入: 导入时会校验导入项目的合法性
  • 云端检出: 从平台云端导入项目

注： 开发者用YonStudio导入一个项目后，如果这个项目不是模板详情中介绍的应用类型，此时，需要做以下修改：1、打开项目所在的路径，找到.yonstudio目录(此目录为隐藏文件夹)，用文本编辑器打开.project文件；2、修改其中的apptype字段(native-app表示Native App, mx-app表示MX APP, cli-app表示App Clip)。

创建模版文件

YonStudio上可以创建一些模版文件，比如html，stml，js，css，json等文件

  • 在项目根目录上右键--新建，可以创建html，js，css，json文件

  • 在pages目录上右键--新建，可以创建stml，js，css文件

  • 在res目录上右键--新建，可以创建key.xml, info.plist, mainfest.xml等文件

注：选择新建类型的文件后，在弹出的输入框中只需输入文件名即可，不需要输入后缀名。

stml编译

菜单栏--编译项目功能，会编译项目下的stml文件，编译结果查看控制台输出

移动打包

在项目根目录上右键--编译--移动打包，打开移动打包界面，做相应的操作， 如图所示

compile compile

自定义Loader

在项目根目录上右键--编译--编译自定义Loader，打开自定义Loader界面，做相应的操作， 如图所示

loader

WIFI同步

  • 查看WIFI同步的IP和端口号

    • 顶部菜单 - 终端 - 设备列表，弹出复选框，选择通过WIFI连接新设备，查看IP
    • 左侧功能栏，选择真机同步按钮，也可以弹出复选框，选择通过WIFI连接新设备，查看IP
    • 注：连接时WIFI设备要和YonStudio连接在同一个WIFI下

wifi-qr

  • 在项目名上右键，会弹出WIFI全量和增量同步菜单，做相应的操作(同步所有WIFI设备)， 如图所示

compile

  • 若有WIFI设备连接时，顶部菜单 - 终端 - 设备列表，会弹出所连接的WIFI设备，选择相应的设备进行同步

wifi-device

  • 如有WIFI设备连接时，选择左侧功能栏--真机同步按钮，会弹出所连接的WIFI设备，选择相应的设备进行同步

  • 注1:如果项目中有stml文件，YonStudio会先编译stml文件

  • 注2:进行指定设备同步时，会有相关的标记做指示，如图所示:

    • (1) 相关设备前有WIFI标记，表示该设备处于WIFI连接状态；
    • (2) 相关设备前有USB标识，标识该设备处于USB连接状态；
    • (3) 同一个设备既可以处于WIFI连接状态，也可以处于USB连接状态；进行相关操作时相关的状态

usb-device

WIFI自动同步

  • 打开设置界面，依次点击 扩展--YonStudio 勾选 Auto Sync(使用之前，注意该设置的使用说明)

auto-sync

修改WIFI端口号

  • 打开设置界面，选择常用设置，修改WIFI端口号

wifi-port

USB同步

  • 在项目名上右键，会弹出USB同步相关菜单，做相应的操作(同步所有USB设备，注：USB同步不支持iOS设备)， 如图所示

compile

  • 如有USB设备连接时，顶部菜单 - 终端 - 设备列表，会弹出所连接的USB设备，选择相应的设备进行同步

usb-device

  • 如有USB设备连接时，选择左侧功能栏--真机同步按钮，会弹出所连接的USB设备，选择相应的设备进行同步

  • 注1:如果项目中有stml文件，YonStudio会先编译stml文件

  • 注2:进行指定设备同步时，会有相关的标记做指示，如图所示:

    • (1) 相关设备前有WIFI标记，表示该设备处于WIFI连接状态；
    • (2) 相关设备前有USB标识，标识该设备处于USB连接状态；
    • (3) 同一个设备既可以处于WIFI连接状态，也可以处于USB连接状态；进行相关操作时相关的状态

usb-device

html和stml实时预览

在html或stml编辑页面，右键弹出实时预览菜单，预览html或stml页面(如果预览的是stml页面，YonStudio会先编译stml文件)， 如图所示

html-preview

WIFI真机预览

在html或stml编辑页面，右键弹出WIFI真机实时预览菜单，同步在WIFI设备上预览html或stml页面(如果预览的是stml页面，YonStudio会先编译stml文件)

代码提示

YonStudio采用两种方式的代码提示

  • 1、代码片段: YonStudio内置了api对象和几乎所有平台模块的代码片段

    • api对象下的代码片段输入方式:输入api.接口名，选择相应的接口片段，回车即可完成一段代码的自动输入

    code1

    code2

    • 模块代码片段输入方式：输入 模块名.接口名 会有相关的代码提示，选择相应的接口， 回车即可完成一段代码的自动输入

  • 2、js代码提示: YonStudio将api对象和几乎所有平台模块都做了js封装

    • 输入对象名，即可调出这个对象下的所有接口，选择相应的接口，回车，输入左括弧，自动完成右括弧的输入，同时，如果这个接口有参数时，也可提示这个接口的参数

    code3

    code4

中英文切换

方法一

打开命令面板，输入:Configure Display Language,点击,选择相应的语言

language1

language2

方法二

点击YonStudio左下角的设置按钮，选择显示语言菜单，选择相应的语言

language1

language2

在微信开发者工具预览

若开发的项目为MX类型的APP，项目根目录下右键，选择微信小程序开发，点击在微信开发者工具预览子菜单，YonStudio会先弹出输入微信小程序的appid的输入框(可以使用默认值，但是为了方便在微信开发者工具中调试，建议换成开发者自己在微信后台申请的appid)，输入完成后，YonStudio会将当前项目编译成微信小程序，并在当前项目的根目录下生成out-mp目录存放编译后的小程序代码。

注意：

  • 1、这一步的操作前提是本地需要安装微信开发者工具
  • 2、在Windows平台下，第一次操作时需要开发者手动选择微信开发者工具安装的根目录，如果后期安装路径有更改，需要修改安装路径，具体操作为：打开YonStudio设置界面 -- 常用配置 -- 找到微信开发者工具的根目录并配置

wx-devtools

增量编译微信小程序

经过上一步的操作，会打开本地安装的微信开发者工具。如果项目中stml文件有改动，可以点击增量编译微信小程序，YonStudio会增量编译当前项目.编译完成后，微信开发者工具有监听文件的更改的功能，会自动加载项目。

编译为微信小程序【全量】

这一步的操作和增量编译微信小程序主要的区别是:

  • 1、会全量编译当前项目下的所有stml文件
  • 2、如果当项目中有非stml文件的改动，会影响到小程序的代码，应该进行这一步操作
  • 3、这一步编译出来的小程序代码可用着release版本

tips1：

以上三步是调试小程序的主要功能，一般的操作流程应该是：

  • 1、在微信开发者工具预览：这一步主要是用来确认微信小程序的appid和打开微信开发者工具
  • 2、增量编译微信小程序 | 编译为微信小程序【全量】：这一步增量或全量编译当前项目，微信开发者工具会自动同步文件的更改

tips2：

  • 编译小程序功能只在Windows和Mac平台下生效

  • 运行微信开发者工具，需要微信开发者工具处于登录状态

  • 启动微信开发者工具，需要打开服务端口，具体操作步骤为：打开微信开发者工具 -- 设置 -- 安全设置 -- 安全 -- 开启服务端口

wx-port

代码管理

在项目根目录或任意文件夹上右键，可显示代码管理菜单，如图所示

loader

上传代码包

在代码管理菜单中点击上传代码包子菜单，打开上传代码包界面，如图所示

loader

点击上传按钮,当前项目将被打包成zip压缩包上传至工作台。

上传云修复包

在代码管理菜单中点击上传云修复包子菜单，打开上传云修复包界面，如图所示

loader

可以选择需要上传的文件，点击上传按钮，将所选文件打包成云修复包上传至工作台。

注：上传云修复包的前提是该项目需要打过一次正式版的安装包，否则会提示上传失败。

导出代码包

在代码管理菜单中点击导出代码包子菜单，选择要保存的路径，可将当前项目打包压缩后保存在本地。

导出云修复包

在代码管理菜单中点击导出云修复包子菜单，选择要保存的文件和路径，可将当前项目的云修复包压缩后保存在本地。

是否仍需要帮助？ 请保持联络！
最后更新于 2024/04/24