微信小程序-代码组成-开发文档学习笔记

查看更多学习笔记：GitHub：LoveEmiliaForever
微信小程序开发指南
微信小程序开发文档

WXML模板

WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误
WXML中的属性是大小写敏感的

数据绑定

要求程序的运行过程中，要有动态的去改变渲染界面的能力
WXML 通过 {{变量名}} (变量名是大小写敏感的)来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性（就像Vue一样）
属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中（和Vue不同）

<text data-test="{{test}}"> hello world</text>

没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中

逻辑语法

还可以在 {{ }} 内进行简单的逻辑运算
如三元运算、数学计算、放置数字、字符串、数组

条件逻辑

wx:if="{{condition}}"
wx:elif="{{condition}}"
wx:else

//array是一个 对象数组
wx:for="{{array}}"
    {{index}}: {{item}}

//用wx:for-index和wx:for-item把index和item绑定到 局部变量 上
wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"
    {{idx}}: {{itemName}}

//wx:key 来指定列表中项目的唯一的标识符
//它是字符串，值需要是唯一的字符串或数字，且不能动态改变

模板

可以在模板中定义代码片段，然后在不同的地方调用
使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段

<template name="msgItem">
    <text> {{index}}: {{msg}} </text>
</template>

使用模板：使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入

<template is="msgItem" data="{{index, msg}}"/>

引用

WXML 提供两种文件引用方式import和include

import 可以在该文件中使用目标文件定义的 template（引入template）
import 有作用域的概念，即只会 import 目标文件中定义的 template，import 不具有递归的特性

<import src="item.wxml"/>

include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

共同属性

所有wxml 标签都支持的属性称之为共同属性

WXSS样式

WXSS与Web开发中的CSS类似，为了更适合小程序开发，WXSS对CSS做了一些补充以及修改

• /app.wxss 项目公共样式
• /pages/xxx/xxx.wxss 页面样式
• /*/*.wxss 其它

尺寸单位 rpm

在WXSS中，引入了rpx尺寸单位，引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单

小程序编译后，rpx会做一次px换算(是相对单位，相对的是屏幕宽/750)
换算是以750个物理像素为基准，也就是在一个宽度为750物理像素的屏幕下，1rpx = 1px

WXSS引用

和css中的引用差不多

@import './test_0.wxss'

由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求
也就是说是逻辑上的引用，实际上运行时都是被打包好了

内联样式

和CSS一样，不过WXSS可以通过变量改变style

选择器

WXSS不完全支持CSS的选择器

选择器的权重如下

和CSS一样，WXSS也是层叠式的（后面覆盖前面）

官方样式库

WeUI是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一
WeUI-Github

小程序的JS

小程序中 JavaScript 构成如图

不同的平台的小程序的脚本执行环境也是有所区别的（IDE、Android、IOS）
有些不支持ES6，小程序IDE提供语法转码工具帮助开发者，将 ES6代码转为 ES5代码

模块化

小程序中可以将任何一个JavaScript 文件作为一个模块，通过module.exports 或者 exports 对外暴露接口

// moduleA.js
module.exports = { }

// B.js
var multiplyBy2 = require('./moduleA')

和普通的ES6模块系统差不多

脚本执行顺序

小程序的执行的入口文件是 app.js ，并且会根据其中 require 的模块顺序决定文件的运行顺序
当 app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序，逐一执行

作用域

小程序的脚本的作用域同 NodeJS 更为相似
在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响

当需要使用全局变量的时，通过使用全局函数 getApp() 获取全局的实例，并设置相关属性值，来达到设置全局变量的目的
也就是：获取全局对象，再在全局对象上定义属性

// a.js
var global = getApp()
global.globalValue = 'globalValue'

// b.js
var global = getApp()
console.log(global.globalValue) // 输出 globalValue