---

實例內(nèi)容

• 條件渲染
• 數(shù)據(jù)遍歷
• 網(wǎng)絡(luò)請求
• 獲取本地圖片

---

實例一： 條件渲染

如果motto為Hello World，則輸出你好世界，否則原樣輸出。

這里是分支條件判斷，直接在視圖文件里修改，修改index.wxml

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

wx:if、wx:else、wx:elif，是微信條件判斷的控制屬性，需要添加到組件中使用。

但是如果我們想一次性判斷多個組件標簽，我們可以使用一個<block/>標簽將多個組件包裝起來，并在上邊使用wx:if控制屬性。

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

注意： <block/>并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。

---

實例二： 數(shù)據(jù)遍歷

在index.js中加入數(shù)據(jù)。

在index.wxml中讀取數(shù)據(jù)。

wx:for-item可以指定數(shù)組當前元素的變量名
wx:for-index可以指定數(shù)組當前下標的變量名

這兩個項也可以不指定，默認數(shù)組的當前項的下標變量名默認為index，數(shù)組當前項的變量名默認為item。

類似block wx:if，也可以將wx:for用在<block/>標簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊。例如：

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

---

實例三： 網(wǎng)絡(luò)請求

當用ajax進行請求的時候，最討厭的就是跨域問題，而在小程序上是沒有這個問題的。

數(shù)據(jù)接口：https://raw.githubusercontent.com/jiangzy27/how_to_react/master/score.json

接口內(nèi)容：

{"data":[{"id":201701,"name":"Jackson","score":100},{"id":201702,"name":"Mike","score":78},{"id":201703,"name":"Joe","score":62}]}

修改index.js

加入變量，添加請求的方法。

//index.js //獲取應(yīng)用實例 var app = getApp() Page({data: {motto: 'Hello World',userInfo: {},myText: '你好，世界！',arr1: [{name:'張三', age:18},{name:'李四', age:19},{name:'王五', age:20}],removeData:'',},//事件處理函數(shù)bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},//自定義事件myEventHandle : function(){this.setData({myText:"世界你好"});},onLoad: function () {console.log('onLoad')var that = this//獲取遠程數(shù)據(jù)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});},})//調(diào)用應(yīng)用實例的方法獲取全局數(shù)據(jù)app.getUserInfo(function(userInfo){//更新數(shù)據(jù)that.setData({userInfo:userInfo})})} })

修改index.wxml，進行數(shù)據(jù)讀取。

效果：

wx.request說明：

參數(shù)說明：

---

實例四： 獲取本地圖片

這里使用微信組件wx.chooseImage

修改index.js

//index.js //獲取應(yīng)用實例 var app = getApp() Page({data: {motto: 'Hello World',userInfo: {},myText: '你好，世界！',arr1: [{name:'張三', age:18},{name:'李四', age:19},{name:'王五', age:20}],myPic: null,},//事件處理函數(shù)bindViewTap: function() {wx.navigateTo({url: '../logs/logs'})},//自定義事件myEventHandle : function(){var that = this;wx.chooseImage({count: 1, // 默認9sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認二者都有sourceType: ['album', 'camera'], // album 從相冊選圖，camera 使用相機，默認二者都有success: function(res){that.setData({myPic:res.tempFilePaths});},})},onLoad: function () {console.log('onLoad')var that = this//調(diào)用應(yīng)用實例的方法獲取全局數(shù)據(jù)app.getUserInfo(function(userInfo){//更新數(shù)據(jù)that.setData({userInfo:userInfo})})} })

修改index.wxml

效果：

wx.chooseImage說明

wx.chooseImage參數(shù)：

---

博客名稱：王樂平博客

博客地址：http://blog.lepingde.com

CSDN博客地址：http://blog.csdn.net/lecepin

總結(jié)

以上是生活随笔為你收集整理的微信小程序入门二: 条件、遍历、网络请求、获取本地图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。