微信小程序精通到入门---02数据渲染和事件和url传参

本文主要是介绍微信小程序精通到入门---02数据渲染和事件和url传参，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

微信小程序精通到入门---02数据渲染和事件和url传参

一、数据渲染 ( 模板语法)

从第一篇，我们初步认识了小程序的组织结构，下面再深入了解下小程序的渲染，什么是数据渲染，先要知道，小程序中js文件是负责逻辑处理，wcss和wxml负责视图的渲染工作，在wxml中数据通过{{}}等方式渲染到页面中，而数据变化后的渲染是通过setData()，才可以改变页面，这个就是数据渲染的过程。

1、数据渲染语法

首先：我们新建一个temp的page页面，先建立文件夹temp，再右击-新建page，名称也是temp。(新建的page会自动注册到app.json中)

我们在data中设置下面一些属性值

  data: {
    hello:'hello word',
    arr:[
      {id:1,name:'name1'},
      {id:2,name:'name2'}
    ],
    is_show:2
  },

然后在页面wxml中显示这些值

<!--pages/temp/temp.wxml-->

<!-- 渲染单个属性 {{}}-->
<view>{{hello}}</view>

<!-- 渲染for语法: wx:for="{{}}" wx:for-item="item" 遍历别名是item可以省略 -->
<view  wx:for="{{arr}}" wx:for-item="item"> 
  <text class="log-item">{{index + 1}}. {{item.id}}. {{item.name}}</text>
</view>

<!--渲染if语法: wx:if="{{}}"-->
<view wx:if="{{is_show==1}}">
 是1显示
</view>
<view wx:elif="{{is_show==2}}">
 是2显示
</view>
<view wx:else>
  其他
</view>

为了跳转到temp页面，查看效果，我们还需要在index.wxml中设置跳转。 代码如下：

 <view style="margin-top:50px"> 
    <navigator url="/pages/temp/temp">点击跳转到temp</navigator>
  </view>

2、渲染效果

3、初始化改变data数据

我们在onload函数中对data数据进行改变。

  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {
    this.is_show = 3;
    this.setData({
      hello:'world hello'
    })
  },

上面，我们使用了2个方式，一个是直接调用，一个是通过setData方式，最终只有setData方式，数据同步了。 

结论：跟页面渲染无关的data，可以直接使用this赋值改变，跟渲染有关的必须使用setData方式重新赋值。

二、事件

1、事件常见种类

2、tap演示

1） wxml

<view bindtap="change_is_show" data-id="2">
  点击变换2
</view>
<view bindtap="change_is_show" data-id="1">
  点击变换1
</view>

2) js

  change_is_show(e) {
    console.log(e.currentTarget.dataset.id); // 取到当前点击元素data-id的值
    this.setData({
      is_show:e.currentTarget.dataset.id
    })
  },

3)  效果

效果就是不停的变化is_show的渲染

3、事件的属性

三、url传参

在上面temp页面，我们跳转过来的时候，是没带任何参数的，如果我们跳转过来带参数如何获取呢？

1、跳转带参数

  <view style="margin-top:50px"> 

    <navigator url="/pages/temp/temp?id=2">点击跳转到temp</navigator>

  </view>

2、页面接收参数

  onl oad: function (options) {
    this.is_show = options.id; //?id=2 的参数2
    console.log(this.is_show) 
    this.setData({
      hello:'world hello'
    })
  },

这篇关于微信小程序精通到入门---02数据渲染和事件和url传参的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！