微信小程序入门《二》实例：条件渲染、数据遍历、网络请求、获取本地图片

实例内容

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

---

实例一： 条件渲染

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

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

1. <text wx:if="{{motto != 'Hello World'}}" class="user-motto">{{motto}}text>
2. <text wx:else>你好世界text>

wx:if、wx:else、wx:elif，是微信条件判断的控制属性，需要添加到组件中使用。

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

1. <block wx:if="{{true}}">
2. <view> view1 view>
3. <view> view2 view>
4. block>

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

---

实例二： 数据遍历

在index.js中加入数据。

在index.wxml中读取数据。

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

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

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

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

实例三： 网络请求

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

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

接口内容：

1. {"data":[{"id":201701,"name":"Jackson","score":