mpvue实现微信小程序快递单号查询代码


Posted in Javascript onApril 03, 2020

mpvue是什么?

mpvue 是一套定位于开发小程序的前端开发框架,其核心目标是提高开发效率,增强开发体验。使用该框架,开发者只需初步了解小程序开发规范、熟悉 Vue.js 基本语法即可上手。框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行。此外,框架还通过 vue-cli 工具向开发者提供 quick start 示例代码,开发者只需执行一条简单命令,即可获得可运行的项目。

mpvue简介点击查看:http://mpvue.com/

mpvue刚出来的时候确实很火,但目前好像没有维护,不是很好找官方的文档,只能通过各大论坛的大佬们总结的文章去研究和论证

使用快递100的接口 https://m.kuaidi100.com ,mpvue也是完全遵循原生微信小程序的语法,所以接口只允许https.~~~~

**在app.vue主文件里面定义一个 globalData 并初始化一个订单集合

globalData: {~~~~
 orderInfo: []
 }

**

mine页面

在此过程中我踩了一个大坑

引入主文件的全局数据需要和vue项目一样

import {app,globalData} from "../../app.vue"; ~~~~

两个简单输入框~~以及绑定了输入事件~~ mpvue也是完全支持v-model的~~~~

<view class="section">

<input class="order-input" placeholder="请输入订单号" @change="bindChange" v-model="value" id="orderId" />
<input class="order-input" placeholder="请输入快递公司拼音如shunfeng" @change="bindChange" v-model="value" id="company" />
</view>

查询按钮~~~~

<button class="query-btn" size="default" type="primary" loading="" @click="search"> 查询 </button>

在methods里面写入相应的方法

methods:{

//上面的方法~~~~
  bindChange: function (e) {
   console.log(e);
   var id;
   var value;
   id = e.currentTarget.id;
   value = e.mp.detail.value + '';
   this.inputCon[id] = value;
  },
  search: function () {
  
   var that = this;
   var type = that.inputCon.company;
   var postid = that.inputCon.orderId;
   var data = {
    'type':type,
    'postid':postid
   }
   console.log(this.globalData.queryInfo);
   console.log(data);
   
   this.globalData.queryInfo=data;
   console.log(app);
   wx.request({
    url: 'https://m.kuaidi100.com/query',
    data: data,
    header: {
    'content-type': 'application/json'
    },
   success: (res)=> {
   var errTip = res.data.message;
   var orderInfo = res.data.data;
   console.log(orderInfo);
   if(orderInfo.length == 0) {
  
    console.log(errTip)
    // that.setData({
    // errTip:errTip
    // })
    this.errTip=errTip
    return
   }
   // that.setData({
   //  errTip:''
   //  })
   this.errTip=""
   this.globalData.orderInfo = orderInfo;
   console.log( this.globalData.orderInfo)
   wx.navigateTo({
    url: '../order/main'
   });
   wx.setNavigationBarTitle({
    title: data.postid
   });
   }
  })
  }

 }

点击查询按钮后跳订单详情页面~~~~
order页面内容
~~

<template>

<view class="order-list">

<block v-for="(item,index) in orders" :key="index">
 <view class="order-time">{{item.ftime}}:</view>
 <view class="order-txt">{{item.context}}</view>
</block>
</view>

</template>

<script>

export default {

data(){
  return{
   orders:[]
  }
 },
onLoad: function(options) {

拿订购信息并渲染

console.log(options);
console.log(this.globalData.orderInfo)
 var orderInfo = this.globalData.orderInfo;
 this.orders=orderInfo
}

};

</script>

<style>

</style>

就这样ok了,当然功能还不是很人性化,因为输入快递名称需要使用拼音,完全依赖于原接口,后面想着如何优化一下

总结

到此这篇关于mpvue实现微信小程序快递单号查询的文章就介绍到这了,更多相关mpvue微信小程序单号查询内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
Js切换功能的简单方法
Nov 23 Javascript
远离JS灾难css灾难之 js私有函数和css选择器作为容器
Dec 11 Javascript
Extjs407 getValue()和getRawValue()区别介绍
May 21 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
基于ajax与msmq技术的消息推送功能实现代码
Dec 26 Javascript
vue.extend实现alert模态框弹窗组件
Apr 28 Javascript
React Hooks的深入理解与使用
Nov 12 Javascript
vue-cli3 项目从搭建优化到docker部署的方法
Jan 28 Javascript
深入解析vue 源码目录及构建过程分析
Apr 24 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
详解Node.js如何处理ES6模块
May 15 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 #Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 #Javascript
JavaScript检测浏览器是否支持CSS变量代码实例
Apr 03 #Javascript
JS内置对象和Math对象知识点详解
Apr 03 #Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 #Javascript
JavaScript鼠标拖拽事件详解
Apr 03 #Javascript
Javascript组合继承方法代码实例解析
Apr 02 #Javascript
You might like
vBulletin Forum 2.3.xx SQL Injection
2006/10/09 PHP
php中常用编辑器推荐
2007/01/02 PHP
php中require和require_once的区别说明
2014/02/27 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
PHP获取文件相对路径的方法
2015/02/26 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
jquery分页插件jpaginate在IE中不兼容问题
2014/04/22 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
2019/04/02 Javascript
JS中注入eval, Function等系统函数截获动态代码
2019/04/03 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
javascript实现数字时钟效果
2021/02/06 Javascript
[02:41]DOTA2英雄基础教程 冥魂大帝
2014/01/16 DOTA
Python中使用装饰器和元编程实现结构体类实例
2015/01/28 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
python提取包含关键字的整行数据方法
2018/12/11 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
如何将anaconda安装配置的mmdetection环境离线拷贝到另一台电脑
2020/10/15 Python
PHP面试题大全
2015/10/16 面试题
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
2015年采购员工作总结
2015/04/27 职场文书
教师创先争优承诺书
2015/04/27 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
入党介绍人意见2015
2015/06/01 职场文书
高中体育课教学反思
2016/02/16 职场文书
JavaScript实现两个数组的交集
2022/03/25 Javascript
SpringCloud Function SpEL注入漏洞分析及环境搭建
2022/04/08 Java/Android
win10搭建配置ftp服务器的方法
2022/08/05 Servers