微信小程序入门(二) 数据渲染和组件-张柏沛IT博客

正文内容

微信小程序入门(二) 数据渲染和组件

栏目:Web前端 发布时间:2019-12-31 15:09 浏览量:182

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
即可

如果您需要转载,可以点击下方按钮可以进行复制粘贴;本站博客文章为原创,请转载时注明以下信息

张柏沛IT技术博客 > 微信小程序入门(二) 数据渲染和组件

热门推荐
推荐新闻