微信小程序学习笔记三

WXSS 样式

  1. 文件组成

    微信小程序学习笔记三_第1张图片

    项目公共样式: 会被注入到小程序的每个页面;

    页面样式: 与 app.json 注册过的页面同名且位置同级的 WXSS 文件;

    其他样式: 可被项目公共样式和页面样式引用,

  2. 尺寸单位

    rpx,以375个物理像素为基准,即在一个宽度为375物理像素的屏幕下,1rpx = 1px

  3. WXSS 引用

    CSS 中,开发者这样引用另一个样式文件 @import url('./test_0.css')

    这种方法在请求上不会把test_0.css合并到index.css中,也就是请求index.css的时候,会多一个test_0.css的请求。

    小程序 中的样式引用是这样写的,@import './test_0.wxss'

    由于WXSS最终会被编译打包到目标文件中,用户只需要下载一次,在使用过程中不会 因为样式的引用而产生多余的文件请求。

  4. 内联样式

    WXSS 内联样式与 Web 开发一致

    小程序支持动态更新内联样式

    
    
    
    {{eleColor}};font-size:{{eleFontsize}}">
    
  5. 选择器
    类型 选择器 样例 样例描述
    类选择器 .class .intro 选择所有拥有 class=“intro” 的组件
    id选择器 #id #firstname 选择拥有 id=“firstname” 的组件
    元素选择器 element view checkbox 选择所有文档的 view 组件和所有的 checkbox 组件
    伪元素选择器 ::after view::after 在 view 组件后边插入内容
    伪元素选择器 ::before view::before 在 view 组件前边插入内容

    微信小程序学习笔记三_第2张图片

  6. 官方样式库

JS 脚本

  1. ES

    微信小程序学习笔记三_第3张图片
    微信小程序学习笔记三_第4张图片
    微信小程序学习笔记三_第5张图片

  2. 小程序执行环境

    小程序目前可运行于三大平台:

    • iOS平台,包括iOS9、iOS10、iOS11

    • Android 平台

    • 小程序 IDE --> 语法转码工具,ES6->ES5

  3. 模块化

    浏览器中,所有 JS 运行在同一作用域下,定义的参数或方法可被后续加载的脚本访问或改写;

    小程序,可将任何一个 JS 文件作为一个模块,通过 module.exportsexports对外暴露接口

  4. 脚本执行顺序

    浏览器,严格按照加载的顺序执行

    小程序的执行的入口文件是 app.js ,根据其中 require 的模块顺序决定文件运行顺序

  5. 作用域

    小程序的作用域同 NodeJS 更为相似

    • 在文件中声明的变量和函数只在该文件中有效,不同的文件中可以声明相同名字的变量和函数,不会互相影响;

    • 需要使用全局变量时,通过使用全局函数 getApp() 获取全局的实例,并设置相关属性值,来达到设置全局变量得目的;

    • 获取全局变量得实例 gatApp()

      //访问全局变量
      var global = getApp()
      console.log(global.globalValue)
      

      当需要保证全局数据可以在任何文件中安全的被使用到,那么需要在App()中进行设置

你可能感兴趣的:(微信小程序)