360小程序的目录结构和代码构成

发布时间:2023年03月22日 浏览数量:227

小程序目录结构为:

├─ app.json            // 窗口相关配置
 ├─ index.html        // 小程序页面
 └─ assets               // 资源目录
    ├─ css                // 样式表
    ├─ img               // 图片
    └─ js                // js目录

注:小程序里面所有内部跳转的页面均需要是本地html格式的页面。 

360小程序代码构成

使用360浏览器的开发者模式,能够直接在一个空文件夹下创建一个小程序Demo,可以通过此Demo查看小程序的代码结构。

360小程序代码由4种基础文件构成:

  1. json后缀的JSON配置文件
  2. html后缀的HTML页面文件
  3. css后缀的CSS样式文件
  4. js后缀的JS脚本逻辑文件

app.json——小程序全局配置

app.json是当前小程序的全局配置,目前已提供为小程序配置窗口相关内容的能力。Demo项目里边的app.json配置内容如下:

{
  "window": {
    "enableLargeWindow": false,
    "showRefreshButton": false,
    "windowWidth": 1138,
    "windowHeight": 640,
    "minWindowWidth": 400,
    "minWindowHeight": 400,
    "enableResize": true
  }
}

字段内容解释如下:

属性 类型 说明 默认值 是否必填
enableLargeWindow boolean 是否全部页面支持切换至大窗口,支持则在窗口顶部显示切换按钮 false
showRefreshButton boolean 是否显示刷新按钮,false为不显示,true为显示 false
windowWidth number 默认大窗口的尺寸-宽度 1138
windowHeight number 默认大窗口的尺寸-高度 640
minWindowWidth number 大窗口最小尺寸-宽度 400
minWindowHeight number 大窗口最小尺寸-高度 400
enableResize boolean 是否支持用户手动拖动窗口边线改变窗口大小 true
HTML+CSS+JS

目前,360小程序采用标准HTML、CSS、JS开发,和网页编程一样:使用HTML定义网页的内容使用CSS规定网页的布局使用JavaScript对网页行为进行编程

开发者可使用新版本360安全浏览器(10.1.1889.0及以上版本)体验下方的小程序Demo