【技术教程】【微码开发】微码开发入门 - 微码应用架构分析

微码应用架构分析

• 在前面的文章中我们已经搭建好了开发环境，接下来我们需要熟悉下微码模板的目录结构。

• 在开始前我们需要弄清楚自己需要开发一个什么样的应用，以及需要什么样的技术支撑。众所周知，前端的各种框架五花八门，大型的有AngularJs，稍微轻量点的有ReactJs和VueJs。如果你对这些熟悉，那么你就可以下载对应的模板下来进行开发。如果你不熟悉这些框架，或者说你只会写普通的Html+Css+Js，没关系，你可以下载基础模板，CloudLink官方提供多种模板下载，打开 (https://open.welink.huaweicloud.com/wecode/docs/dev/mode/modes_cloud.html?v=1547690385) 去下载。

一、下载和导入模板

1. 这里我们使用基础模板来看下具体的目录结构，进入 我的应用 ( https://open.welink.huaweicloud.com/wecode/myapp/list.html )

   
   

2. 点击具体的应用进入详情，在最下面可以看到“开发模板下载”，点击“基础模板下载”

   
   

3. 将下载下来的模板压缩包解压出来

   
   

   
   

4. 打开VSCode，选择“文件 > 打开文件夹”，选择刚刚解压后的文件夹打开。

   
   

   

   
   这时 WeCode 工具已经开始安装项目依赖了，也就是npm在安装各种依赖包。依赖安装完成后会出现如下界面，wecode tools也会出现工具菜单，若安装依赖失败，请检查npm源地址或网络情况后再试。

   
   

   
   

二、模板结构

在VSCode的资源管理器可以看到打开的基础模板，有三个文件夹以及四个文件，引用项目根目录中readme文件的注解是这样的：

  |—— build
  │   ├── common // jsapi文件目录
  │   └── apps   // 打包生成的app目录
  |—— public // 公用文件。不经过webpack处理，需要在html引用
  |—— server.config.js // 开发环境设置，可修项目名称、端口号等
  ├── src // 源代码目录
  │   ├── desc // desc文件
  │   ├── html // html文件
  │   ├── app.js // 公用js
  │   ├── app.css // 公用样式
  │   └── app.json // 路由配置文件
  ├── .eslintrc // eslint配置文件  
  ├── package.json // 包含 npm 依赖包
  ├── plugin.json // 配置文件
  └── webpack.config.js // webpack配置文件

可以发现，app.json是用来配置路由的，也就是说我们要新添加页面则需要在这里配置，并且在src目录下新建相应的文件夹。进入src/html目录下，打开index.html文件：

是不是很熟悉？对，没错！这就是大家都熟悉的标准html+css+js模式，接下来的开发我们基本上只需要关注这里就可以了，也就是在src目录下开发这些静态文件。desc目录是官方给的一个示例路由，在app.json里面有对应的配置：

  {
    "pages": [
      "html/index",
      "desc/index"
    ]
  }