Wechat applet (Express query)

Reading this blog requires a preliminary understanding of wechat applet Point me Make a preliminary understanding

design sketch

Let's start

The first step is to view the directory structure, initially establish each folder, and register the page in app.json without registration, which cannot be displayed


We only use the images folder, the about me, deliveryinput, index folder under pages, and the app.json file under the configuration root
The images folder is used to store the files to be displayed on the page. Our page files in pages include (. js background logic processing. wxml foreground display page. wxss design foreground style)

app.json

{
//Register the page here and write the corresponding path information directly
  "pages": [    
    "pages/deliveryinput/deliveryinput",
    "pages/index/index",
    "pages/lists/lists",
    "pages/logs/logs",
    "pages/aboutme/aboutme",
    "pages/detail/detail"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  //The tabBar at the bottom of the setting page here provides jump function
  "tabBar": {
    "borderStyle": "black",
    "color": "#000",
    "backgroundColor": "#fff",
    "selectedColor": "#0123",
    "list": [
      {
        "pagePath": "pages/deliveryinput/deliveryinput",
        "text": "Express inquiry",
        "iconPath": "images/wuliu.png",//Reference picture
        "selectedIconPath": "images/wuliu.png"//Picture used when selected
      },
      {
        "pagePath": "pages/aboutme/aboutme",
        "text": "About me",
        "iconPath": "images/rrr.png",
        "selectedIconPath": "images/rrr.png"
      }
    ]
  }
}

Step 2 write about me page

No bullshit. Code it

aboutme.wxml

<!--pages/aboutme/aboutme.wxml-->
//Wechat applet provides many tags for developers to design pages. Here, we are lazy to use view in a unified way... (equivalent to div)
<view class="about">
    <view class="about-wei">    
      <view  class="about-img"><image src="{{img}}"  class="in-img" background-size="cover"></image></view>
      <view class="about-title">{{title}}</view>
    </view>

    <view class="about-intro"> 
      <view>{{intro}}</view>
    </view>

    <view class="about-addr">
      <view class="about-tab">{{connecttion}}</view>
      <view>{{address}}</view>
      <view>{{email}}</view>
      <view>{{phone}}</view>
    </view>
</view>

aboutme.js

// pages/aboutme/aboutme.js

//Get application instance
const app = getApp()

Page({
  data: {//This is to prepare data for page display. It is not recommended to write it directly in the page
    img: '../../images/qwe.jpg',
    title: "Ma whamei",
    intro: " Love programming, have practical project experience, master Java Develop expertise,Good communication and expression ability, understanding ability and logical thinking, able to learn quickly,Team spirit and collective sense of honor, able to quickly integrate into the team",
    connecttion: "contact information",
    address:"Address: Ningling County, Henan Province",
    phone:"contact number: xxxxxxxxx",
    email:"Email: 1084150741@qq.com"//Welcome to discuss
     },

  onLoad: function () {//Page load initialization function
    if (app.globalData.userInfo) {//Get wechat account login... No relevant data is actually used here. It's just for loading to see how to load it...
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } 
  }
})

aboutme.wxss

/* pages/aboutme/aboutme.wxss */
//Design the corresponding label style in aboutme.wxml
.about{}
.about-wei{text-align: center;}
.about-img{ display: block;margin: 1px auto 0;}
.in-img{width: 124px;height: 110px}
.about-title{display: inline-block;margin: 10px;align-items: center}
.about-intro{text-indent: 2em;font-size: 16px;line-height: 1.5;margin: 0 24px }
.about-addr{font-size: 16px;line-height: 2;text-indent: 2em;}
.about-tab{margin-top: 20px}

OK, so far we have finished the first page. The page effect chart is as follows (-).. -)

Does it feel very simple, ha ha

Step 3 delivery input page

This page is used to receive data such as express type, odd number and so on, and then call the background logic to pass the logic of user input to the index page (SH). Use people's interface)
Upper code

deliveryinput.wxml

<!--pages/deliveryinput/deliveryinput.wxml-->
<view class="contains">
  <view  class="about-img"><image src="{{img}}"  class="in-img" background-size="cover"></image></view>
  <view class="title">{{title}}</view>

  <view class="ppicker">
    <picker bindchange="bindPickerChange" value="{{areaIndex}}" range="{{area}}">
      <view class="inpicker">Courier Services Company:</view>
      {{area[areaIndex]}}
    </picker>
   <view class="asd">
     <view  class="input">courier number:</view>
     <input placeholder="Please enter the number" bindinput="passWdInput" />
   </view>
 </view>

<view class="btn">
  <navigator url="../../pages/index/index?type={{userName}}&postid={{userPwd}}" >
  <button class="loginBtn" type="primary">Click to query</button></navigator>    
</view>
</view>

deliveryinput.wxss

/* pages/deliveryinput/deliveryinput.wxss */
.contains{
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
  margin-bottom: 20px
}
.title{
  display: inline-block;
  margin: 10px;
  text-align: center;
  font-size: 24px;
}
.ppicker{
  font-size: 16px;line-height: 2;text-indent: 2em;margin-top: 20px
}
.inpicker{
  float: left
}
.itemView{
  float: left
}
.asd{
  margin-top: 20rpx
}
.input{
float: left
}
.btn{
  margin-top: 20rpx;
}
.about-img{ display: block;margin: 20px auto 0;}
.in-img{width: 124px;height: 110px}

deliveryinput.js

// pages/deliveryinput/deliveryinput.js
Page({
  data: {
    img: '../../images/qwe.jpg',
    title: "Express inquiry",
    areaIndex: 0,
    area: ['Click to select', 'sto', 'EMS', 'Shun Feng', 'Tact', 'Zhong Tong', 'Rhyme', 'every day', 'Huitong', 'Full peak', 'Debon', 'Home delivery'],
    realvalue: ['', 'shentong', 'ems', 'shunfeng', 'yuantong', 'zhongtong', 'yunda', 'tiantian', 'huitongkuaidi', 'quanfengkuaidi', 'debangwuliu', 'zhaijisong']
  },
  //Get express company
  bindPickerChange: function (e) {
    console.log(this.data.realvalue[e.detail.value])
    this.setData({             //**Key points * *!!! Use setData to reassign data or create new data
      userName: this.data.realvalue[e.detail.value],
      areaIndex: e.detail.value
    })
  },

  //Get express bill No
  passWdInput: function (e) {
    this.setData({
      userPwd: e.detail.value
    })
  },

})

Upper figure

Step 4 write index page

This page is used to display the queried information

index.wxml

<!--index.wxml-->
<view class="container">
  <!--Cycle output list begin-->

  <view wx:for="{{contexts}}" wx:key="key" >
    <view class="infor">
      <text space="flase">{{item.ftime}}\n{{item.context}}</text>
    </view>
  </view> 
  <!--Cycle output list end-->
<toast hidden="{{toastHidden}}" bindchange="toastChange" duration="5000">Wrong number!</toast>//Error prompt
</view>  

index.wxml

.container {
  height: 100%;
  padding: 20rpx;
}

.infor {
  font-size: 10px;
  width: 90%;
  padding: 20rpx 0 0 20rpx;
}

index.js

//index.js
//Get application instance
const app = getApp()

Page({
  data: {
    contexts: "ss",
    toastHidden: true
  },
  //Event handler
  bindViewTap: function () {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  toastChange: function () {
    this.setData({
      toastHidden: true
    })
  },
  onLoad: function (options) {
    wx.getNetworkType({
      success: function (res) {
        // Return the network type, valid values:
        // WiFi / 2G / 3G / 4G / unknown (uncommon network type under Android) / none (no network)
        var networkType = res.networkType
        console.log(networkType)
      }
    })
    var that = this
    wx.request({
      url: 'http://www.kuaidi100.com/query', //Yeah, yeah, yeah, yeah, yeah, that's the interface that people use here
      data: {//Here are the parameters
        type: options.type,
        postid: options.postid
      },
      header: {
        'content-type': 'application/json' // Default
      },
      success: function (res) {
        if (res.data.message=='Parameter error') {
          that.setData({
            toastHidden: false
          })
        }
        console.log(res.data.message)
        that.setData({
          contexts: res.data.data
        })
      }
    })
  },
})

The last information we found shows, ha ha, is there any Joker

The end

Tags: JSON network Programming Java

Posted on Fri, 01 May 2020 21:18:09 -0700 by psych0