微信小程序开发工具的目录结构

1、四个基本文件(由四个文件最终编译成一个完整页面)

1  .js文件:页面脚本文件,存放页面数据、事件处理函数等。——处理用户操作

  •  app.js文件:整个项目的入口文件,通过调用App()函数启动项目。
  •  页面.js文件:页面入口文件,调用Page()函数,创建并运行页面。
  • 普通.js文件:普通功能模块文件,用来封装公共的函数或属性供页面使用。

2  .json文件:当前页面配置文件,配置窗口的外观、表现等。 

3 .wxml文件:页面的模板结构文件。(WXML模板类网页HTML)

4 .wxss文件:当前页面的样式表文件。(WXSS:一套样式语言,用于描述WXML局部或全局的组件样式,类网页CSS)

 

 


2、一个项目的基本目录结构

微信小程序开发工具的目录结构_第1张图片

 

  • pages:【文件夹】存放所有小程序的页面

    • index文件—首页文件

    • logs文件—日志文件

  • utils:【文件夹】用来存放工具性质模块[如:格式化时间的自定义模块]

  • app.js:项目入口文件

  • app.json:项目全局配置文件 

    • pages——页面路径[在此输入“pages/list/list”则工具自动创建新页面、替换其中数组的顺序可修改项目的首页]

    • window——全局定义所有页面样式

    • style——全局定义小程序组件所使用的样本

    • sitemapLocation——指明sitemap.json的位置

微信小程序开发工具的目录结构_第2张图片

 

  • app.wxss:项目全局样式文件

  • project.config.json:项目的配置文件

    • setting——保存编译相关的配置【与右侧的本地设置同步】

    • project name——项目名称 ≠ 小程序名称

    • appid——小程序账号ID

微信小程序开发工具的目录结构_第3张图片

 

  • sitemap.json:用来配置小程序及其页面是否允许被微信索引[利用“allow”或“disallow”配置当前页面是否被微信搜索]


3、宿主环境(IOS、Android)小程序是依托手机微信,小程序宿主环境包含以下四大类:

1.通信模型

通信主体:渲染层(WXML、WXSS)、逻辑层(JS脚本)

通信模型:渲染层与逻辑层之间通信、逻辑层与 第三方服务器之间通信

 2.运行机制

         启动过程:

小程序代码包本地下载——>解析app.json文件——>执行app.js入口文件,调用App()函数创建小程序实例——>渲染小程序首页——>启动完成

        页面渲染过程:

加载解析页面.json文件——>加载页面的.WXML和.WXSS——>执行页面.js文件,调用Page()函数创建页面实例——>完成渲染

3.组件(官方分为九大类组件)

视图容器、基础内容、表单组件、导航组件、媒体组件、map地图组件、canvas画布组件、开放能力、无障碍访问

4.API

  • 事件监听API:以on开头,用来监听某些事件触发。
  • 同步API:以Sync结尾,其执行结果可以通过函数返回值直接获取,若执行出错会抛出异常。
  • 异步API:类似于jQuery中$.ajax(options)函数,需要通过success、fail、complete接收调用结果。

 

你可能感兴趣的:(小程序,微信小程序,编辑器,小程序)