小程序基本组成结构

努力学习的阿苗
324 阅读5分钟

小程序

一、项目的基本组成结构

  1. pages 文件夹用来存放所有小程序的页面
  2. utils 文件夹用来存放工具性质的模块
  3. app.js 是小程序项目的入口文件。
  4. app.json 是小程序项目全局配置文件
  5. app.wxss 全局样式文件
  6. project.config.json 项目的配置文件
  7. sitemap.json 配置小程序及其页面是否允许被微信索引

1.app.json文件

当前小程序的全局配置，包括了小程序的所有页面路径，窗口外观，界面表现，底部tab等。通过调用APP（）函数来启动整个小程序

文件中的内配置项

  1. pages记录当前小程序所有页面的路径
  2. window全局定义小程序所有页面的背景色、文字颜色等
  3. tabBar 设置小程序底部的tabBar效果
  4. style全局定义小程序组件所使用的样式版本
  5. sitemapLocation用来指明sitemap.json的位置
8.jpg

2.project.config.json文件

项目配置文件，记录我们对小程序开发工具所做的个性化配置

  • setting配置项中保存了编辑相关的配置
  • projectname中保存是项目名称
  • appid中保存小程序的账号ID

3.setimap.json文件

索引提示是默认开启的，如果需要关闭索引提示，可在小程序配置文件project.config.json的setting中配置字段checkSiteMap为false

4.页面的.json文件配置文件

小程序中的每一个页面可以使用.json文件来对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中相同的配置项

5.页面的 .js 文件

页面的入口文件，通过调用Page（）函数创建并运行页面

WXML

全称WeiXin Markup Language，是小程序框架设计的一套标签语言，用来构建小程序的页面结构，作用类似于网页开发中的HTML

WXML和HTML的区别

  1. 标签名称不同
    • WXML：view、text、image、navigator
  2. 属性节点不同。（节点的属性不同）
  3. WXML提供了类似Vue的模板语法
    • 数据绑定
    • 列表渲染
    • 条件渲染

WXSS

全称WeiXin Style Sheets，一套样式语言，描述WXML的组件样式，类似网页开发中的CSS

WXSS和CSS的区别

  1. 新增了rpx尺寸单位
    • WXSS在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算
  2. 提供了全局样式和局部样式
    • 项目根目录中的app.wxss会作用于所有小程序页面
    • 局部页面的 .wxss 样式仅对当前页面生效
  3. WXSS仅支持部分CSS选择器
    • .class和#id
    • element 元素选择器
    • 并集选择器和后代选择器
    • ::before和::after等伪类选择器

二、小程序的宿主环境

宿主环境

指程序运行所必须的依赖环境。例如Android系统和IOS系统是两个不同的宿主环境。脱离了宿主环境的软件是没有任何意义的

小程序的宿主环境

手机微信是小程序的宿主环境，小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能，如微信扫码、微信支付、微信登录、地理定位等

小程序宿主环境包含内容

  • 通信模型
  • 运行机制
  • 组件
  • API

通信模型

通信主体

小程序中通讯的主题是渲染层和逻辑层。其中

  • WXML模板和WXSS样式工作在渲染层
  • JS脚本工作在逻辑层 1.png
小程序的通讯模型

分为两部分：

  • 渲染层和逻辑层之间的通信
    • 由微信客户端进行转发
  • 逻辑层和第三方服务器之间的通信
    • 由微信客户端进行转发 2.png

运行机制

小程序启动过程
  1. 把小程序的代码包下载到本地
  2. 解析app.json全局配置文件
  3. 执行app.js小程序入口文件，调用APP（）创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成
页面渲染过程
  1. 加载.json配置文件
  2. 加载页面的.wxml模板和.wxss样式
  3. 执行页面的.js文件，调用Page（）创建页面实例
  4. 页面渲染完成

组件

小程序中的组件也是由宿主环境提供的。官方把小程序组件非为了九大类。

API

小程序中的API是由宿主环境提供的，开发者可以方便的调用微信提供的能力，如获取用户信息，本地存储，支付功能等。

小程序官方把API分为三大类：

  1. 事件监听API
    • 特点：以 on 开头，监听某些事件的触发
    • 举例：wx.onWindowResize(function callback)监听窗口尺寸变化事件
  2. 同步API
    • 特点1：以 Sync 结尾的API都是同步API
    • 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行错误会抛出异常
    • 举例：wx.setStorageSync('key','value')向本地存储中写入内容
  3. 异步API
    • 特点：类似于JQuery中的$.ajax(sptions)函数，需要通过success、fail、complete接收调用的结果
    • 举例：wx.request()发起网络数据请求，通过success回调函数接收数据

三、小程序的版本

开发版本

graph TD
开发版本 --> 体验版本 --> 审核中的版本 -->线上版本

四、新建小程序页面

只需在app.json文件中的pages配置项中新增页面的存放路 径，小程序开发者工具即可帮我们自动创建对应的页面文件

修改项目默认首页

只需要调整app.json中pages配置项数组中页面路径的前后顺序即可修改项目的首页。小程序会把排在第一位的页面，当作项目首页进行渲染

avatar
文章
阅读
粉丝