Нелегко писать апплет для новичков, это моя первая попытка, и я многому научился. После недавнего Double Eleven я либо забираю курьера, либо езжу забирать курьера каждый день.Очень удобно открывать посылку Cainiao в мобильном приложении, чтобы проверить посылку.Когда искал программу мини посылок Cainiao в WeChat , не нашел, поэтому хотел написать небольшую программку для упаковки новичков, имитируя сам версию приложения, и меня очень интересовало экспресс-отслеживание и отслеживание логистики.
Предварительный просмотр проекта
- Предварительный просмотр эффекта проекта
- Структура каталогов проекта
-
Используемые инструменты разработкиVScodeа такжеИнструменты разработчика WeChat
-
Платформа обеспечивает:Публичная платформа WeChat | Мини-программа, Зарегистрируйте учетную запись на платформе, чтобы получить AppId, используйте Apple Id для входа в инструмент разработчика WeChat и откройте проект.
-
Используемая документация по API:Документация по разработке программы WeChat Mini, Руководство по разработке апплета WeChat, документ _W3CПодробное введение в использование различных инструментов WeChatVant Weapp, предоставляет множество практических компонентов, окно поиска в моем проекте использует компонент поиска библиотеки компонентовweUIБазовая библиотека стилей команды WeChat,
-
Используемый интерфейс:экспресс птицаИнтерфейс Укажите номер экспресс-отслеживания и код компании для запроса информации об экспресс-логистике.Открытая платформа карты TencentОбеспечивает реализации для использования карт, отображения карты, маркировки / многоугольника и дисплея маршрута.
Деконструкция страницы
如下图，总共四个页面
- первая главная страница
<view class="container">
<van-search class="van-search" value="{{ value }}" placeholder="请输入拼音缩写或中文" background="#ffffff" bindtap="searchAnother" />
<image class="message" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/5.jpg?sign=62596b8fb882fafa4735a7bb02ec48cf&t=1542775874"></image>
<view class="weui-tabbar">
<icon href="#" class="weui-tabbar__item weui-tabbar__item_on">
<icon>
<image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/saoma.jpg?sign=22ecf7d2269084181e8ace24c1319b06&t=1542775996" alt="" class="weui-tabbar__icon"></image>
</icon>
<icon class="weui-tabbar__label" bindtap='scanCode'>扫一扫</icon>
</icon>
<icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
<icon>
<image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/2.jpg?sign=2c956d50da50cdf22b74812d1cc51b12&t=1542776039" alt="" class="weui-tabbar__icon"></image>
</icon>
<icon class="weui-tabbar__label" >快递员上门</icon>
</icon>
<icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
<icon>
<image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/3.jpg?sign=a9cbe061ac103a8e380f73f8c56cec2c&t=1542776057" alt="" class="weui-tabbar__icon"></image>
</icon>
<icon class="weui-tabbar__label">精灵书屋</icon>
</icon>
<icon href="#" class="weui-tabbar__item weui-tabbar__item_on" >
<icon>
<image mode="aspectFit" src="https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/4.jpg?sign=da2382ecf07e72710947db853406d600&t=1542776076" alt="" class="weui-tabbar__icon"></image>
</icon>
<icon class="weui-tabbar__label">领裹酱</icon>
</icon>
</view>
<swiper class="ad" indicator-dots='true' indicator-active-color='blue' autoplay='true'>
<swiper-item wx:for="{{imageList}}" wx:key="index" wx:for-item="item">
<image src="{{item.pic}}" mode="widthFix" bind:tap="tapImage" class='ad-img'></image>
</swiper-item>
</swiper>
<view class='action'>
<text class='action-text'>进行中</text>
<image class='action-img' mode='aspectFill' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/ad2.jpg?sign=ae6b53f73ba106c5be937df83b016e07&t=1542776132'></image>
</view>
<loading hidden="{{isLoading}}"></loading>
<scroll-view class='scroll-view' scroll-y="true">
<view class='package-item' wx:for="{{expressLists}}" wx:key="{{item.contentId}}"
wx:for-item="item" data-contentId='{{item.text3}}' bindtap='toDetail'>
<view class='item-wrapper'>
<text class='item-title'>{{item.text1}}</text>
<image class='item-img' mode='aspectFill' src='{{item.image}}'></image>
<view class="item-block">
<text class='item-text1'>{{item.text2}}</text>
<text class='item-text2'>{{item.text3}}</text>
<text class='item-text3'>{{item.text4}}</text>
</view>
</view>
</view>
<view class='package-item'>//最后一个广告项
<view class='item-wrapper'>
<text class='item-title'>有一个神秘包裹想你飞来</text>
<image class='item-img' mode='aspectFill' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/6.jpg?sign=e713b1367255f2bd83f8098aaac630d4&t=1542776179'></image>
<view class="item-block">
<text class='item-text1'>已放入裹裹自提柜</text>
<text class='item-text2'>菜鸟裹裹</text>
<text class='item-text3'>神秘包裹已送至裹裹自提柜</text>
</view>
</view>
</view>
<text class='{{bottomshow== true? "bottomshow":"hide"}}' bindtap='watchMore'>查看全部</text>
</scroll-view>
</view>
- Вторая страница проста для написания
<view class='largecontainer'>
<view class='container'>
<van-search class="search-top" value="{{value}}" placeholder="请输入运单号" use-action-slot bind:change="onChange" bind:search="onSearch">
<view slot="action" bindtap="cancel">取消</view>
</van-search>
<view class='search-middle' bindtap='selectCompany'>
<image class='car' src='{{src}}' mode='aspectfit'></image>
<text class='middle-text'>{{company}}</text>
</view>
<view class="dr">
<image class='dr-img' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/dr.jpg?sign=8fa530125c0e20b0a6f9b0a39a5afae6&t=1542885013' mode='aspectfit'></image>
</view>
<view class='save-list'>
<text class='save-text'>保存到包裹列表</text>
<van-switch class='save-switch' bind:tap="onChangeswitch" checked="{{checked}}" size="110%" active-color="#4b0" inactive-color="#f44"></van-switch>
</view>
<view class='search-bottom' bindtap="getExpressInfo" data-number='{{no}}' data-name='{{no}}'>
查询
</view>
</view>
<scroll-view scroll-y class='scroll-view'>
<view class='history'>
<view class='history-text'>{{historyOrder}}</view>
<view class='history-item' wx:for="{{historyList}}" wx:key="{{index}}">
<view class='item-num'>{{item.code}}</view>
<view class='item-text'>{{item.company}}</view>
<image class='item-image' mode='aspectFit' src='../../images/x.jpg' data-code='{{item.code}}' bindtap='delectoneHistory'></image>
</view>
<view class='clear-history' bindtap='onSHowdialog'>{{delectHistory}}</view>
<wxc-dialog class="wxc-dialog" title="确认全部清除" bindcancel="onCancel" bindconfirm="delectHistory"></wxc-dialog>
</view>
</scroll-view>
</view>
- третья главная страница
<view class="container flex_vert ">
<view class="search">
<view class='search-text'></view>
<van-search class="van-search" value="{{ value }}" placeholder="请输入拼音缩写或中文" background="#ffffff" />
</view>
<scroll-view class='company' scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" scroll-into-view="{{toView}}">
<view class='select-list'>
<view class='select-word' wx:for="{{scrollList}}" wx:key="{{index}}" data-index='{{index}}' data-id="{{item}}" bindtap='switchTab'>
{{item}}
</view>
</view>
<view class='item-A' id='{{item.number}}' hover-stay-time='3000' wx:for="{{comList}}" wx:key="{{index}}" wx:for-item="item" scroll-with-animation="true" scroll-animation-duration="3000">
<text>{{item.number}}</text>
<view class='company-item' wx:for="{{item.list}}" wx:key="{{index}}" bindtap='backwithData' data-text='{{item.text}}' data-src="{{item.pic}}">
<image src='{{item.pic}}' class='item-image' mode='acpectFill'></image>
<text class='item-text'>{{item.text}}</text>
<icon>
<image src='{{item.likepic}}' class='icon'></image>
</icon>
</view>
</view>
</scroll-view>
</view>
- Четвертая главная страница
<view class='container'>
<view class='header'>
<view class="container-header">
<view class='left'>
<image class='left-img1' mode='aspectFit' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d1.jpg?sign=418294a51084375aa75faf9c934a232a&t=1542776464'></image>
<image class='left-img2' mode='aspectFit' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d2.jpg?sign=860b4b91983b5882361fd8518d4f5052&t=1542776482'></image>
<text class='left-text'>已签收</text>
</view>
<view class='right'>
<view class='right-box' bindtap='service'>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d3.jpg?sign=e0896127eca1f639dc3f987713007073&t=1542776506'></image>
<text class='right-box_text'>物流客服</text>
</view>
<view class='right-box' bindtap=' complaint'>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d4.jpg?sign=88eea48517eae4dd43e484a4011db0b3&t=1542776526'></image>
<text class='right-box_text'>物流投诉</text>
</view>
<view class='right-box'>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/d5.jpg?sign=cd8068ae4d4079e834c6cf1be6a63017&t=1542776546' class='right-box_img3'></image>
</view>
</view>
</view>
</view>
<scroll-view scroll-y="{{true}}" class='scroll'>
<view class="detail-container">
<image class='errormessage' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/error.jpg?sign=5e662ac9d3f2137611fbc78ed57f7d91&t=1542776565'></image>
<view class='talkinn'>
<text class='inn-text'>评价驿站 东华理工大学南区七栋菜鸟驿站</text>
<view class='innbar'>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/ink.jpg?sign=dcf1be9f08dc50684d63fb521fc3573a&t=1542776591' class='inn'></image>
<view class='stars'>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/star.jpg?sign=be15af8bc087f1bc75ab4e7b2eec88b3&t=1542811791' class='star'></image>
</view>
</view>
<view class='inn-bottom'>
<text class='inn-bottom_text'>{{company}} {{code}}</text>
<image src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/error.jpg?sign=ae3162eb21f9eb321f3cf443751cd5ef&t=1542776616' class='errormessage2'></image>
</view>
</view>
<view class='detail'>
<view class='detail-data1'>
<view class='time'></view>
<view class='shouicon'>
<image class='icon' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou.jpg?sign=2b723580f5bcd7a63fadcafca12f7fac&t=1542776646' class='icon1'></image>
</view>
<view class='data-msg'>
<view class='data-msg_title'></view>
<view class='data-msg_article'>【收货地址】江西省南昌市青山湖区 蛟桥镇 东华理工大学广兰大道广兰校区</view>
</view>
</view>
<view class='detail-data'>
<view class='time'>{{time1}}</view>
<view class='shouicon'>
<image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou2.jpg?sign=ab586f9e02814f37c32b3673be252728&t=1542776674'></image>
</view>
<view class='data-msg'>
<view class='data-msg_title'>已签收</view>
<view class='data-msg_article'>您已在东华理工大学南区七栋菜鸟驿站完成取件，感谢使用菜鸟驿站，期待再次为您服务。</view>
<text class='data-select'>我要退货</text>
<text class='data-select'>联系卖家</text>
<text class='data-select'>查看订单</text>
</view>
</view>
<view class='detail-data'>
<view class='time'>{{time2}}</view>
<view class='shouicon'>
<image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou3.jpg?sign=0df85fc9d103f7717e2b963f2f5f7746&t=1542776695'></image>
</view>
<view class='data-msg'>
<view class='data-msg_title'>待取件</view>
<view class='data-msg_article'>您已在东华理工大学南区七栋菜鸟驿站完成取件，感谢使用菜鸟驿站，期待再次为您服务。</view>
</view>
</view>
<view class='detail-data1'>
<view class='time'>{{time3}}</view>
<view class='shouicon'>
<image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou4.jpg?sign=949a5b5f8436e0933e279c7dab7d99f0&t=1542776714'></image>
</view>
<view class='data-msg'>
<view class='data-msg_title'>派送中</view>
<view class='data-msg_article'>{{text3}}</view>
</view>
</view>
<view class='detail-data1'>
<view class='time'>{{time3}}</view>
<view class='shouicon'>
<image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou5.jpg?sign=bdab3c461441de6b8cea13589bb4dfc2&t=1542776737'></image>
</view>
<view class='data-msg'>
<view class='data-msg_title'>运输中</view>
<view class='data-msg_article'>{{text3}}</view>
</view>
</view>
<view class='detail-data2' wx:for="{{Traces2}}" wx:key="index">
<view class='time'>{{item.AcceptTime}}</view>
<view class='shouicon2'>
<image class='icon2' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou6.jpg?sign=2c10e0b37d9ac31b88a1c5d836ef7ffb&t=1542776755'></image>
</view>
<view class='data-msg'>
<view class='data-msg_title'></view>
<view class='data-msg_article'>{{item.AcceptStation}}</view>
</view>
</view>
<view class='detail-data'>
<view class='time'>{{time3}}</view>
<view class='shouicon3'>
<image class='icon3' src='https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/shou7.jpg?sign=f7309cadf586fa539d3a04b77488dd97&t=1542776785'></image>
</view>
<view class='data-msg'>
<view class='data-msg_title'>已揽件</view>
<view class='data-msg_article'></view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
<!-- <view id='map'> -->
<!-- <map id="myMap" markers="{{markers}}" longitude="{{lon}}" latitude="{{lat}}" scale='16'>
</map> -->
<!-- </view> -->
Функциональность этой страницы заключается в реализации логистического статуса запроса, который был подписан, а подписанное место зафиксировано, например, транспортировка, не отправлено, а срок действия номера курьера истек. Чтобы показать этот эффект. Здесь нет другой страницы. Первые данные Detail-Data получают адрес получения пользователя Вторые данные Detail-Data подписали его для получения запрошенных данных.
Источники данных
easy-mock+Мини-программа Использование базы данных облачной разработки
- easy-mock может эффективно подделывать данные
После регистрации выше вы можете создать интерфейс, отредактировать интерфейс, добавить данные, получить URL-адрес интерфейса, а затем передать апплетwx.request(url)Получите данные в easy-mock, в этом примере easy-mock используется для создания домашней страницы.expressListsДанные
{
"data": {
expressList: [{
image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/yy.jpg?sign=b28732bd498113a8c88cfa634121a363&t=1542776282",
text1: "【送历年真题】,朱伟老师推荐！新东方201...",
text2: "签收时间：10-29 21:01",
text3: "百世快递：71220099817129",
text4: "北京北京市--江西南昌",
contentId: "001",
},
{
image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/lq.jpg?sign=82cc4a8eca681accf06dd4737f2422cc&t=1542776323",
text1: "淘宝|运动护具篮球护指套艾弗森库...",
text2: "签收时间：11-10 12:20",
text3: "圆通快递：802511355217367857",
text4: "广州广州市--江西南昌",
contentId: "002",
},
{
image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/css.jpg?sign=324ebd7e4e3203b2071cb7e0f24a0d2e&t=1542776355",
text1: "天猫|CSS世界web前端开发CSS3+...",
text2: "签收时间：10-17 17:11",
text3: "圆通快递：802022497906214489",
text4: "河南省新乡市--江西南昌",
contentId: "003",
},
{
image: "https://636c-cloud-912718-1257892962.tcb.qcloud.la/images2/js.jpg?sign=d07ef9708724b5d20595923a16964fa8&t=1542776376",
text1: "淘宝|二手包邮 你不知道的javaScri...",
text2: "签收时间：09-21 17:13",
text3: "韵达快递：3956570250807",
text4: "河南洛阳--江西南昌",
contentId: "004",
}
]
}
}
- Мини-программа Использование базы данных облачной разработки
- companyes: выберите соответствующую страницу, изображение логотипа курьерской компании, название курьерской компании и понравившуюся коллекцию изображений значков.
- expresss: информация, соответствующая каждому номеру экспресс-заказа. Здесь данные получаются через интерфейс и добавляются в базу данных. В то же время номер экспресс-заказа используется как поле каждой записи, которое можно напрямую запросить через номер заказа позже.Повторные номера заказов не добавляются и являются недействительными.Номер заказа также не добавляется в облачную базу данных.
- getExpresses: это сбор данных в замещающей части,
- облачное хранилище базы данных
Здесь ресурсы изображений проекта хранятся в облачной базе данных апплета.Новый файл будет называться images и нажмите «Загрузить», чтобы загрузить локальное изображение в хранилище.
- Использование управления базой данных и хранилищем в облачной платформе разработки апплетов не занимает локальные ресурсы, а также удобно для запросов и модификаций.
- Облачная разработка предоставляет разработчикам полную облачную поддержку, не беспокоясь о внутреннем управлении или создании сервера.Это может быть достигнуто непосредственно с помощью документации API облачной функции, предоставляемой апплетом, и соответствующего API для работы с базой данных апплета. , Операция добавления, удаления и изменения данных проще и удобнее, чем работа с базой данных MySQL, так что можно добиться быстрого онлайн и итерации.В то же время эта возможность совместима с облачными сервисами, уже используемыми разработчиками, но не взаимоисключающие.
использование интерфейса
Предварительный просмотр всего экспресс-процесса запроса
- Интерфейс экспресс-птицы Сначала зарегистрируйте учетную запись Express Bird, выберите бесплатную версию приложения для запроса логистики, вам нужно загрузить свою идентификационную карту и заполнить информацию о техническом персонале, просто напишите сами, после того, как приложение будет успешным, вы можете получить собственный ключ API и идентификатор пользователя
sarchстраница
После выбораselectCompanyВыбранный код компании курьера сохраняется в js-коде страницы. которыйcompanynameЗаполните информацию о номере отслеживания, которая будет искать в поле поиска, используйтеexpспасти
Вы можете получить два параметра, используя интерфейс. Таким образом получаются два параметра для использования интерфейса, подробнее см.Интерфейс API для мгновенных запросов Express Birdиспользование
Ниже приведены конкретные параметры запроса.
Следующая обработка должна быть выполнена для части Datasign запрошенных данных.
- Используйте функцию MD5 в наборе инструментов для выполнения операций шифрования.
(util.md5(RequestData + 'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e'))
Запрошенные данные должны быть закодированы функцией encodeURI(), которая может кодировать строку как URl.
- Используйте алгоритм кодирования Base64 в наборе утилит для кодирования данных запроса в формат base64.
Base64 — самый популярный метод кодирования на сегодняшний день, потому что его легко и быстро программировать.
Преимущества: base64 особенно подходит для быстрой передачи данных по протоколу http.- Наконец, подпись содержимого данных кодируется encodeURI, и данные запроса готовы.
Запрошенный адрес, данные и формат заголовка запроса приведены в следующем коде, поэтому здесь нет необходимости говорить больше.
var util = require('../../utils/util.js')
const db = wx.cloud.database()
const expresses = db.collection('expresses')
const app = getApp()
getExpressInfo:function(nu,cb){
//查物流
//快递公司和，快递单号
let companyname=wx.getStorageSync("codename")||"YTO";
let company = wx.getStorageSync("company") || "圆通快递";
console.log(companyname);
let exp=nu.currentTarget.dataset.name
var logistics = [companyname,exp];//保存在一个数组中
this.setData({
ShipperCode:logistics[0],
LogisticCode:logistics[1]
})
//数据内容
var RequestData = "{'OrderCode':'','ShipperCode':'" + logistics[0] + "','LogisticCode':'" + logistics[1] + "'}"
//utf-8编码的数据内容
// OrderCode String 订单编号 O
// ShipperCode String 快递公司编码 R
// LogisticCode String 物流单号
console.log(RequestData)
var RequestDatautf = encodeURI(RequestData)
console.log("RequestDatautf:" + RequestDatautf) //签名
console.log(RequestData + 'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e')
var DataSign = encodeURI(util.Base64((util.md5(RequestData + 'eb016c6c-ab32-47b2-be8c-8fddf3f59c1e'))))
console.log("DataSign:" + DataSign)
if (logistics != null&&exp>999) {
wx.request({
url: 'https://api.kdniao.com/Ebusiness/EbusinessOrderHandle.aspx',
data: {
//数据内容(进行过url编码)
'RequestData': RequestDatautf,
//电商ID
'EBusinessID': '1399017',
//请求指令类型：1002
'RequestType': '1002',
//数据内容签名把（请求内容（未编码）+ApiKey）进行MD5加密，然后Base64编码，最后进行URL（utf-8）编码
'DataSign': DataSign,
//请求、返回数据类型： 2-json；
'DataType': '2',
},
header: {
'content-type': 'application/json'
},
success:(res)=> {
console.log(res)
let list = wx.getStorageSync("historys")||[];
var item = {
company: company,
code: logistics[1]
}
if (list==null||list.length=== 0||list.every(res => { return res.code!==logistics[1] })) {
list.push(item);
}
wx.setStorage({
key: 'historys',
data: list,
})
this.setData({
historyList: list
})
this.setData({
delectHistory: "清楚历史记录",
historyOrder: "历史记录"
})
// this.setData({ mydata: res.data})
expresses.where({
code:exp
}).count().then(res3=>{
if (res3.total == 0){
expresses.add({
data: {
message: res.data,
code: exp
}
})
} else {
// wx.showToast({
// // title: '不能重复加'
// })
}
})
.then(res2 => {
if(res.data.State>1) {
wx.navigateTo({
url: '../Todetail/index',
})
}
wx.setStorage({
key: 'code',
data: exp,
}),
wx.setStorage({
key: 'nowcompany',
data: logistics[0],
})
})
}
})
}
},
Распечатать после успешного запроса данныхres.data
Модель данных M-Model
V - просмотр просмотра страницы
Данные VM -ViewModel привязаны к уровню модели представления интерфейса -> шаблон {{}}
- Отображается в истории.Чтобы история с ключом историй не была получена из хранилища в первый раз, лучше написать так
let list = wx.getStorageSync("historys")||[];, если массивlistЕсли он пуст или нет запрашиваемого номера курьера, добавьте , иначе он не будет добавлен и сохраненthis.setData({historyList: list})повторный рендеринг страницы - Хранить информацию о курьере, соответствующую текущему номеру курьера, в облачной базе данных.
- Перейти на страницу сведений о логистике, отобразить.
- Использование интерфейса карты Tencent Окончательный эффект показан ниже
Однако на стороне мобильного телефона всегда есть ошибка.Z-индекс написан в стиле, чтобы указать порядок укладки элементов.На стороне мобильного телефона отображается только карта, но это только эффект. Интерфейс карты Tencent должен быть вОткрытая платформа карты TencentПодайте заявку на регистрацию, используйте API для получения информации о широте и долготе текущего адреса и используйте обратный адресный запрос для получения текущего местоположения.Здесь в качестве фонового изображения получается только карта. Вы можете посмотреть мой исходный код на github
- Логика этой страницы заключается в том, чтобы получить номер курьера и балансовую единицу. В четырех случаях есть два эффекта интерфейса. Один эффект интерфейса отображается, если запрос не найден. Это очень просто. Нажмите на запрос, чтобы отобразить другое состояние интерфейса, который относится к той же цели и получен в функции onLoad.
onLoad(options) {
let company = wx.getStorageSync("company");
this.setData({
company
})
let codeExpress=options.contentId
// console.log(codeExpress);
this.getLocation()
if(!codeExpress){
let code = wx.getStorageSync("code")
console.log(code);
this.setData({
code,
})
}else{
var Navcode = codeExpress.substr(5);
let company=codeExpress.substr(0,4);
console.log(company);
this.setData({
code:Navcode,
company:company
})
console.log(Navcode);
}
let code=this.data.code;
expresses.where({
code:code
}).get().then(res=>{
this.setData({
tracesList:res.data,
Traces:res.data[0].message.Traces
})
console.log(res.data);
let Traces=this.data.Traces;
this.showdetail();
this.packageData(Traces);
})
},
Использование компонентов
Здесь используется компонент диалога, нажмите清楚历史记录, который вызывает диалог.
- Нажмите диалоговое окно для подтверждения, вся история очистки
- Нажмите на диалоговое окно, чтобы отменить, скрыть диалоговое окно и очистите историю
- Компоненты Использование компонентов впервые представлено в index.json.
{
"wxc-dialog": "/components/dialog/dialog"
}
-
Соответствует коду, используемому в search.wxml
-
Внесите компонент диалога в компоненты в search.wxml
dialog
<view class='clear-history' bindtap='onSHowdialog'>{{delectHistory}}</view>
<wxc-dialog class="wxc-dialog" title="确认全部清除"bindcancel="onCancel" bindconfirm="delectHistory"></wxc-dialog>
</view>
- Сформированный js записывается так
onGotUserInfo(e) {
this.triggerEvent('confirm', e)
//向外传递
}
- Кнопка OK в компоненте вызывает собственный
onGotUserInfoметод
<button class="getUserInfo_btn" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">确定</button>
Нажмите OK, чтобы открыть страницу search.js.
bindconfirm="delectHistory"событие, очистить историю и эхо-страницу
Страница может передавать данные реквизита компоненту, чтобы компонент отображался на странице.
Компоненты могут отвечать за связь с вызывающей частью страницы.
Оптимизация инкапсуляции запросов
Инкапсулирован в пакет util, используя обещания для возврата объектов обещаний, которыми затем можно манипулировать. Универсальная инкапсуляция wx.request
const $get = (url, data = {}) => {
//发送请求
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function (res) {
resolve(res)
},
fail: function () {
reject()
},
complete: function () {
}
})
})
}
module.exports = {
$get,
}
Данные в запросе easy-mock на домашней странице — это инкапсуляция запроса в классе util, который может реализовать множественные вызовы и повторные вызовы, а также реализовать повторное использование кода. Функция getList() используется для получения данных
getList(type) {
this.setData({
isLoading: true,
hasMore: true
})
type === 'down' ? this.setData({ page: 0 }) : null;
util.$get('https://www.easy-mock.com/mock/5bca919de6742c1bf8220b50/example/express#!method=get', ).then(res => {
if (res.statusCode == 200) {
this.processData(type, res.data.data.expressList)
}
}).catch(e => {
this.setData({
isLoading: true,
hasMore: false
})
wx.stopPullDownRefresh()
wx.showToast({ title: `网络错误!`, duration: 1000, icon: "none" })
})
},
Когда страница запрашивает данные на две страницы, появляется查看全部Нажмите, чтобы перейти на другую страницу
Работает функция onReachBottom().Каждый раз, когда вы достигаете нижней части страницы, проверьте значение страницы в это время, если оно меньше 3, подтяните вверх, чтобы обновить, и отвечает за остановку обновления. Измените стиль на «Отображение дна» В слое модели поместите
bottomshowЗначение изменяется наtrue
<text class='{{bottomshow== true? "bottomshow":"hide"}}' bindtap='watchMore'>查看全部</text>
onReachBottom() {
if (!this.data.isLoading) { // 防止数据还没回来再次触发加载
return;
}
if(this.data.page<=3){
this.getList('up')
}else{
wx.stopPullDownRefresh()
this.setData({
bottomshow:true
})
}
样式hide对用代码
.hide{
display: none;
}
умное использование toView
- Предварительный просмотр эффекта
- selectCompany.wxml, где внешний слой зацикливает список companyList, сначала выводит правую боковую панель AZ, затем выводит заглавные буквы A, B, C... элемента списка, и внутренний цикл элемента, внутренний цикл зацикливается каждая заглавная буква соответствует списку компаний, начинающихся с этой заглавной буквы,
scroll-viewКаждая динамическая настройкаid='{{item.number}}'настраиватьscroll-into-view="{{toView}}"Запускается при нажатии A, B, C, D... Z на боковой панелиbindtap='switchTab'установить соответствующийtoView. - Тут есть странный момент, то есть в списке компаний с этой буквой не появляется буква I. Исходный новобранец заворачивает клик и возвращается на А. Я думаю пользователь либо не кликнет, либо кликнет соседнюю и случайно нажать не на тот. Когда вы можете нажать I ,
scroll-into-viewПерейдите к соседнему и добавьте условие суждения в switchTab, и все готово.
switchTab(e){
if (e.currentTarget.dataset.id=="I"){
this.setData({
curIndex: e.currentTarget.dataset.index,
toView: "F",
})
}
console.log(e);
this.setData({
curIndex:e.currentTarget.dataset.index,
toView: e.currentTarget.dataset.id,
})
},
весь код прокрутки
<scroll-view class='company' scroll-y bindscrolltoupper="upper" bindscrolltolower="lower" scroll-into-view="{{toView}}">
<view class='select-list'>
<view class='select-word' wx:for="{{scrollList}}" wx:key="{{index}}" data-index='{{index}}' data-id="{{item}}" bindtap='switchTab'>
{{item}}
</view>
</view>
<view class='item-A' id='{{item.number}}' hover-stay-time='3000' wx:for="{{comList}}" wx:key="{{index}}" wx:for-item="item" scroll-with-animation="true" scroll-animation-duration="3000">
<text>{{item.number}}</text>
<view class='company-item' wx:for="{{item.list}}" wx:key="{{index}}" bindtap='backwithData' data-text='{{item.text}}' data-src="{{item.pic}}">
<image src='{{item.pic}}' class='item-image' mode='acpectFill'></image>
<text class='item-text'>{{item.text}}</text>
<icon>
<image src='{{item.likepic}}' class='icon'></image>
</icon>
</view>
</view>
</scroll-view>
- Эхо на предыдущую страницу Нажмите для запуска при выборе строки
bindtap='backwithData'wx.navigatBack() изменяет данные на предыдущей странице, сохраняет логотип компании, текст компании, хранилище кода компании и отображает данные, полученные на предыдущей странице. код показывает, как показано ниже
var pages = getCurrentPages();
var Page = pages[pages.length - 1];//当前页
var prevPage = pages[pages.length - 2]; //上一个页面
var info = prevPage.data //取上页data里的数据也可以修改
prevPage.setData({ src,company })//设置数据
wx.navigateBack({
})
Использование облачных функций, Облачная функция используется здесь для запроса подходящих элементов списка коллекции базы данных и их удаления.Облачная функция имеет более высокие разрешения и может напрямую изменять облачную базу данных.Разрешения облачной консоли такие же, как и у терминала управления. , и иметь все разрешения. Однако функция Shuyun не очень хороша, то есть ее приходится загружать и развертывать каждый раз, когда она модифицируется. Более поздние обновления проекта продолжат использовать облачные функции для решения проблем.
Здесь написаны только основные часто используемые запросы экспресс-логистики, как показано ниже,
Для обработки данных, полученных позже, поскольку полученные данные являются ретроспективными, я сначала используюpackageData()Обработайте его, отсортируйте отдельные данные или список, требуемый страницей, сохраните и отобразите их.
Эпилог
Подводя итог, используйте название курьерской компании, чтобы найти соответствующий код, номер курьера получается из пользовательского ввода или события клика на главной странице, а затем запросите запрос, последняя страница является отображаемым результатом, а путь задача по маркировке не выполнена, в связи с большой инженерией проекта, давайте просто сделаем основную часть, про инкапсуляцию компонентов, вызовы методов и отображение эффектов, должно быть больше интересных эффектов, давайте поиграем в проект здесь, а затем научимся и добавим медленно.
Спасибо читателям за прочтение Если в статье есть какие-то ошибки или неуместности, пожалуйста, не стесняйтесь, дайте мне знать.
Ваша похвала и одобрение станут солнечным лучом на моем пути к коду, придадут мне смелости и твердости, чтобы двигаться вперед.
адрес проектаобслуживать