续集关于上次简单微信小程序制作 (快递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 技术概述

  1. 使用 JSON 技术来表现应用的配置信息。包含应用的基本信息,页面配置和路由,应用全体的信息等。
  2. 使用经过定制 HTML+CSS 技术来实现视图层的描述。画面元素,例如列表、按钮、文本框、选择框等都通过 HTML 语言来描述,遵从 HTML 语法,对于页面的共同风格,使用 CSS 进行定义。
  3. 使用 JavaScript 语言来实现逻辑层结构。包括用户操作的处理,系统 API 的调用等。
  4. 架构在视图层和逻辑层之间提供数据和事件传输功能,从而尽量减少难度。由于类似应有都属于轻应用,所以提供的功能都比较单一。
    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 () {

},
//组件的值发生变化时调用该方法
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 {
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   
            李佳伟 
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值