微信小程序基础

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()创建页面实例
  • 页面渲染完成

最后

以上就是诚心豌豆为你收集整理的微信小程序 - 01_小程序基础（项目结构、宿主环境）微信小程序基础01 项目结构02 宿主环境的全部内容，希望文章能够帮你解决微信小程序 - 01_小程序基础（项目结构、宿主环境）微信小程序基础01 项目结构02 宿主环境所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。