网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

Runlin微信小程序系列教程一：從零開始寫一個demo《下》

發布時間：2018-03-20 11:47 所屬欄目：小程序開發教程

上一節實現了循環列表數據渲染到視圖，并給列表每一項添加了路由導航到新頁面查看更多細節，但是目前我們的數據都是虛擬的，現在我們就開始利用微信的request請求來接收豆瓣電影接口提供的數據。API: wx.request(OBJ ...

 
 
 

上一節實現了循環列表數據渲染到視圖，并給列表每一項添加了路由導航到新頁面查看更多細節，但是目前我們的數據都是虛擬的，現在我們就開始利用微信的request請求來接收豆瓣電影接口提供的數據。

API: wx.request(OBJECT)

參數有7個，這里主要講一下幾個重要的：

  1. url : 請求的地址
  2. data: 攜帶的數據
  3. method : 請求方式，默認為get
  4. success: 請求成功的回調函數

了解了網路請求的方法后，我們就不需要我們原來模擬的那些數據了，把所有的假數據統統干掉，留一個空的數據用來放數據即可。

data:{
    moivelist:[],
    loading:false
  }  

現在頁面進來的時候只展示了一個標題，因為數據為空了循環不出來了，現在需要我們在頁面進來的時候發送一個請求來接受數據。

豆瓣提供的API：[Title]https://developers.douban.com/wiki/?title=movie_v2#search

具體參數和接口請自行查閱，使用方法：https://api.douban.com + 對應的接口 + 參數(如果需要的話)

例子：https://api.douban.com/v2/movie/top250

我們以請求 排行250 這個接口為例：

onLoad: function() {
        var url=https://api.douban.com/v2/movie/top250;
        var that = this;//確?；卣{函數this的指向正確,后面會以es6的箭頭函數代替
 
        wx.request({
            url：url,  //KEY和KEY值相同可簡寫為url
            data: {},  //不要求數據
            header: { 'Content-Type': 'application/json' },
            //成功時的回調，res為返回值，需要儲存到我們的data數據里面
            success: function(res) {
                that.setData({
                    moivelist: res.data.subjects,
                    loading: true
                })
              }
           })
        }

寫完后，頁面進來的時候就會發送請求，并將數據保存到moiveList,并通過循環把數據展示出來，但是如果網絡差的話，會有一段真空期是沒有數據的，我們需要給用戶一個提示。

給頁面添加一個loading

<loading hidden="{{loading}}">
    加載中....
</loading>
###我們讓這個loading一開始就是顯示的，當數據加載成功后，才讓他消失。我們通過將hidden綁定到{{loading}}上，更改{{loading}}的布爾值來實現這個效果。一開始{{loading}}的值是false的，也就是不隱藏；success后將他設置為true，從而實現這個效果。
###這樣我們這個頁面就做好了，另一個頁面同理，改變一下接口就行了，我們主要看一下detail這個文件。
###我們現在可以實現網絡請求了，在之前我們detail的數據都是外面從列表傳過來的，我們是這么寫的。
<navigator url="../detail/detail?imgsrc={{item.imgsrc}}&title={{item.title}}&author={{item.author}}&introduce={{item.introduce}}&rank={{item.rank}}">

我靠這么長一段代碼，真的需要嗎？我們現在就可以簡寫了，我們只需要傳一個參數就可以了。

把template模板里面wxml里面上述代碼改成下面的

<navigator url="../detail/detail?id={{item.id}}">

我們只需要一個這個電影的ID就行了，我們可以根據這個ID自己請求數據

//在detail.js的Onload函數中獲取到頁面傳過來的ID
 onLoad: function(options) {
        var that = this;
        var address = 'https://api.douban.com/v2/movie/subject/';
        wx.request({
            url: address + options.id,
            data: {},
            header: { 'Content-Type': 'application/json' },
            success: function(res) {
                that.setData({
                    item: res.data,
                    loading: true
                })
            }
        })
    }

這樣就完成了，現在我們在tabBar新增一個搜索頁面。記住新頁面都要添加到app.json中，這里就不再闡述了，頁面大概這個樣子

<import src="../temple/temple.wxml"></import>

<loading hidden="{{loading}}">

    加載中....

</loading>

 

<view class="searchWrap">

    <view class="inputWrap">

        <icon type="search" size="20"/> 

        <input placeholder="請輸入搜索內容"  value="{{content}}" type="text"  placeholder-style="custom-placeholder-style" placeholder-class="custom-placeholder-class"   bindinput="inputing"  bindblur="quick"/>

    </view>  

    <view class="cancel" bindtap="searching">{{cancel}}</view>

</view>

 

<scroll-view class="main" scroll-y="true" bindscrolltoupper="" bindscrolltolower="" bindscroll="" scroll-into-view="" scroll-top="">

    <block wx:for="{{moivelist}}">

        <template is="try" data="{{item}}"></template>

    </block>

</scroll-view>  

下面的列表跟前面一樣，就多個了Input和按鈕而已，同樣的wxss樣式我們就不管了，只看js。

主要代碼如下：

data: {
        moivelist: [],
        loading: true,
        cancel: "取消",
        search: ""
    }
   ,
    
    inputing: function(event) {
        if (event.detail.value) {
            this.setData({
                cancel: "搜索"
            })
        } else {
            this.setData({
                cancel: "取消"
            })
        }
    },
    //失去焦點事件
    quick: function(event) {
        if (!event.detail.value) {
            this.setData({
                cancel: "取消"
            })
        } else {
            this.setData({
                search: event.detail.value
            })
        }
    },
    //點擊搜索事件
    searching: function() {
        if (this.data.cancel === "取消") {
            wx.hideKeyboard()
        } else {          
            this.setData({
                loading: false
            })
 
            wx.request({
                url: url + this.data.search,
                data: {},
                header: { 'Content-Type': 'application/json' },
                success: function(res) {
                    that.setData({
                        moivelist: res.data.subjects,
                        loading: true
                    })
                }
            })
        }
    }

看起來寫了很多，其實就2件事：

* 判斷Input的值，如果為空，則讓按鈕的值為“取消”；不為空則為“搜索”。

* 根據按鈕的值綁定點擊事件，為取消則讓鍵盤下去(手機才行）為“搜索”則發送網絡請求，并將接收的數據保存以便循環展示出來。

到此，幾個文件就都寫好了，現在來對代碼優化一下。

1. wxml：我們已經創建了一個通用的模板了，好像沒得優化了。

2. css : 可以發現我們幾個列表都用了一個模板，因此對應的CSS代碼也是一樣的，我們可以把這部分CSS代碼放到app.wxss公共樣式里面，其他頁面對應的WXSS那部分都可以刪除了。

3. js:wx.request時用到了基本相同的東西，可以放到一個單獨的js里面。

創建一個util文件夾，在里面創建一個util.js文件，用來放我們的方法。

function getData(address,datas,cb){

    wx.request({

        url: address,

        data:datas,

        header: { 'Content-Type': 'application/json' },

        success: cb

    })

}

 

module.exports = {

    getData: getData

}

我們定義了一個方法，并通過module.exports將他導出，其他頁面需要使用方法時，需要先導入

var util = require("../../utils/utils.js")

使用時：util.getData(參數1，參數2，參數3)

如：

onLoad: function() {
        util.getData(url,{},(res)=>{
          this.setData({
              moivelist: res.data.subjects,
              loading: true
          })
        })
    }

到此我們整個APP就算基本完成了，后續如果還有補充則再繼續添加。

代碼參見demo4 ， 網址為：https://github.com/linrunzheng/wx-samll-demo



易優小程序（企業版）+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址：http://www.xiuhaier.com/wxmini/doc/course/22754.html 復制鏈接 如需定制請聯系易優客服咨詢：800182392 點擊咨詢
QQ在線咨詢
AI智能客服 ×