功能如圖:

雖然工作中只負責小程式後臺開發,但是還是小程式開發產生了濃厚的興趣,官方文件也是超級詳細了

這裡就簡單做一個快遞單號的查詢:

新建一個page:

接著就可以寫wxml了.這裡用一個簡單的input和一個滾動檢視:

<!--pages/express/express.wxml-->
<view class='title'>
  <text>快遞查詢</text>
</view>
<!-- 輸入框 -->
<view>
  <input class='input' bindconfirm='query' placeholder="請輸入快遞單號" type='text' confirm-type="search"/>
</view>

<!-- 資訊展示,滾動檢視顯示,不滑動頁面 -->
<scroll-view style='margin-top:50px' scroll-y
    style="height: 400px;"
  >
    <view wx:for="{{expressInfo}}">
      <view class='item'>
        <view>
          <text>【{{item.time}}】:</text>
        </view>
        <view style='margin-left:50px'>
          <text>      {{item.context}}</text>
        </view>
      </view>
    </view>
  </scroll-view>

　　然後是js邏輯部分,這部分應該算是重點了,其中有個很基礎的坑,就是this的問題

　　本著資料頁面分離的開發思想,涉及到資料都寫在js裡面,和vue一模一樣了,需要注意一下js的運用就可以了:

data: {
    //查詢介面
    queryUrl:"http://www.kuaidi100.com/query?type=zhongtong&temp=0.9021720216142217&postid=",
    postid:null,  //輸入的快遞單號
    expressInfo:[]
  },

//快遞查詢  
  // event.detail={value:輸入的值}
  query: function(event){
    console.log("開始查詢");
    console.log("獲取input輸入值:"+event.detail.value);
    this.setData({ //賦值輸入的快遞單號
      postid: event.detail.value
    })
    //傳送請求
    var that = this;//賦值this,解決資料賦值問題
    wx.request({
      url: this.data.queryUrl + this.data.postid, 
      data: {},
      method: "GET",
      header: {
        'content-type': 'application/json' // 預設值
      },
      success(res) {
        console.log(res.data)
        //此處this指wx.request,不能使用this
        that.setData({
          expressInfo: res.data.data
        })
      }
    })

　　這裡需要注意下的是,如果使用的API是http的,在專案詳情裡面需要設定不檢驗證書,開頭選擇專案的時候

不然API會不通過,我這裡使用的是快遞100的API,直接F12介面拿來測試一下可用就行了:

 然後就是app.json裡面page配置成第一個一進去小程式就可以使用了:

最後注意一點的是,轉移符的使用,這裡如果不處理,有些符號,比如\,是會報錯的,使用正則限制一下

或者處理一下就可以了!最後貼一下css吧,個人感覺就是多使用view標籤,其實就是div,可以很方便

實現自己想要的佈局了:

.title{
  text-align: center;
  width:100%;
  margin-top: 10px;
}
.input{
  margin-left: 35px;
  margin-top: 20px;
  border-radius:4px;
  border:1px solid #c8cccf;
  width: 80%;
  height: 35px;
  vertical-align:middle;
}
.item{
  width: 85%;
  margin-top: 25px;
  margin-left: 25px;
}