微信小程序学习

第2章 小程序代码组成

JSON配置

作用

JSON为一种数据格式，在小程序中用作静态配置。

语法

{
  "pages":[                     //"key":"value" ,以键值对形式存在,且双引号不能少
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{                                //window,设置窗口界面的属性
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

JSON无法使用注释，此处为理解代码添加注释。

JSON的值只能是一下格式:
1.数字，包含浮点数和整数
2.字符串，需要包裹在双引号中
3.Bool值，true 或者 false
4.数组，需要包裹在方括号中 []
5.对象，需要包裹在大括号中 {}
6.Null

WXML模板

作用

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

语法

<标签 属性名1="属性值1" 属性名2="属性值2" ...> ...</标签>

基本语法

标签之间可以嵌套,常用<view>...</view>作为嵌套的外层。

数据绑定

WXML通过{{变量名}}来绑定WXML文件和对应JavaScript文件中的data对象属性。

<text data-test="{{var2}}">...{{var1}}...</text>

js文件中data对象属性:

page({
    data: {
        time:(new Date()).toString(),
        var1:"输出:",
        var2:undefined,
        var3:null,
        var4:"4"
      }
})

逻辑语法

{{变量名}}中可以进行简单的逻辑运算。
三元运算

<text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>

算数运算

<view> {{a + b}} + {{c}} + d </view>

条件逻辑

{{变量名}}中可以设置条件逻辑。

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

标签可以被<block >...</block>嵌套,从而实现整体逻辑判断。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

列表渲染

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

<!-- array 是一个数组 -->
<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>

对应的js文件

Page({
    data: {
        array: [{
          message: 'foo',
        }, {
          message: 'bar'
        }]
    }
})

使用wx:for-index指定数组当前下标的变量名,使用wx:fonr-item指定数组当前元素的变量名.

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

• 关于wx:key的使用(一篇解释得不错的文章)
  

  当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。通过is属性赋值模板名来选择渲染的模板,并通过data=”{{var1,var2,var3…}}”来进行多个数据的绑定

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

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

当js文件中没有data对象时,可以在WXML的标签中使用“`{{变量名:’变量值’}}“`进行数据绑定,且该种方式数据优先级高于js文件中数据。

<template is="msgItem" data="{{index:'9',msg,time}}"/>

引用

WXML提供两种文件的引用方式：

• import
  该方式能引用其他WXML文件,并能使用其中定义的template。
  但该方式无递归性，即不能引用其他WXML文件中import的template。

• include
  该方法相当于拷贝目标WXML文件中除<template/> 和 <wxs/>的代码。

共同属性

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

WXSS样式

WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言，用于描述WXML的组件样式。（类似于CSS）

文件组成

• 项目公共样式：
  根目录/app.wxss

• 页面样式:
  在app.json中注册了的页面,pages/注册页面/注册页面.wxss

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

尺寸单位

在WXSS中,引入rpx(responsive pixel)尺寸单位,该尺寸单位使不同宽度的屏幕的元素在屏幕中拥有相同的比列。

在一个宽度为375物理像素的屏幕下, 1rpx = px。
rpx换算px(屏幕宽度/750)   /   px换算成rpx(750/屏幕宽度)

WXSS引用

在WXSS中引用其他WXSS@import './test_0.wxss'

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

内联样式

WXSS内联样式与Web开发一致:

<!--index.wxml-->

<!--内联样式-->
<view style="color: red; font-size: 48rpx"></view>

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

<!--index.wxml-->

<!--可动态变化的内联样式-->
<!--
{
  eleColor: 'red',
  eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

选择器

类型	选择器	样例	样例描述
类选择器	.class	.intro	选择所有拥有 class=”intro”的组件
id选择器	id	firstname	选择拥有id=”firstname”的组件
元素选择器	element	view checkbox	选择所有文档的view组件和所有的checkbox组件
伪元素选择器	::after	view::after	在view组件后边插入内容
伪元素选择器	::before	view::before	在view组件前边插入内容

WXSS优先级与CSS类似，权重如图2-13所示：

WXSS选择器优先级权重

view{ // 权重为 1
  color: blue
}

.ele{ // 权重为 10
  olor: red
}

#ele{ // 权重为 100
  color: pink
}

view#ele{ // 权重为 1 + 100 = 101，优先级最高，元素颜色为orange
  color: orange
}

view.ele{ // 权重为 1 + 10 = 11
  color: green
}