安装开发工具指引

支持在Windows上开发或者在Mac开发。

在使用MicroAppTool前，我们需要安装node以及开发工具。

node安装

我们推荐使用node 6.10.0，node下载地址：

1、 https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x64.msi Windows64位下载

2、 https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0-x86.msi Windows32位下载

3、 https://npm.taobao.org/mirrors/node/v6.10.0/node-v6.10.0.pkg macOS系统下载

安装成功后，windows电脑可以通过cmd，macOS可以通过终端输入 node -v 来验证是否安装成功。安装成功会弹出如图所示：

开发工具下载

进入官网进行下载。Visual Studio Code下载地址：https://code.visualstudio.com

安装插件

使用vscode进行开发，需要下载安装插件MicroAppTool。如下图：

安装完成后，我们就可以使用这个插件进行开发MicroApp应用了。

本插件为MicroApp 的应用的开发环境，可以初始化工程、新建页面，导出工程，打包，也可以运行及调试。

部分功能菜单截图如下：

如何创建第一个应用

新建一个文件夹，并打开它。如下图：

上图是创建了一个test的文件夹，并且打开了它

登录开放开发平台

点击左下角开放开发平台的登录按钮，在登录页面输入账号信息，并且登录。如下图：

上图中登录时需要开发者首先在发放平台进行注册并且有服务商，否则无法创建应用。

在登录页面同时需要填写注册的开放开发平台的url地址。

创建应用

在未创建应用的情况下，开发者可以在资源管理器区域右键，查看此时的菜单，如下图：

如果点击创建demo工程，将直接展示加载demo工程；如果点击创建基础工程，则会先显示选择应用页面，再显示选择应用页面，选择完应用后才会加载基础工程。如果在未登录状态下，则会先进入登录页面，再进行之后的流程。如下图展示：

上图中最后的一张图即为初始化的默认工程文件及默认的菜单。

微应用开发指南

启动服务

开发者开发过程中，右键点击菜单编译并启动开发服务后，默认访问地址为：http://localhost:8080，如下图：

导出工程

开发者右键点击菜单编译并导出web工程，代码编译后输出dist文件夹，如下图：

打包

在导出的web工程dist文件夹上，右键点击菜单打包，代码将压缩成dist.zip文件输出到output文件夹中。如下图：

查看应用信息

开发者右键点击菜单应用信息，可以查看当前应用工程关联的应用信息，如果未关联或者应用在开放开发平台已删除，则会跳转到变更应用页面进行重新关联操作。如下图：

点击上传中的更换应用信息按钮，可以切换关联的应用。

微应用方法

appcan.loginAuth(OBJECT，CALLBACK) 获取code

获取应用授权code。

OBJECT参数说明

参数	类型	必填	说明
scope	String	是	snsapi_userinfo

clientId|String|是|服务id

CALLBACK 回调函数，返回code值

appcan.openMicroApp(OBJECT)

OBJECT 调取应用的信息

appcan.IS_APP 判断当前设备是否为app

示例：

    if(appcan.IS_APP) console.log('当前设备是app')

appcan.IS_ANDROID 判断当前设备是否为android

示例：

    if(appcan.IS_ANDROID) console.log('当前设备是android')

appcan.IS_IOS 判断当前设备是否为ios

示例：

    if(appcan.IS_IOS) console.log('当前设备是ios')

appcan.showMicroAppBackButton(OBJECT) 是否显示左上角返回按钮

OBJECT参数说明

参数	类型	必填
backButton	boole	是

appcan.closeCurrentMicroApp() 关闭当前应用

自定义上报事件

appcan.setEvent(OBJECT)

设置自定义上报事件

OBJECT参数说明：

参数名	类型	必填	说明
eventId	String	是	注册的自定义事件ID
attri	Object	是	上报的自定义参数

示例代码：

    appcan.setEvent({
        eventId: 'loginEventId', // 事件ID
        attri: {
            time: '2019',
            username: 'zhangsan'
        } // 自定义参数
    })

app配置

dist目录的app.json文件中，通过JS部分的config来对App进行配置，设置APP的导航条、标题、窗口背景色。等。以下是一个包含了常用配置选项的 config

注：AppCanUI只支持十六进制颜色值（UI组件，API插件参数），如"#ff00ff"；指定类型的除外如：navigationBarTextStyle

{
    "config" : {
        "window": {
        "navigationBarTitleText": "MicroAppTool官方组件展示",
        "navigationBarBackgroundColor": "#000000",
        "navigationBarTextStyle": "black",
        "pullDownRefresh": false
        },
        "tabbar": {
        "showTabbar": false,
        "color": "#3399FF",
        "selectedColor": "#000000",
        "borderStyle": "black",
        "backgroudColor": "#ffffff",
        "list": [
            {
            "pagePath": "/",
            "iconPath": "./static/1.png",
            "selecedIconPath": "./static/1-2.png",
            "text": "组件"
            },
            {
            "pagePath": "/port",
            "iconPath": "./static/2.png",
            "selecedIconPath": "./static/2-2.png",
            "text": "接口"
            }
        ]
        }
    }
}

属性	类型	默认值	描述
navigationBarTitleText	String		导航栏标题文字内容。当其他页面自身设置了标题栏文字则以页面设置的优先。
navigationStyle	String	default	导航栏样式，仅支持 default/custom。custom 模式可自定义导航栏。
navigationBarBackgroundColor	HexColor		导航栏背景颜色，如"#000000"
navigationBarBackgroundGradient	String		导航栏渐变背景色，如"linear-gradient(45deg, #508EFF, #37B9FC)"
navigationBarBorderColor	String		导航栏下边框的颜色，例如black、white或者 rgba(231, 231, 231, 0.6)
navigationBarTextStyle	String	white	状态栏文字颜色和导航栏文字颜色，只支持black、white
backgroundColor	HexColor	#ffffff	窗口的背景色
scrollType	String	div	默认全局为区域滚动，如果设置为 body则全局为整页滚动
delay	Boolean	true	app中页面内容是否延迟加载，默认是采用延迟加载，这样的效果就是切换界面时可以让页面先及时的切入再加载页面内容，对于安卓提升操作体验很明显。如果设置false，点击切换时，会先在后台加载好页面再切入进来。
title	String		web端网页标题
pullDownRefresh	String	true	是否全局开启下拉刷新

dist目录的config.xml文件中，通过xml格式来配置app的一些基本信息

1、 appId 配置app的id

2、 src 配置 app 的图标

3、 src 配置真机同步过去的入口，可以是网络路径，也可以是本机起的服务如：http://0.0.0.0:8080, utf-8格式

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<widget appId="C0000000000001" channelCode="0000" height="480" pid="" sreensize="4.5" version="00.00.0000" viewmode="application" widgetId="" width="320">
    
    <name>demo111</name>
    <description/>
    <author email=""> </author>
    <icon src="./static/120.png"/>
    <license href=""/>
    <content encoding="utf-8" src="index.html"/>
    <updateurl/>
    <logserverip/>
    <showmyspace>false</showmyspace>
    <obfuscation>true</obfuscation>
    <bgcolor>#fefefe</bgcolor>
    <orientation>1</orientation>
    <debug enable="true" verbose="true">true</debug>
    <partobfuscation>false</partobfuscation>
    </widget>

屏幕适配

设计图尺寸

开发pc端应用时，一般需要显示多大图，就提供多大的图，由于手机的像素比非常高，会导致图片变的模糊。所以移动端开发一般遵循2倍图或3倍图规范。使用ac-ui时，设计图的标准可以是2倍图原则：以iphone6的尺寸为参考。计算在iphone6中正常显示尺寸的尺寸，然后乘以2，就是实际需要的尺寸。在iPhone6 上，屏幕宽度为375px，共有750个物理像素，设计图为二倍图，设计时出750*1334的设计稿。

尺寸单位

rem：我们可以采用rem作为固定大小区域的单位，使用ac-ui时，默认在iPhone6（屏幕宽度为375px）中 1rem = 20px，在设计稿的二倍图7501334中，1rem = 40px，例如：设计稿（7501334）中一图片的高度和宽度均为400px，那么这个图片的宽高均为10rem

rpx：可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。此单位为微信小程序单位，为了适配可以使用这个单位，替换rem。（非小程序运行，需要loader进行解析）

less使用

ac-ui使用Less作为样式处理语言。Less在 CSS 的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了 CSS 的编写，并且降低了 CSS 的维护成本。你可以在网上找到关于Less的很多教程。

viewport

ac-ui中已经处理了viewport，在html中可以不需要增加viewport

tips：

1、在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况；

2、ac-ui中的rpx本质是被编译器转为了rem进行适配，所以可以不用直接在less中使用rem；

3、rpx只适合于大块的尺寸设置，不适合边框、圆角等细微设置，这种细微设置还是要使用px；

4、rpx只能写在less文件里，不能写在内联样式里（style=xxx这种）。