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

上次给大家简单介绍了小程序的实现原理以及传统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文件

快递公司：

快递单号：

查询

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});}
});

}
})

4.3 index.wxml文件

快递公司：

快递单号：

查询

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 {
border-bottom: 1px solid #ddd;
display: inline-block;
width: 50%;
}

4.5 index.js文件
{
“navigationBarTitleText”: “快递100查询”
}

border-bottom: 1px solid #ddd;
display: inline-block;
width: 50%;
}

4.5 index.js文件
{
“navigationBarTitleText”: “快递100查询”
}

 12.08   李佳伟

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

微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
个人怎么制作微信小程序，微信小程序可以免费制作吗？微信小程序制作教程
微信小程序微信小程序,小程序的一种,英文名Wechat Mini Program,是一种不需要下载安装即可使用的应用,它实现了应用"触手可及"的梦想,用户扫一扫或搜一下即可打开应 ...
微信小程序云开发成绩查询小程序的制作过程。
微信小程序云开发成绩查询小程序的制作过程. 如果觉得我讲的好可以点个关注. 明确自己的目的,到底要做一个怎么样的小程序. 我先上效果图: 确定后就可以开始自己布局.主要是用css 1.先看首页,首页主 ...
初学者需看：微信小程序制作步骤
微信小程序已成为移动应用开发的重要形式之一.它为用户提供了便捷的服务,也为开发者提供了简单的工具,使他们能够轻松地构建功能丰富的应用程序.本文将通过一个案例来介绍微信小程序的制作步骤,让初学者能够了解 ...
一款简单微信小程序个人博客
简介: 一款简单微信小程序个人博客.后端基于SpringBoot实现网盘下载地址: http://kekewl.cc/7ZS91CtWjfu0 图片:
微信小程序制作——获取用户信息
微信小程序制作--获取用户信息 1.获取用户信息方式一 wxml <view bindtap="getUserName">获取当前用户名</view> j ...
微信小程序开发难？资深大V教您微信小程序制作步骤和方法
微信小程序开发难?资深大V教您微信小程序制作步骤和方法一.登录微信公众平台就能在菜单"开发"---"基本配置"中看到小程序的AppID了,小程序的 Ap ...
小程序微信统计表格_微信小程序制作表格的方法
本文实例为大家分享了微信小程序制作表格的具体代码. 微信小程序中没有专门的表格制作工具,不过使用列表渲染可以实现, 下面是我做的表格图片: 方法如下: 在XXX.wxml中填写下面的代码参数内容 ...
html制作炸金花,微信小程序怎么制作炸金花?微信小程序制作炸金花的方法
很多朋友喜欢玩炸金花游戏,那么怎么在微信小程序上制作炸金花呢?下面就是小编带来的完整详细的教程,想要学习的小伙伴就赶紧看过来吧. 微信小程序怎么制作炸金花?微信小程序制作炸金花的方法 app.json ...

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

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

最新文章

热门文章

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

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

最新文章

热门文章

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

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