网站响应速度验收,佛山网站建设公司有哪些,郑州网站备案,wordpress rtmp文章目录 项目组成介绍项目的基本组成结构小程序页面的组成部分JSON配置文件的作用app.json文件project.config.json文件sitemap.json文件页面的 .json 配置文件新建小程序页面修改项目首页 XWML模板XWML 和 HTML 的区别 WXSS样式WXSS 和 CSS 的区别 .js文件 项目组成介绍
项目… 文章目录 项目组成介绍项目的基本组成结构小程序页面的组成部分JSON配置文件的作用app.json文件project.config.json文件sitemap.json文件页面的 .json 配置文件新建小程序页面修改项目首页 XWML模板XWML 和 HTML 的区别 WXSS样式WXSS 和 CSS 的区别 .js文件 项目组成介绍
项目的基本组成结构 pages 用来存放所有小程序的页面utils 用来存放工具性质的模块例如格式化时间的自定义模块app.js 小程序项目的入口文件app.json 小程序项目的全局配置文件app.wxss 小程序项目的全局样式文件project.config.json 项目的配置文件sitemap.json 用来配置小程序及其页面是否允许被微信索引
小程序页面的组成部分
小程序官方建议把所有小程序的页面都存放在 pages 目录中以单独的文件夹存在如图所示 其中每个页面由 4个基本文件组成它们分别是
.js 文件页面的脚本文件存放页面的数据、事件处理函数等json 文件当前页面的配置文件配置窗口的外观、表现等.wxml文件页面的模板结构文件.wxss 文件当前页面的样式表文件
JSON配置文件的作用
JSON 是一种数据格式在实际开发中JSON 总是以配置文件的形式出现。小程序项目中也不例外通过不同的 .json 配置文件可以对小程序项目进行不同级别的配置。
小程序项目中有 4种 json 配置文件分别是:
项目根目录中的 app.json 配置文件项目根目录中的 project.config.json 配置文件项目根目录中的 sitemap.json 配置文件每个页面文件夹中的 .json 配置文件
app.json文件
app.json 是当前小程序的全局配置包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等。
Demo 项目里边的 app.json 配置内容如下: 简单了解下这 4个配置项的作用
pages用来记录当前小程序所有页面的路径window全局定义小程序所有页面的背景色、文字颜色等style全局定义小程序组件所使用的样式版本。“style”: “V2” 表示默认使用最新样式将其删除后表示使用旧样式版本。sitemapLocation用来指明 sitemap.json 的位置
project.config.json文件
project.config.ison 是项目配置文件用来记录我们对小程序开发工具所做的个性化配置例如
setting 中保存了编译相关的配置projectname 中保存的是项目名称appid 中保存的是小程序的账号 ID
在“详情”的“本地设置”中进行配置同时也会体现到 project.config.json文件中
例如当前 setting 中的 “es6”: true。 在 “详情-本地设置” 中取消勾选 “将JS编译成ES5”就会看到 “es6” 的值变为 false。
sitemap.json文件
微信现已开放小程序内搜索效果类似于PC网页的 SE0。sitemap.json 文件用来配置小程序页面是否允许微信索引。当开发者允许微信索引时微信会通过爬虫的形式为小程序的页面内容建立索引。当用户的搜索关键字和页面的索引匹配成功的时候小程序的页面将可能展示在搜索结果中。 注意sitemap 的索引提示是默认开启的如需要关闭 sitemap 的索引提示可在小程序项目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 为 false。
若 setting 中没有该字段可自行添加。 页面的 .json 配置文件
小程序中的每一个页面可以使用 .json 文件来对本页面的窗口外观进行配置页面中的配置项会覆盖 app.json 的 window 中相同的配置项。例如
app.json 中的配置项中其上部分的北京颜色为白色 在 index.json 文件中设置其上部分的背景颜色为绿色。
新建小程序页面
只需要在 app.json -pages 中新增页面的存放路径小程序开发者工具即可帮我们自动创建对应的页面文件。如图所示 修改项目首页
只需要调整 app.json -pages 数组中页面路径的前后顺序即可修改项目的首页。小程序会把排在第一位的页面当作项目首页进行渲染如图所示 XWML模板
WXML (WeiXin Markup Language) 是小程序框架设计的一套标签语言用来构建小程序页面的结构其作用类似于网页开发中的 HTML。
XWML 和 HTML 的区别
标签名称不同 HTML(div,span,img,a)WXML(view, text,image, navigator) 属性节点不同 a href“#”超链接/anavigator url“/pages/home/home”/navigator 提供了类似于 Vue 中的模板语法 数据绑定列表渲染条件渲染
WXSS样式
WXSS (WeiXin Style Sheets) 是一套样式语言用于描述 WXML 的组件样式类似于网页开发中的 CSS。
WXSS 和 CSS 的区别
新增了 rpx 尺寸单位 CSS 中需要手动进行像素单位换算例如remWXSS 在底层支持新的尺寸单位rpx在不同大小的屏幕上小程序会自动进行换算 提供了全局的样式和局部样式 项目根目录中的 app.wxss 会作用于所有小程序页面局部页面的 .wxss 样式仅对当前页面生效 WXSS 仅支持部分 CSS 选择器 .class 和 #idelement并集选择器、后代选择器::after和::before 等伪类选择器
.js文件
一个项目仅仅提供界面展示是不够的在小程序中我们通过 .js 文件来处理用户的操作。例如响应用户的点击、获取用户的位置等等。
小程序中的 JS 文件分为三大类分别是:
app.js 是整个小程序项目的入口文件通过调用 App() 函数来启动整个小程序 页面的 .js 文件 是页面的入口文件通过调用 Page() 函数来创建并运行页面 普通的 .js 文件 是普通的功能模块文件用来封装公共的函数或属性供页面使用
