一、全局配置

在小程序配置文件可以查找自己想要使用的配置文件

1、底部导航栏

"tabBar": {"list": [{"pagePath": "pagePath","text": "导航栏1","iconPath": "iconPath","selectedIconPath": "selectedIconPath"}],"list": [{"pagePath": "pagePath","text": "导航栏2","iconPath": "iconPath","selectedIconPath": "selectedIconPath"}]},

list至少要两个

导航栏图标可以使用阿里巴巴矢量图矢量图标库来进行查找

2、顶部导航栏

 "window": {"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "title","backgroundColor": "#eeeeee","backgroundTextStyle": "light","enablePullDownRefresh": "false"},

二、WXML-数据绑定

WXML中的动态数据均来自对应Page.js文件中的data

数据动态化的步骤：1.在.js文件中的data字段中，定义需要动态变化的数据

data: {changingData:"动态数据"},

2.在.wxml文件中，借助双大括号(Mustache)语法来渲染数据

 <text>动态数据绑定：{{changingData}}</text>

效果：

在双大括号中可以写单条语句对变量进行些简单的处理，如（flag？true：false），还有运算符，在变量前后使用 " " 可以插入字符

不仅可以对元素的值进行绑定，还可以绑定属性如（<image src = "{{data}}">）

2.1多分支渲染

在.js文件中定义score变量，再通过wx:if来判断是否满足条件

<view wx:if="{{score >= 90}}">A</view>
<view wx:elif ="{{score >= 80}}">B</view>
<view wx:elif ="{{score >= 70}}">C</view>
<view wx:elif ="{{score >= 60}}">D</view>
<view wx:else>F</view>

如果这样写，在每个标签之间必须连在一起。

2.2block标签

使用block来包裹一组元素从而达到整体控制的效果，与view不同的是block标签是不会被渲染的，使用block包裹起来不会对页面的结构造成影响

2.3hidden

<view wx:if="{{flase}}">页面中不渲染这个标签</view>
<view hidden="{{true}}">页面中隐藏，但是被渲染了</view>

2.4渲染多条数据（列表渲染）

在数据绑定那使用数组来绑定多组不同的数据，再通过for循环来依次遍历

通过wx:for 遍历一个数组，若想要获得一个具体的元素，可以通过变量名 item.变量名来获取,若想获得元素对应的索引值可以使用 index 来获取

使用 wx:for-index="idx" wx:for-item="personcollect" 来对item和index进行一个改名，使得嵌套使用for时结构，元素更加清晰

<!-- .wxml文件 -->
<text>列表渲染</text><block wx:for="{{personcollect}}" wx:for-index="idx" wx:for-item="personcollect">
<!-- 使用 wx:for-index="idx" wx:for-item="personcollect" 来对item和index进行一个改名，使得嵌套使用for时结构，元素更加清晰 -->
<!-- 通过wx:for 遍历一个数组，若想要获得一个具体的元素，可以通过变量名 item.变量名  来获取,若想获得元素对应的索引值可以使用 index 来获取 --><view>姓名：{{personcollect.Pname}}</view><view>年龄：{{personcollect.Perage}}</view><view>性别：{{personcollect.Psex}}</view>
</block>

//.js文件中data部分
data: {personcollect:[{Pname:"zhang3",Perage:18,Psex:"boy"},{Pname:"li4",Perage:19,Psex:"boy"},{Pname:"wang5",Perage:18,Psex:"girl"}]},

会得到这样的效果

2.5 wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如input 中的输入内容，switch 的选中状态），需要使用 wx：key 来指定列表中项目的唯一的标识符。wx:key 的值以某种形式提供
1.字符串，代表在for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一字符串或数字，且不能动态改变。可以在列表中添加标识符（id:"1/2/3"）来指定是哪一组内容
2.保留关键宇 *this 代表在for 循环中的 item 本身，这种表示需要item 本身是一个唯一的字符串或者数字，
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key ，会报一个warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

2.6 箭头函数

ES6标准新增了一种新的函数：Arrow Function（箭头函数）

x => x * x

上面的函数相当于

function (x) {return x * x;
}

如果参数不是一个，就需要用括号()括起来：(x,y)=>{}

2.7 其他

在修改数据源后想要自动刷新页面，需要使用到setData()，否则只能改变数据源内的数据，页面中不会改变

三、WXML-事件绑定

事件是视图层和逻辑层的通讯方式，可以将用户的行为反馈到逻辑层进行处理，当事件触发后，就会执行逻辑层中对应的事件处理函数，事件对象还可以携带额外的信息(id/dataset等等)

3.1 冒泡与捕获

WXML中的冒泡捕获与JavaScript中的事件流类似，捕获是从外到内，冒泡是由内到外

3.2 事件类型

常见事件类型有以下几种

3.3事件对象

通过函数可以直接看到事件对象所拥有的属性值、事件类型等属性

 _handleTap: function(evt){console.log("触摸事件",evt)},

touches中是个数组可以存储多组信息

3.4事件绑定方式的区别

3.4.1 bind

bind为普通绑定事件，会进行冒泡

3.4.2 catch

catch会绑定并阻止事件冒泡

3.4.3 capture-bind:

捕获阶段绑定事件，事件从外到内执行，要注意bind后需要加上冒号

3.4.4capture-catch

中断捕获阶段，取消冒泡阶段

四、模板

4.1模板的使用

模板使用分为定义模板和使用模板

<!-- 模板定义 -->
<template name="moban_name"><view class="mo"><view>{{title}}</view><view>{{disc}}</view><text>{{ttext}}</text></view></template>
<!-- 模板使用 -->
<template is="moban_name"  data="{{title:'我是标题11', disc:'我是简介11',ttext:'我是文本11'}}"></template>
<template is="moban_name"  data="{{title:'我是标题22', disc:'我是简介22',ttext:'我是文本22'}}"></template>
<template is="moban_name"  data="{{title:'我是标题33', disc:'我是简介33',ttext:'我是文本33'}}"></template>

4.2模板的封装和引用

将模板放入模板的文件夹中，由于模板的功能并不像组件一样丰富，只有个WXML的框架，所以模板一般只有一个WXML的文件。完成创建后就封装完成了

在封装后需要对模板进行引用，有两种方式：

4.2.1.import

<import src="/pages/templatess/tempdemo111"></import>

模板不会自己关联css样式也需要手动导入到页面中的WXSS文件中

@import"/pages/templatess/tempdemo111.wxss"

4.2.2 include

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

<include src="/templatess/tempdemo222"/>

五、WXS

WXS是小程序的一套脚本语言，结合WXML，可以构建出页面的结构，双大括号语法在使用WXS后才可以调用函数

5.1WXS的基本使用

<text>{{toolsfunc.testFuc()}}</text>//WXS的调用<wxs module="toolsfunc">
// 定义函数function test(){console.log("WXS-test");return" WXS-test";}// 导出操作module.exports = {testFuc: test}
</wxs>

WXS可以编写在<wxs>标签中，还可以编写在以.wxs后缀的文件中，

每个模块都有自己的作用域，一个模块如果想对外暴露其内部的私有变量和函数，只能通过module.exports实现

调用外部文件时，需要先引入wxs模块

//wxs调用
<text>{{tools.sumFuc(3,5)}}</text>//wxs引入
<wxs module="tools" src="/pages/WWXXSS/tools.wxs"></wxs>

5.2wxs语法概览

wxs语法还是有一点不一样的，可以在WXS语法参考中查看

微信小程序基础学习（WXML）相关推荐

微信小程序基础学习笔记Day02
学习目标:微信小程序基础Day02 今日目标: 能够使用 WXML 模板语法渲染页面结构能够使用 WXSS 样式美化页面结构能够使用 app.json 对小程序进行全局性配置能够使用 page. ...
微信小程序基础学习笔记Day01
学习目标:微信小程序基础Day01 今日目标: 能够知道如何创建小程序项目能够清楚小程序项目的基本组成结构能够知道小程序页面由几部分组成能够知道小程序中常见的组件如何使用能够知道小程序如何进行 ...
微信小程序基础学习（2）- 模板与配置：WXML 模板语法、WXSS 模板样式、全局配置、页面配置、网络数据请求
1. WXML 模板语法 1.1 数据绑定 (1) 数据绑定的基本原则 ① 在 data 中定义数据 ② 在 WXML 中使用数据 (2)在 data 中定义页面的数据在页面对应的 .js 文件中, ...
微信小程序基础学习（4）：自定义组件
1. 组件的创建与引用 1.1 创建组件在项目的根目录中,鼠标右键,创建 components -> test 文件夹. 在新建的 components -> test 文件夹上,鼠标右 ...
微信小程序基础学习笔记
一.环境准备开发微信⼩程序之前,必须要准备好相应的环境 1. 注册账号建议使用全新的邮箱,没有注册过其他小程序或者公众号的. 访问注册⻚⾯,耐⼼完成注册即可. 2. 获取APPID 由于后期调⽤ ...
云开发——微信小程序基础学习
微信云开发提供了多个基础能力,包括数据库,储存,云函数,云调用,和HTTP API 一.云服务的初始化在app.json文件中的onLauch字段中进行, wx.cloud.init({env:'云 ...
微信小程序基础学习（WXSS+组件）
WXSS (WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式. WXSS 用来决定 WXML 的组件应该怎么显示. 与 CSS 相比,WXSS 扩展的特性有:单位 ...
微信小程序开发学习6（基础加强之使用npm包和全局数据共享及分包【Tab底栏案例改进】）
微信小程序开发学习6(基础加强之使用npm包和全局数据共享及分包) 1.使用npm包小程序对npm包的支持目前,小程序中已经支持使用p安装第三方包,从而来提高小程序的开发效率.但是,在小程序中使用 ...
小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...

微信小程序基础学习（WXML）