③ 小程序的代码组成

2021/10/11 11:14:13

本文主要是介绍③ 小程序的代码组成,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

1.1 JSON配置

  • JSON 用于做静态配置。

小程序配置 app.json

app.json 是当前小程序的全局配置

配置项 pages 字段

  • 描述当前小程序所有页面路径

配置项 window 字段

  • 定义小程序所有页面的顶部背景颜色、文字颜色等

1.2 WXML模板

  • WXML 是小程序框架设计的一套标签语言,结合小程序的基础组件、事件系统,可以构建出页面的结构。

1 数据绑定

  • WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性
  <!--
  {
    time: (new Date()).toString()
  }
  -->
  <text>当前时间:{{time}}</text>
  • 属性值也可以动态的去改变,有所不同的是,属性值必须被包裹在双引号
  <!-- 正确的写法 -->
  <text data-test="{{test}}"> hello world</text>
  <!-- 错误的写法  -->
  <text data-test={{test}}> hello world </text >
  • 变量名是大小写敏感的,也就是说 {{name}} 和 {{Name}} 是两个不同的变量
  • 没有被定义的变量或者是被设置为 undefined 的变量不会被同步到 wxml 中
  <!--
  {
    var2: undefined,
    var3: null,
    var4: "var4"
  }
  -->
  <view>{{var1}}</view>
  <view>{{var2}}</view>
  <view>{{var3}}</view>
  <view>{{var4}}</view>
  <!--
  输出:
    null
    var4
  -->

2 逻辑语法

  • 通过 {{ 变量名 }} 语法可以使得 WXML 拥有动态渲染的能力,除此外还可以在 {{ }} 内进行简单的逻辑运算

3 条件逻辑

  • 使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块

  • 使用 wx:elifwx:else 来添加一个 else 块

  • wx:if 是一个控制属性,需要将它添加到 block 标签上

4 列表渲染

  • 在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件

  • 使用 wx:for-item 指定数组当前元素的变量名

  • 使用 wx:for-index 指定数组当前下标的变量名

  • 使用 wx:key 来指定列表中项目的唯一的标识符

5 共同属性

属性名 类型 描述 注解
id String 组件的唯一标识 整个页面唯一
class String 组件的样式类 在对应的 WXSS 中定义的样式类
style String 组件的内联样式 可以动态设置的内联样式
hidden Boolean 组件是否显示 所有组件默认显示
data-* Any 自定义属性 组件上触发的事件时,会发送给事件处理函数
bind*/catch* EventHandler 组件的事件

1.3 WXSS样式

WXSS 是一套用于小程序的样式语言,用于描述 WXML 的组件样式,也就是视觉上的效果

尺寸单位 rpx

小程序编译后,rpx 会做一次 px 换算。换算是以375个物理像素为基准,也就是在一个宽度为375物理像素的屏幕下,1rpx = 1px

1.4 js脚本

小程序的主要开发语言是 js ,开发者使用 js 来开发业务逻辑以及调用小程序的 API 来完成业务需求

浏览器中的js

Nodejs中的js

小程序中的js

1 小程序的执行环境

小程序中ios9和ios10所使用的运行环境并没有完全的兼容到ES6标准,在开发工具>项目设置中,勾选ES6转ES5开启转码工具

2 模块化

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

  • 同浏览器不同,小程序中可以将任何一个 js 文件作为一个模块,通过 module.exports 或者 exports 对外暴露接口

  • 使用 require(path) 引入模块

3 脚本的执行顺序

  • 浏览器中,脚本严格按照加载的顺序执行

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

4 作用域

  • 同浏览器中运行的脚本文件有所不同,小程序的脚本的作用域同 NodeJS 更为相似

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

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



这篇关于③ 小程序的代码组成的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程