续集关于上次简单微信小程序制作（快递100查询）

最新推荐文章于 2024-07-16 17:10:47 发布

怀院网络中心

最新推荐文章于 2024-07-16 17:10:47 发布

阅读量2.3k

点赞数 2

分类专栏：其他开发教程文章标签：小程序制作

本文链接：https://blog.csdn.net/hhxy_wlzx/article/details/84895427

版权

其他同时被 2 个专栏收录

12 篇文章 1 订阅

订阅专栏

开发教程

3 篇文章 0 订阅

订阅专栏

上次给大家简单介绍了小程序的实现原理以及传统APP与小程序的对比，这次给大家点干货：
一，移动互联网的八大平台
IOS、Android、H5、BAT、头条、手机厂商
动态App平台阵营（H5、BAT、头条、手机厂商），共有10个超级App、14家公司参与其中，他们是：微信、企业微信、QQ浏览器、支付宝、淘宝、钉钉、手机百度、今日头条、抖音、还有华为、小米、OPPO、VIVO、魅族、金立、联想、中兴、努比亚、一加等10家手机厂商联合成立的快应用联盟。
1.4小程序发展
艾媒咨询：http://www.iimedia.cn/62882.html

二、微信小程序的相关技术有哪些？
2.1 技术概述

使用 JSON 技术来表现应用的配置信息。包含应用的基本信息，页面配置和路由，应用全体的信息等。
使用经过定制 HTML+CSS 技术来实现视图层的描述。画面元素，例如列表、按钮、文本框、选择框等都通过 HTML 语言来描述，遵从 HTML 语法，对于页面的共同风格，使用 CSS 进行定义。
使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理，系统 API 的调用等。
架构在视图层和逻辑层之间提供数据和事件传输功能，从而尽量减少难度。由于类似应有都属于轻应用，所以提供的功能都比较单一。
2.2 JSON
JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于 ECMAScript（W3C 制定的 JavaScript 规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
2.3 HTML
html又称为超文本标记语言（英文：HyperText Markup Language，HTML）是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。1982年由蒂姆•伯纳斯-李创建，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。
2.4 CSS
层叠样式表（英文全称：Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
2.5 JavaScript
JavaScript 一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为 JavaScript 引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在 HTML 网页上使用，用来给 HTML 网页增加动态功能。
在1995年时，由 Netscape 公司的 Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为 Netscape 与 Sun 合作，Netscape 管理层希望它外观看起来像 Java，因此取名为 JavaScript。但实际上它的语法风格与 Self 及 Scheme 较为接近。
为了取得技术优势，微软推出了 JScript，CEnvi 推出 ScriptEase，与 JavaScript 同样可在浏览器上运行。为了统一规格，再加上 JavaScript 兼容于 ECMA 标准，因此也称为 ECMAScript。

三、如何创建并运行一个小程序？
微信公众平台：https://mp.weixin.qq.com/

四、快递100项目实战
4.1项目概述
借助第三方API查询全国大多数快递的快件的送货进度，需要提供快递单号。
快递：申通 3385793105027
4.2项目目标
在这里插入图片描述

4.5 index.json文件

var util = require(’…/…/utils/util.js’)
Page({
data: {
// 定义目前支持的快递公司
express: [‘圆通快递’, ‘申通快递’, ‘顺丰快递’, ‘韵达快递’, ‘德邦物流’, ‘中通快递’, ‘百世快递’, ‘邮政包裹’, ‘EMS’, ‘邮政国际’],
// 定义快递公司对应的key
key: [‘yuantong’, ‘shentong’, ‘shunfeng’, ‘yunda’, ‘debangwuliu’, ‘zhongtong’, ‘huitongkuaidi’, ‘youzhengguonei’, ‘ems’, ‘youzhengguoji’],
// 当前选择的快递公司索引，从0开始
index: 0,
// 快递单号
postId: ‘’,
// 返回与快递单号对应的快递单状态数据
data: [],
// 决定是否在按钮上显示正在装载动画，该属性为true，显示正在装载动画
loading: false
},
onLoad: function () {

},
//组件的值发生变化时调用该方法
bindExpressChange: function (e) {
var that = this;
console.log(that.data.key[e.detail.value]);
that.setData({
index: e.detail.value
});
},
// 在组件中输入内容时调用该方法
bindChangeInput: function (e) {
this.setData({
postId: e.detail.value
});
},
// 点击“查询”按钮调用该方法
bindOnSearch: function () {

var that = this;
//  获取要查询的快递单号 
var postId = that.data.postId;
//  获取当前选择的快递公司对应的key
var type = that.data.key[that.data.index];

if (!postId.length || !type.length) return;
//  显示正在装载动画
that.setData({
  loading: !that.data.loading
});
//  请求第三方API的Url
wx.request({
  url: 'https://robot.leanapp.cn/api/express/' + type + '/' + postId,
  header: {
    'Content-Type': 'application/json'
  },
  success: function (res) {
    console.log(res.data);
    //  如果成功返回数据，更新data变量，显示快递单状态数据
    that.setData({
      loading: !that.data.loading,
      data: res.data
    });
    
  }
});

}
})

4.3 index.wxml文件

快递公司：

{{express[index]}}

快递单号：

查询

{{item.context}}
{{item.time}}

{{data.message}}

4.4 index.wxss文件
.container {

border: 1px solid white;

}
.container-line {
padding-top: 40rpx;

}
.picker-select {
width: 50%;
display: inline-block;
border: 1px solid #ddd;
background-color: #FFF;
border-radius: 2px;
padding: 10rpx;
}
.input-post { var util = require(’…/…/utils/util.js’)
Page({
data: {
// 定义目前支持的快递公司
express: [‘圆通快递’, ‘申通快递’, ‘顺丰快递’, ‘韵达快递’, ‘德邦物流’, ‘中通快递’, ‘百世快递’, ‘邮政包裹’, ‘EMS’, ‘邮政国际’],
// 定义快递公司对应的key
key: [‘yuantong’, ‘shentong’, ‘shunfeng’, ‘yunda’, ‘debangwuliu’, ‘zhongtong’, ‘huitongkuaidi’, ‘youzhengguonei’, ‘ems’, ‘youzhengguoji’],
// 当前选择的快递公司索引，从0开始
index: 0,
// 快递单号
postId: ‘’,
// 返回与快递单号对应的快递单状态数据
data: [],
// 决定是否在按钮上显示正在装载动画，该属性为true，显示正在装载动画
loading: false
},
onLoad: function () {

var that = this;
//  获取要查询的快递单号 
var postId = that.data.postId;
//  获取当前选择的快递公司对应的key
var type = that.data.key[that.data.index];

if (!postId.length || !type.length) return;
//  显示正在装载动画
that.setData({
  loading: !that.data.loading
});
//  请求第三方API的Url
wx.request({
  url: 'https://robot.leanapp.cn/api/express/' + type + '/' + postId,
  header: {
    'Content-Type': 'application/json'
  },
  success: function (res) {
    console.log(res.data);
    //  如果成功返回数据，更新data变量，显示快递单状态数据
    that.setData({
      loading: !that.data.loading,
      data: res.data
    });
    
  }
});