微信小程序开发-自定义组件、数据获取方式、视图渲染(二)

data-*嵌入自定义数据

使用 data-* 属性来嵌入自定义数据。也就是说这个data-*是可以用来存储数据的，data-的后面跟着自定义的变量名，比如data-name、data-pwd等等，后面再赋值，这个值就会被存储起来。获取数据时通过js来实现。

  <!--data-id给button添加一个自定义属性id，值为3 -->
  <button data-id="3" catch:tap="fn">点击触发事件 </button>
  {{message}}

参数的获取方式
js中使用dataset.XXX获取标签中自定义属性值。

   // 点击按钮，通过dataset.xx获取传给button的id值
    console.log(e.currentTarget.dataset.id);

文件内数据获取方式
this.setData({属性名："属性值"})

    this.setData({
      // 点击按钮后，数据改变
      message: "我是修改后的数据",
      // 内容显示
      showInfo: !this.data.showInfo
    });

注意：

• 标签中的属性值XXX中不可以包含特殊字符（‘-’除外）。
• js中使用dataset.XXX获取标签中自定义属性值时，如果标签中的属性值XXX中包含字符‘-’，需要使用驼峰命名法定义变量名。

bindtap和catchtap绑定点击事件

bindtap和catchtap都可以绑定点击事件处理函数。

• bind事件绑定不会阻止冒泡事件向上冒泡，
• catch事件绑定可以阻止冒泡事件向上冒泡。
• catchtap和catch:tap是一样的效果

视图渲染

• wx:if与wx:else条件渲染
  wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
  注意： 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
• wx:for 列表渲染
  视图渲染

<view class="newsContainer">
  <view class="newsItem" wx:for="{{newsData}}" wx:key="item.id" data-newsId="{{item.id}}">
    <image src="{{item.imgUrl}}" class="newsImg"></image>
    <view class="newsRight">
      <text>{{item.title}}</text>
      <text>{{item.newTime}}</text> 
    </view>
  </view>
</view>

逻辑处理

Page({
   data:{
     newsData:[]
   }
  onLoad: function (options) {
    wx.request({
      url:"http://localhost:8989/getData",
      // 使用箭头函数
      success:res=>{
        this.setData({
          newsData:res.data    
        });
      }
    });
  }
})

模板引入的两种方式

• import可以在该文件中使用目标文件定义的template ，
• include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置

  <!-- 获取模板内的内容 -->
  <import src="/pages/templates/muban.wxml" />
  <!-- 根据模板的name值来显示模板内的内容 -->
  <template is="muban"></template>

  <!-- 获取模板之外的内容 -->
  <include src="/pages/templates/muban.wxml"/>

<view class="container">
  <text class="newUser">我是新来的</text>
  <image src="../../ico/user.png" class="userImg"></image>
  <button open-type="contact" type="primary" size="mini" bindcontact="mybtn">我是按钮</button>




  <!-- wx:if条件渲染 -->
  <!-- 点击后显示wx:if中的视图内容showInfo，再次点击showInfo隐藏，wx:else中的内容显示-->
  <view wx:if="{{showInfo}}">我来了，我是渲染视图内容</view>
  <view wx:else>我也来了</view>
</view>

网络请求数据

• 每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信。
• 小程序没有跨域的问题。跨域是起源在浏览器的同源策略
• 最终发送给服务器的数据是String类型`，如果传入的data不是String类型，会被转换为String 。
  小程序请求地址是https开头(wx.request)，我们在微信开发者工具窗口，上面第二行设置栏【详情】-【本地设置】- 勾选【不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书】

wxml页面

<view>
   <button size="mini" type="primary" bindtap="getData">点击获取网络数据</button>
</view>

js文件

 getData() {
    wx.request({
      //访问(后端)接口地址,访问如下地址会报错，
      url: "http://localhost:8989/getList",
      //请求成功后
      success(res) {
        console.log(res.data);
      }
    })
  },

后端

const koa = require("koa");
const Router = require("koa-router");
let newsData = require("./data.json");
let app = new koa();
let router = new Router();
router.get("/getList", ctx => {
    ctx.body = {
        name: "张三",
        age: 20
    }
})
app.use(router.routes());
app.listen(8989);

生命周期函数

// pages/user/user.js
Page({
  /*页面的初始数据*/
  data: {
  
  },
  /*生命周期函数--监听页面加载*/
  onLoad: function(options) {

  },
  /*生命周期函数--监听页面初次渲染完成*/
  onReady: function() {

  },
  /*生命周期函数--监听页面显示*/
  onShow: function() {

  },
  /*生命周期函数--监听页面隐藏*/
  onHide: function() {

  },
  /*生命周期函数--监听页面卸载*/
  onUnload: function() {

  },

  /*页面相关事件处理函数--监听用户下拉动作*/
  onPullDownRefresh: function() {

  },
  /*页面上拉触底事件的处理函数*/
  onReachBottom: function() {

  },
  /*用户点击右上角分享*/
  onShareAppMessage: function() {

  }
})