要求实现:
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之后:
地图:
我的: