微信小程序-怎么获得view中的文本、id等等?
怎么硕呢,取id很简单,取text两种情形,分开来说,先说id和第一种:
为了方便,我下面全用
view
一、通过自定义data-text获取与定义一样的文本
<!-- index.wxml -->
<view id="outer" catchtap='pressView'>
<view class="top">
<view class="clear" id="clear" data-text="C">C</view> <!-- 那个data-text就是你自定义的 -->
</view>
</view>
//index.js
Page({
pressView: function (e) {
var viewId = e.target.id;
var viewDataSet = e.target.dataset;
var viewText = viewDataSet.text;
console.log(viewId); //输出点击的view的id,第二种情况就不重复写了
console.log(viewText); //输出该文本
}
})
解释一下:
-
首先,上面的标签(如
<view></view>
)包括开始和结束,属性是来修饰这个标签,内容是在两个标签之内,一般会一点html的都知道。 -
然后,组件都会有共有属性,微信小程序语言也不例外,它的共有属性如下:
id、class、style、hidden这些都不用解释了。 bind* 、 catch*:这两个是触发事件,此处用到了catch*,只要点击view就会触发执行。 data-*:这个是自定义属性,你可以随意定义后面的*,如data-text,然后给他赋值,就相当于html中input的value。
-
然后就用上面的方法用
e.target.dataset.text
即可获得text,如果你定义的是data-giao
,通过e.target.dataset.giao
也是可以取出来的,不过这样写就有点皮,尽量符合常规命名规则
二、通过this.data获取view文本
为了方便,我下面全用
view
<!-- index2.wxml -->
<!-- 这是我临时写的一点,button用view代替,没差,主要知道怎么获取就好 -->
<view id="outer" catchtap='pressView'>
<view class="top">
<view class="temp" id="temp" >{{tempText}}</view>
<view class="click" id="click" >获取上一个view文本</view>
</view>
</view>
//index2.js
Page({
data: {
tempText: "Sclifftop~" //默认赋值
},
pressView: function (e) {
var viewText=this.data.tempText;
console.log(viewText); //获取上一个view的文本,不需要自定义data-*了
}
})
解释一下:
-
初始是给tempText赋值为"Sclifftop~", 然后点击"获取上一个view文本",控制台输出Sclifftop~。
-
没错,获取文本的方式就是
this.data.tempText
,想获取哪个就在那个地方加“{{ T }}
”(Mustache 语法,你可以把T
叫做占位符),通过T
获取
很简单的事,不懂就看API,对于什么都不知道的新手,这其实就是HTML+CSS+JS,只是改了个叫法
最近做的一个小工具,聚合地铁查询、路线查询,二维码生成,计算器等功能,可以扫下面的二维码,有需要的可以用