云社区 博客 博客详情
云社区 博客 博客详情

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

Welink小达人 发表于 2020-04-13 14:46:54 04-13 14:46
Welink小达人 发表于 2020-04-13 14:46:54 2020/04/13
1
1

【摘要】 微码开发入门 - 微码应用架构分析

微码应用架构分析

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

  • 在开始前我们需要弄清楚自己需要开发一个什么样的应用,以及需要什么样的技术支撑。众所周知,前端的各种框架五花八门,大型的有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 )

    r1.png

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

    r4.png

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

    download_demo.png


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


    npm_install.png


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


    npm_installed.png


二、模板结构

在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文件:

index.png

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


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



登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 1
点赞
分享文章到微博
分享文章到朋友圈

评论 (1)


Welink小达人

1楼2020-04-13 14:48:08
微码开发入门 - 微码应用架构分析
0/1000
评论

登录后可评论,请 登录注册

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消