1.页面渲染

在页面的js文件中，可以在Page实例的data属性中定义数据：

Page({
    data:{
        name:"zbp",
        info:{
            age:22,
            gender:"male",
            hobby:"dance machine"
        }
    }
});

然后渲染的时候：用{{}}解析变量，在里面还可以进行运算

<view class="container">
    <view>{{name}}</view>
    <view>{{info.gender+10}}</view>
    <view wx:for="{{$info}}" wx:for-index="k" wx:key="*this">
        {{k}}：{{item}}
    </view>
</view>

wx:for 作用是遍历，可遍历对象和数组
wx:for-index 指定下标用什么表示
wx:for-item  指定值用什么表示，不指定默认是{{item}}
wx:key 作用是什么
如果没有wx:key 那么当因为上拉下拉或其他原因导致数据动态变化的时候，所有数据都会重新加载和渲染；但是有了这个wx:key它只会加载和渲染更新的数据。
也就是说他可以提高循环的性能。

wx:key的值有两种情况：
a.是一个普通字符串
什么情况使用这个呢：当遍历的数组中包含多条对象的时候使用
 data: {
    input_data: [
      { id: 1, name: "zbp" },
      { id: 2, name: "yf" },
      { id: 3, name: "cjq" },
      { id: 4, name: "zm" },
    ]
  }
假如你从数据库请求到了4条这样的数据，此时wx:key的值就应该是唯一索引或者主键的下标，即id
wx:key="id"

b.*this
当遍历一个普通一维数组时：
*this”代表在 for 循环中的 item 本身，
这种表示需要 item 本身是一个唯一的字符串或者数字
用于组件仅需要一个属性，且属性值唯一。

data: {
    numberArray: [1, 2, 3, 4],
    stringArray:['aaa','ccc','fff','good']
  }

<input value="id:{{ item }}"   wx:for="{{numberArray}}"  wx:key="*this"  />
<input value="id:{{ item }}"   wx:for="{{stringArray}}"  wx:key="*this"  />2.条件渲染和block

data:{
    name:"zbp",
    score:80
}

<view wx:if="{{score>70 && score<90}}">
    等级 B
</view>

<view wx:if="{{score<70 && score>90}}">
    等级 C
</view>

<view wx:if="{{score<30}}">
    等级 D
</view>

<view wx:else}}">
    等级 A
</view>

================
如果要显示的东西不只出现在一个标签中，而是一大块内容我们可以使用<block>标签：

<block wx:if="{{score>80}}">
    <view>{{name}}</view>
    <view>{{score}}</view>
</block>
<block wx:else>
    <view>不符合要求</view>
</block>

他相当于PHP模板中的{if xxxx}
所以它也可以用来遍历：

<block wx:for-index="k" wx:for="{{userInfo}}" wx:key="*this">
    <view>{{k}}:{{item}}</view>
</block>

所以说<block>标签是不会被渲染的

3.使用模板
一些需要重复使用的部分可以写成模板
模板的定义：使用模板标签，模板标签可以直接写在所在页面的wxml中

<!--模板的定义-->
<template name="t1">
    <view>{{d}}</view>
</template>
模板定义一定要指定name属性表示是哪个模板

<!-- 模板的使用 -->
<template is="t1" data="{{d:'aaa'}}"></template>
或者
<template is="t1" data="{{d:data1}}"></template> #data1是变量
或者
<template is="t1" data="{{d}}"></template>  #相当于{{d:d}}

is表示使用的是t1模板，data为模板中的变量指定数据

你可以在一个文件中定义多个模板标签。

你也可以将模板标签<template>单独写在一个文件template.wxml，如果你的模板是只有index页面用那么template.wxml可以就放在index目录中；如果其他页面也要用，你可以在根目录定义一个common目录然后放在里面

引入模板文件
<import src="template.wxml" />  #index本目录下
或者
<import src="/common/template.wxml" />

然后调用模板还是<template is="xxx"></template>即可

==============
引入公共部分
像header头这种东西他也可以写在一个文件中公共使用：
<!--header.wxml -->
<view>头部</view>

<!--index.wxml-->
<include src="header.wxml"/>  #路径要写对

在微信小程序中，单标签最后的/一点不能少，否则会报错。

 

4.事件
在文档 "视图层"--“wxml”--“事件”里面有很多

在这里就举一个例子：
<view bind:tap="onTap" id="v1" data-name="容器1">
    <text id="t1" data-name="容器2">点按我可以打印信息</text>
</view>

bind绑定事件，tap是事件名，tap相当于onclick，onTap是触发的函数名，在js中定义
如果你想在标签那里绑定一些数据，可以自定义一些属性如data-xxx ,一定要以data开头

Page({
    onTap(event){  //event是事件对象，可以不传
        console.log("123")
        
        //假如我点击的是<text>
        console.log(event.target.id) #是t1
        console.log(event.currentTarget.id) #是v1
        
        console.log(event.target.dataset.name)  #容器2
    }
})

===============
阻止事件冒泡

<view id="container" bind:tap="onContainerTap">
    <view catch:tap="onViewTap">
        点我不会触发onContainerTap
    </view>
</view>

此时点里面的view是不会冒泡到外面的view的。

5.样式 wxss
wxss继承了绝大部分的css样式语法
但是也有一些不同的地方，我们只说不同的地方。

它添加了一个rpx的单位，这是一个自适应的单位。
宽度上，750rpx就是100%的宽度，rpx其实和百分制差不多。375rpx就是50%
他会自动居中

wxss支持的选择器：
.class    类选择器
#id        id选择器
element    元素选择器
:before
:after

在/app.wxss下写的样式是可以应用于所有的页面
你也可以写在/common下，然后引入这个样式

@import '/common/style/common.wxss' 即可引入，common.wxss放在那里都可以，路径写对就行

6.wxs 辅助渲染
是微信自己开发脚本语言用来辅助渲染。相当于PC端做网站时js的作用。

Page({
    data:{
        names:"zbp,yf,cjq,zm,cc"
    }
})

<view>
    <text wx:for="{{names}}">{{item}}</text>
</view>

比如，你现在想遍历names，但是后端数据返回的不是一个数组而是用逗号隔开的字符串。
此时你可以用wxs对数据在wxml中进行处理如下：

<wxs module="tool">
    function changeNames(names){
        return names.split(',')
    }
    
    //输出这个函数
    module.exports = createNames;
</wxs>

<view>
    <text wx:for="{{tool(names)}}">{{item}}</text>
</view>

这个<wxs>标签很像我们在html代码中写的<script>
然后必须给这个标签定义一个名字，用module来定义名字。而且里面的方法或者变量也要输出才可以使用
tool就是输出的那个createNames函数

当然，<wxs>部分也可以提取出来写在单独的文件中：
比如这就是在 index 页面，那么在该目录定义一个tool.wxs文件，内容为：
function changeNames(names){
        return names.split(',')
    }
    
    //输出这个函数
    module.exports = createNames;
    
然后，在wxml中：
<wxs src="tool.wxs" module="tool"></wxs>

wxs不是js，所以js的ES6，ES7语法是不能用的。你就当wxs是一套很想ES5 的 js语法去写就基本上没啥问题。

wxs如果有不明白的，可以在文档查；查不到的可以去找度娘

7.组件
组件所共有的属性：class,id,style,自定义属性data-xxx,事件bind:xxx="xxx",hidden="{{true}}"(或者就是hidden)

不同的组件有自己不同的样式，自己的属性和自己的事件:
例如：
<progress percent="60" color="red"></progress>  #进度条

<input value="123" bindinput="onInput1">

Page({
    onInput1(event){
        console.log(event.detail.value);
        
        return 231;  #输入框的值就会变为231
    }
})
这个时候需要我们查文档

8.自定义组件：
我们现在想做一个mnum的组件
在pages目录下新建一个目录mnum
新建一下几个文件：
mnum.js
mnum.json
mnum.wxml
mnum.wxss

mnum.wxml：
<view class="pressBtn">
    <view>{{info}}</view>
    <text bind:tap="onTap">
    点我打印信息
    </text>
</view>

mnum.wxss:控制这个自定义组件的样式

mnum.js:
这里我们定义一个组件而不是一个页面，所以我们不能用
Page({})初始化，而是用
Component({})初始化

Component({
    data:{
        info:Math.random()
    },
    
    //组件的事件的方法不能直接写在外面，只能写在methods中
    methods:{
        onTap(){
            //点击一次就重新设置一次info的值
            //不能直接this.data.info=Math.random()这样是无效的
            this.setData({
                info:Math.random()
            });
        }
    }
    
});

mnum.json:要在该文件明确告诉它这是一个组件
{
    "component":true
}

然后我们要在index页面使用它这个组件
在index.json中：
{
    "usingComponents":{
        "magic-num":"/pages/mnum/mnum"
    }
}

magic-num是组件名，值是路径
然后再index.html中直接写

<magic-num></magic-num>
即可 

现在我想让组件中的数据和index.js中的数据进行交互，此时我们可以在mnum.js中

Component({
    data:{
        info:Math.random()
    },
    
    //组件的事件的方法不能直接写在外面，只能写在methods中
    methods:{
        onTap(){
            //点击一次就重新设置一次info的值
            //不能直接this.data.info=Math.random()这样是无效的
            this.setData({
                info:Math.random()
            });
            
            this.triggerEvent("getMnum",this.data.info)  //意思是触发getMnum这个事件，这个事件是自定义事件,并往回调函数中传入info
        }
    },
    
    //这是个事件，在页面加载这个组件时就会触发，也就是在页面打开的时候就会触发
    attached(){
        this.triggerEvent("getMnum",this.data.info)
    }
    
});

然后在index.wxml中：我想将info值成1000并放在num变量中，有了attached事件的话，num在页面一开始出现的时候就会是info*1000：

<magic-num bind:getMnum="onGetMnum"></magic-num>

<view>{{num}}</view>

在index.js:

Page({
    onGetMnum(ev){
        console.log(ev.detail); //即可获取到那个info值
        
        this.setData({
            num:Math.ceil(ev.detail*1000)
        })
    }
});

接下来给组件自定义属性：
 

Component({
    data:{
        info:Math.random()
    },
    methods:{
        onTap(){
            this.setData({
                info:Math.random()
            });
            
            this.triggerEvent("getMnum",this.data.info)  
        }
    },
    
    attached(){
        this.triggerEvent("getMnum",this.data.info)
    },
    
    //自定义组件的属性
    properties:{
        //属性名(驼峰写法)：属性值的类型
        nowIn:String
    }
});

在index.wxml中：
<magic-num now-in="zbp" bind:getMnum="onGetMnum">
</magic-num>

如何获取now-in属性的值，只需像获取变量一样获取它就行，如在mnum.wxml中：

<view class="pressBtn">
    <view>{{info}}</view>
    <text bind:tap="onTap">
    点我打印信息
    </text>
    
    <view>My name is {{nowIn}}</view>
</view>

然后如果想组件js中获取，直接：
this.data.nowIn
即可