微信小程式（快遞查詢）
阿新 • • 發佈：2019-01-01
閱讀本部落格需要對微信小程式有一個初步的理解可參照點我進行初步的瞭解
效果圖
下面我們正式開始
第一步 檢視目錄結構並初步建立各個資料夾及在app.json中註冊頁面 不註冊無法顯示
我們這裡只使用images資料夾、pages下的aboutme、deliveryinput、index資料夾、以及配置根目錄下app.json檔案
其中images資料夾用來儲存頁面要顯示的檔案，pages中放置我們的頁面檔案包括（.js後臺邏輯處理 .wxml前臺顯示頁面 .wxss設計前臺樣式）
app.json
{
//這裡進行頁面註冊，直接寫對應路徑資訊就行
"pages" 第二步 編寫aboutme頁面
不廢話，上程式碼
aboutme.wxml
<!--pages/aboutme/aboutme.wxml-->
//微信小程式提供好多標籤給開發者進行設計頁面，這裡偷懶統一使用view。。。（相當於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
//獲取應用例項
const app = getApp()
Page({
data: {//這裡是為頁面顯示準備資料，不建議直接寫在頁面裡
img: '../../images/qwe.jpg',
title: "馬什麼梅",
intro: " 熱愛程式設計，有實戰專案經歷，熟練掌握Java開發專業知識,有良好的溝通表達能力、理解能力及邏輯思維，能快速學習,有團隊精神和集體榮譽感，能快速融入團隊",
connecttion: "聯絡方式",
address:"地址：河南省寧陵縣",
phone:"聯絡電話：xxxxxxxxx",
email:"郵箱：[email protected]"//歡迎大家一起討論
},
onLoad: function () {//頁面載入初始化函式
if (app.globalData.userInfo) {//獲取微信賬號登入。。。這裡實際沒用到相關的資料，純粹為了載入下能看看裝個逼。。。
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
}
}
})aboutme.wxss
/* pages/aboutme/aboutme.wxss */
//設計對應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}好，到這裡我們已經完成了第一個頁面的編寫，頁面效果圖如下（-。。-）
有沒有感覺很簡單，哈哈
第三步 deliveryinput頁面
這個頁面用來接收使用者輸入的快遞型別，單號等資料，然後呼叫後臺邏輯傳遞使用者輸入的引數給index頁面的邏輯（噓。。。使用人家的介面）
上程式碼
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">快遞公司：</view>
{{area[areaIndex]}}
</picker>
<view class="asd">
<view class="input">快遞單號：</view>
<input placeholder="請輸入單號" bindinput="passWdInput" />
</view>
</view>
<view class="btn">
<navigator url="../../pages/index/index?type={{userName}}&postid={{userPwd}}" >
<button class="loginBtn" type="primary">點選查詢</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: "快遞查詢",
areaIndex: 0,
area: ['點選選擇', '申通', 'EMS', '順豐', '圓通', '中通', '韻達', '天天', '匯通', '全峰', '德邦', '宅急送'],
realvalue: ['', 'shentong', 'ems', 'shunfeng', 'yuantong', 'zhongtong', 'yunda', 'tiantian', 'huitongkuaidi', 'quanfengkuaidi', 'debangwuliu', 'zhaijisong']
},
//獲取快遞公司
bindPickerChange: function (e) {
console.log(this.data.realvalue[e.detail.value])
this.setData({ //**重點**！！！使用setData重新給data賦值或新建data
userName: this.data.realvalue[e.detail.value],
areaIndex: e.detail.value
})
},
//獲取快遞單號
passWdInput: function (e) {
this.setData({
userPwd: e.detail.value
})
},
})上圖
第四步 編寫index頁面
這個頁面用來顯示查詢到的資訊
index.wxml
<!--index.wxml-->
<view class="container">
<!--迴圈輸出列表begin-->
<view wx:for="{{contexts}}" wx:key="key" >
<view class="infor">
<text space="flase">{{item.ftime}}\n{{item.context}}</text>
</view>
</view>
<!--迴圈輸出列表end-->
<toast hidden="{{toastHidden}}" bindchange="toastChange" duration="5000">單號填寫錯誤！</toast>//錯誤提示
</view> index.wxml
.container {
height: 100%;
padding: 20rpx;
}
.infor {
font-size: 10px;
width: 90%;
padding: 20rpx 0 0 20rpx;
}index.js
//index.js
//獲取應用例項
const app = getApp()
Page({
data: {
contexts: "ss",
toastHidden: true
},
//事件處理函式
bindViewTap: function () {
wx.navigateTo({
url: '../logs/logs'
})
},
toastChange: function () {
this.setData({
toastHidden: true
})
},
onLoad: function (options) {
wx.getNetworkType({
success: function (res) {
// 返回網路型別, 有效值：
// wifi/2g/3g/4g/unknown(Android下不常見的網路型別)/none(無網路)
var networkType = res.networkType
console.log(networkType)
}
})
var that = this
wx.request({
url: 'http://www.kuaidi100.com/query', //對對對就是在這裡使用的人家的介面
data: {//這裡是引數
type: options.type,
postid: options.postid
},
header: {
'content-type': 'application/json' // 預設值
},
success: function (res) {
if (res.data.message=='引數錯誤') {
that.setData({
toastHidden: false
})
}
console.log(res.data.message)
that.setData({
contexts: res.data.data
})
}
})
},
})最後查詢到的資訊顯示，哈哈，巨醜有沒有
