美文网首页
小程序入门到精通(二):了解小程序开发4个重要文件

小程序入门到精通(二):了解小程序开发4个重要文件

作者: 前端岚枫 | 来源:发表于2020-05-22 23:18 被阅读0次

    image.pngimage.png

    1. 小程序没有DOM对象,一切基于组件化

    2. 小程序的四个重要的文件

    • *.js ---> view逻辑 ---> javascript
    • *.wxml ---> view结构 ----> html
    • *.wxss ---> view样式 -----> css
    • *. json ----> view 数据 -----> json文件

    注意:为了方便开发者减少配置项,描述页面的四个文件必须具有相同的路径与文件名。

    2.1 WXML

    WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。WXML 充当的就是类似 HTML 的角色<br />要完整了解 WXML 语法,请参考WXML 语法参考

    2.2 WXSS

    WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。<br />WXSS 用来决定 WXML 的组件应该怎么显示。<br />为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。<br />与 CSS 相比,WXSS 扩展的特性有:

    • 尺寸单位
    • 样式导入

    2.3 json

    JSON 是一种数据格式,并不是编程语言,在小程序中,JSON扮演的静态配置的角色。

    1. 全局配置

    小程序根目录下的 app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

    1. 页面配置

    每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置,页面中配置项会覆盖 app.jsonwindow 中相同的配置项。

    1. 工具配置 project.config.json

    通常大家在使用一个工具的时候,都会针对各自喜好做一些个性化配置,例如界面颜色、编译配置等等,当你换了另外一台电脑重新安装工具的时候,你还要重新配置。<br />考虑到这点,小程序开发者工具在每个项目的根目录都会生成一个 project.config.json,你在工具上做的任何配置都会写入到这个文件,当你重新安装工具或者换电脑工作时,你只要载入同一个项目的代码包,开发者工具就自动<br />注意:<br />JSON文件都是被包裹在一个大括号中 {},通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中,在实践中,编写 JSON 的时候,忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。<br />JSON的值只能是以下几种数据格式,其他任何格式都会触发报错,例如 JavaScript 中的 undefined。

    1. 数字,包含浮点数和整数
    2. 字符串,需要包裹在双引号中
    3. Bool值,true 或者 false
    4. 数组,需要包裹在方括号中 []
    5. 对象,需要包裹在大括号中 {}
    6. Null

    还需要注意的是 JSON 文件中无法使用注释,试图添加注释将会引发报错。

    2.4 js

    一个服务仅仅只有界面展示是不够的,还需要和用户做交互:响应用户的点击、获取用户的位置等等。在小程序里边,我们就通过编写 JS 脚本文件来处理用户的操作。

    1. 注册页面

    对于小程序中的每个页面,都需要在页面对应的 js 文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等

    1. 使用 Page 构造器注册页面

    简单的页面可以使用 Page() 进行构造。

    1. 使用 Component 构造器构造页面

    Page 构造器适用于简单的页面。但对于复杂的页面, Page 构造器可能并不好用。<br />此时,可以使用 Component 构造器来构造页面。 Component 构造器的主要区别是:方法需要放在 methods: { } 里面。<br />

    相关文章

      网友评论

          本文标题:小程序入门到精通(二):了解小程序开发4个重要文件

          本文链接:https://www.haomeiwen.com/subject/xxehahtx.html