网站订票策划方案,网站内的地图导航怎么做的,怎么seo快速排名,深圳网站建设那家好微信小程序之手机归属地查询
需求描述 API申请和小程序设置
API申请
第一步#xff1a;完整账号注册 我们需要来到如下网站#xff0c;注册账号#xff1a;万维易源
第二步#xff1a;账号注册完成以后#xff0c;点击右上角的控制台信息。 第三步#xff1a;在控制…微信小程序之手机归属地查询
需求描述 API申请和小程序设置
API申请
第一步完整账号注册 我们需要来到如下网站注册账号万维易源
第二步账号注册完成以后点击右上角的控制台信息。 第三步在控制台界面选择接口使用者-appKey管理 第四步在appKey管理界面点击添加按钮在应用中输入自己想要的名字白名单非必填可调用接口搜索手机可以查询到对应的如下信息选择以后点击“立即创建”。 第五步设置以后我们便可以看到我们常见的appKey了。
小程序设置
在小程序中我们应用的API不是随便能够使用的是需要在小程序中进行设置才能够使用。 第一步登录小程序管理后台微信公众平台 第二步在小程序后台点击管理-开发管理中的开发设置 第三步在开发设置中鼠标滚轮往下拉找到服务器域名设置然后点击右侧修改按钮在request合法域名中讲我们设置的需要的api加入进去结果如下 至此我们的API Key的申请以及小程序的设置已经完成我们可以正式开发我们的业务。
业务实现
代码框架
我们的业务代码框架如下
代码实现
app.json实现
总体基调设置如下
{pages: [pages/index/index,pages/logs/logs ],window: {backgroundTextStyle: dark,navigationBarBackgroundColor: #FFFFFF,navigationBarTitleText: 手机号码归属地查询,navigationBarTextStyle: black},sitemapLocation: sitemap.json
}util.js实现
const formatTime date {const year date.getFullYear()const month date.getMonth() 1const day date.getDate()const hour date.getHours()const minute date.getMinutes()const second date.getSeconds()return [year, month, day].map(formatNumber).join() [hour, minute, second].map(formatNumber).join()
}const formatNumber n {n n.toString()return n[1] ? n : 0 n
}module.exports {formatTime: formatTime
}index.wxml实现
界面布局实现
!--pages/index/index.wxml--
view classtelview classinputinput typenumberplaceholder请输入查询的手机号bindinputbindInput/input/viewview classbuttonbutton bindtapbindSearch查询/button/viewview classinfotext温馨提示查询结果仅供参考以当地营业厅查询结果为/text/viewview classresult_captiontext{{ret_code}}/text/viewview classresult hidden{{hidden}}view classrow bg所查号码/viewview classrow bg{{number}}/viewview classrow归属省/viewview classrow{{prov}}/viewview classrow bg归属地区/viewview classrow bg{{city}}/viewview classrow运营商/viewview classrow{{name}}/viewview classrow bg城市编码/viewview classrow bg{{cityCode}}/viewview classrow邮政编码/viewview classrow{{postCode}}/view/view
/viewindex.wxss实现
界面样式实现
/* pages/index/index.wxss */
.tel {width: 70%;margin: 0 auto;font-size: 30rpx;
}
.tel view {margin: 15rpx 0;
}
.input input {border: 1rpx solid #eee;background-color: #eee;padding: 18rpx;border-radius: 8rpx;color: #666;
}
.button button {background-color: #0080ff;color: white;
}
.info text {color: #999;font-size: 24rpx;
}
.result_caption text {color: #0080ff;
}
.result {display: flex;flex-wrap: wrap;color: #666;border: 1rpx solid #999;
}
.result .row {flex-basis: 50%;box-sizing: border-box;margin: 0;padding: 10rpx;
}
.result .bg {background-color: #eee;
}index.js实现
业务实现如下
// pages/index/index.js
const util require(../../utils/util.js);
Page({/*** 页面的初始数据*/data: {//APPIDappid: 上述API申请的ID,//密钥sign: 上述API申请的签名,//当前查询的时间timesTamp : util.formatTime(new Date()),//手机号码number : ,//默认隐藏hidden:true,//省份prov: ,//城市city: ,//卡类型name: ,//判断ret_code: ,},//输入手机号bindInput : function (e) {//查询得到手机号this.setData({number : e.detail.value});},//查询号码bindSearch : function (e) {var that this;//请求wx.request({url: https://route.showapi.com/6-1?num that.data.number showapi_appid that.data.appid showapi_timestamp that.data.timesTamp showapi_sign that.data.sign,success : function (e) {//获取归属地数据var result e.data.showapi_res_body;//判断手机号码是否合法if (result.ret_code -2) {that.setData({ret_code: 对不起您查询的号码有误,hidden : true});} else {that.setData({ret_code: 结果如下,hidden: false,prov: result.prov,city: result.city,name: result.name,postCode: result.postCode,cityCode: result.cityCode});}}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})我们可以看到通过API调用返回的结果如下 至此我们完成手机归属地的开发内容。
