校内实训第三天学习笔记

要求实现：

1.首页

2.地图（自动获取位置）

3.我的（用户名，头像，其他）

 

今日知识小结：

Page

data:是页面第一次渲染时使用的初始数据。

.json单独页面可覆盖全局的

src: ..返回上一层

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构

1、数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

（1）简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来。

组件属性(需要在双引号之内)

控制属性(需要在双引号之内)

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

（2）三元运算

2.条件渲染

wx:if 判断是否需要渲染该代码块。

block wx:if 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。

wx:elif、wx:else添加else块。

3.列表渲染

（1）wx:for

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

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

（2）wx:key作为唯一标识符使用

如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

4.模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

（1）定义模板：

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段。

（2）使用模板：

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

<template is="msgItem" data="{{...item}}"/>

"{{...item}}"解构对象，之后可以直接使用

5.引用

import可以在该文件中使用目标文件定义的template。

import 的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

6.其他一些方法

Object wx.getSystemInfoSync()

wx.getSystemInfo 的同步版本                  

wx.getSystemInfo(Object object)

获取系统信息

wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

小程序截图：

click之后：

地图：

我的：