微信小程序 — 怎么获得view中的文本、id等等

微信小程序-怎么获得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); //输出该文本
  }

})

解释一下：

1. 首先，上面的标签（如<view></view>)包括开始和结束，属性是来修饰这个标签，内容是在两个标签之内，一般会一点html的都知道。

2. 然后，组件都会有共有属性，微信小程序语言也不例外，它的共有属性如下：

   id、class、style、hidden这些都不用解释了。
   bind* 、 catch*：这两个是触发事件，此处用到了catch*，只要点击view就会触发执行。
   data-*：这个是自定义属性，你可以随意定义后面的*，如data-text，然后给他赋值，就相当于html中input的value。
   
   

3. 然后就用上面的方法用 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-*了
  }

})

解释一下：

1. 初始是给tempText赋值为"Sclifftop~", 然后点击"获取上一个view文本"，控制台输出Sclifftop~。

2. 没错，获取文本的方式就是this.data.tempText，想获取哪个就在那个地方加“{{ T }}”（Mustache 语法，你可以把T叫做占位符），通过T 获取

---

很简单的事，不懂就看API，对于什么都不知道的新手，这其实就是HTML+CSS+JS，只是改了个叫法

---

最近做的一个小工具，聚合地铁查询、路线查询，二维码生成，计算器等功能，可以扫下面的二维码，有需要的可以用

---