微信小程序入门二: 条件、遍历、网络请求、获取本地图片

实例内容

  • 条件渲染
  • 数据遍历
  • 网络请求
  • 获取本地图片 

    实例一: 条件渲染

    如果motto为Hello World,则输出你好世界,否则原样输出。

    这里是分支条件判断,直接在视图文件里修改,修改index.wxml

    <text wx:if=”{{motto != ‘Hello World’}}” class=”user-motto”>{{motto}}</text>
    <text wx:else>你好世界</text>

wx:ifwx:elsewx:elif,是微信条件判断的控制属性,需要添加到组件中使用。

但是如果我们想一次性判断多个组件标签,我们可以使用一个<block/>标签将多个组件包装起来,并在上边使用wx:if控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

注意: <block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。

实例二: 数据遍历

index.js中加入数据。

index.wxml中读取数据。

wx:for-item可以指定数组当前元素的变量名
wx:for-index可以指定数组当前下标的变量名

这两个项也可以不指定,默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item。

类似block wx:if,也可以将wx:for用在<block/>标签上,以渲染一个包含多节点的结构块。例如:

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

实例三: 网络请求

当用ajax进行请求的时候,最讨厌的就是跨域问题,而在小程序上是没有这个问题的。

数据接口:https://raw.githubusercontent.com/jiangzy27/how_to_react/master/score.json

//index.js //获取应用实例 var app = getApp() Page({ data: { motto: ‘Hello World’, userInfo: {}, myText: ‘你好,世界!’, arr1: [{name:’张三’, age:18},{name:’李四’, age:19},{name:’王五’, age:20}], removeData:”, }, //事件处理函数 bindViewTap: function() { wx.navigateTo({ url: ‘../logs/logs’ }) }, //自定义事件 myEventHandle : function(){ this.setData({myText:”世界你好”}); }, onLoad: function () { console.log(‘onLoad’) var that = this //获取远程数据 wx.request({ url: ‘https://raw.githubusercontent.com/jiangzy27/how_to_react/master/score.json’, header:{ “Content-Type”:”application/json” }, data: {}, success: function(res){ that.setData({removeData:res.data.data}); }, }) //调用应用实例的方法获取全局数据 app.getUserInfo(function(userInfo){ //更新数据 that.setData({ userInfo:userInfo }) }) } })

发表评论

电子邮件地址不会被公开。 必填项已用*标注