微信小程序基础

01 项目结构

  • 其中最重要的三个文件：pages app.json app.js

  • 推荐小程序的所有页面都存放在pages目录中，以单独的文件夹形式存在

1.1 json配置文件的作用

  • 通过不同的json文件，可以对小程序项目进行不同级别的配置。

  • 小程序中有4中配置文件：

    • app.json
    • project.config.json
    • sitemap.json
    • 每个pages文件夹下的.json

1.1.2 app.json

  • 全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部tab等

1.1.3 project.config.json

  • 项目配置问价你，记录对小程序开发工具所作的个性化配置

    • setting：保存了编译相关的配置
    • projectname：项目名称
    • appid：小程序的账号id

1.1.4 sitemap.json

  • 小程序内搜索，类似于PC网页的SEO，该json用来配置小程序页面是否允许微信索引。

1.1.5 页面的json文件

  • 对本页面的窗口外观进行配置，会覆盖app.json的window中相同的配置项。

1.1.6 新增页面

  • 在app.json中的pages数组下，新增一条路径，保存文件后即可新增。

1.1.7 修改项目首页

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

1.2 wxml模板

  • 小程序框架下的标签语言，用来构建小程序页面的结构，类似于HTML。

1.2.1 wxml与html的区别

  • 标签名称不同

    • html：div, span, img, a
    • wxml: view, text, image, navigator

  • 属性节点不同

    • <a href="#">超链接</a>
    • <navigator url="/pages/home/home"></navigator>

  • 提供了类似于vue中的模板语法

    • 数据绑定
    • 列表渲染
    • 条件渲染

1.3 wxss样式

  • 微信小程序的一套样式语言，类似网页开发中的css

1.3.1 wxss和css的区别

  • 新增了rpx尺寸单位

    • css中需要手动进行像素单位的换算，如rem
    • wxss在底层支持新的尺寸单位rpx,在不同大小的屏幕上会进行自动换算

  • 提供了全局的样式和局部样式

    • 项目根目录下的app.wxss会作用于所有小程序页面
    • 局部页面的.wxss仅对当前页面生效

  • wxss仅支持部分的css选择器

    • .class #id
    • element
    • 并集选择器、后代选择器
    • ::after ::before等伪类选择器

1.4 js逻辑交互

  • 通过js文件来处理用户的操作，比如响应用户的点击、获取用户的id等

1.4.1 小程序中js文件

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

02 宿主环境

  • 宿主环境是指程序运行所必须的依赖环境。
  • 手机微信是小程序的宿主环境。

2.1 小程序宿主环境包含的内容

2.1.1 通信模型

  • wxml和wxss是渲染层
  • js是逻辑层

2.1.2 运行机制

  • 小程序启动的过程：

    • 把小程序的代码包下载到本地
    • 解析app.json全局配置文件
    • 执行app.js小程序入口文件，调用App()创建小程序实例
    • 渲染小程序首页
    • 小程序启动完成

  • 页面渲染的过程

    • 加载解析页面的json配置文件
    • 加载页面的wxml和wxss
    • 执行页面的js文件，调用Page()创建页面实例
    • 页面渲染完成
Last modification：March 6th, 2022 at 07:19 pm
© 允许规范转载