uniapp和微信小程序 GEt对接口
作者：互联网
微信小程序
<!--pages/Jiekou/Jiekou.wxml-->
<input class="inp" placeholder="请输入" bindinput="usernameInput" />
<button bindtap="but">点击</button>
<!-- wx:if="{{isShow}}" -->
<view class="cc" wx:if="{{isShow}}">
<view class="gggg">
<view>ip:{{ip}}</view>
<view>国家：{{wanAndroidDatas.Country}}</view>
<view>省份：{{wanAndroidDatas.Province}}</view>
<view>城市：{{wanAndroidDatas.City}}</view>
<view>营业：{{wanAndroidDatas.Isp}}</view>
</view>
</view>
// pages/Jiekou/Jiekou.js
Page({
/**
* 页面的初始数据
*/
data: {
wanAndroidDatas: [],
key: 'f3d1996fe09d456a733c7c88301ab178',
isShow: false
},
/**
* 生命周期函数--监听页面加载
*/
onl oad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
usernameInput: function (e) {
console.log(e)
this.setData({
ip: e.detail.value//获取input的输入值
})
},
but: function () {
var that = this;
var ip = this.data.ip//获取input的输入值传给自定义的参数名 例如 ip
// console.log(this.data.ip)
let rea = /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))+$/;
// let rea = /^[0-9.]+$/;//数字
// let reg = /^[a-zA-Z]+$/; //英语大小写
// let rej = /^[\u4e00-\u9fa5]+$/; //汉字
if (this.data.ip == '' || this.data.ip == null) {
wx.showToast({
title: '不能为空',
icon: 'none',
duration: 2000
})
} else if (!rea.test(this.data.ip)) {
wx.showToast({
// title: '不能为字母、汉子',
title: '你IP输入错误：如1.192.177.192',
icon: 'none',
duration: 2000
})
}
// else if (this.data.ip == '' || this.data.ip == null) {
// wx.showToast({
// title: '不能为空',
// icon: 'none',
// duration: 2000
// })
// } else if (reg.test(this.data.ip)) {
// wx.showToast({
// title: '不能为字母',
// icon: 'none',
// duration: 2000
// })
// } else if (rej.test(this.data.ip)) {
// wx.showToast({
// title: '不能为汉字',
// icon: 'none',
// duration: 2000
// })
// }
else {
wx.login({
complete: (res) => {
console.log(res)
wx.request({
url: 'http://apis.juhe.cn/ip/ipNew?key=f3d1996fe09d456a733c7c88301ab178',
data: {
ip//这是自定义的参数名获取input的值请求接口相对的值 参数名
},
header: {
'content-type': 'application/json; charset=utf-8'
},
method: "GET",
success: res => {
console.log(res)
if (res.data.resultcode == 200) {
console.log(res)
that.setData({
isShow: true,
wanAndroidDatas: res.data.result
})
setTimeout(function () {
that.setData({
isShow: false,
})
}, 15000)
} else {
wx.showToast({
title: '你IP输入错误：如1.192.177.192',
icon: 'none',
duration: 2000
})
}
}
})
}
})
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
/* pages/Jiekou/Jiekou.wxss */
.inp{
margin: 24px auto;
background-color: #dddddd;
width: 90%;
height: 50px;
border-radius: 6px;
padding: 0 12px;
}
.das{
width: 100%;
height: 50%;
background-color: black;
color: #FFF;
}
.cc{
transform: auto;
background-color: rgba(197, 197, 197, 0.61);
margin: 24px auto;
padding: 24rpx 0;
width: 80%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
border-radius:12rpx ;
}
.gggg{
width: 60%;
margin: 12rpx auto;
}
.gggg view{
width: 90%;
margin: 12rpx auto;
}
uniapp
<template>
<view class="content">
<input class="oa" v-model="q" :value="q" placeholder="请输入想测的字或者词语" />
<button class="but" @click="Bun">点击</button>
<!-- <view wx:if="isShow">{{ip}}</view> -->
<view class="ba" v-show="isShow">
<view class="aa" v-for="item in das" >
<view>{{item.title}}</view>
<view>{{item.des}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
q: '',
isShow: false,
das: [{
title: '',
des: '',
}]
}
},
onLoad() {
},
methods: {
Bun() {
console.log(this.men, this.women)
var that = this
let reg = /^[\u4E00-\u9FA5]+$/;//汉字
if (this.q == "" || this.q == null) {
uni.showToast({
title: '不能为空',
duration: 2000
})
} else if (!reg.test(this.q)) {
uni.showToast({
title: '不能为字符串、数字、空格、符号',
duration: 2000
})
} else {
uni.request({
url: 'http://v.juhe.cn/dream/query?key=7fabf5c6b23be8bee7fc6c8d389464e2&q=%E9%BB%84%E9%87%91', //仅为示例，并非真实接口地址。
data: { //参数
q: this.q,
},
header: {
'content-type': 'application/json; charset=utf-8' //自定义请求头信息
},
method: 'GET', //请求方式 或GET
success: res => {
if (res.data.result !== null) {
console.log(res.data);
this.isShow = true,
this.das = res.data.result
this.das.list = res.data.result.list
} else {
uni.showToast({
title: '没有你想要的东西',
duration: 2000
})
}
}
});
}
}
}
}
</script>
<style>
uni-page-body {
width: 100%;
}
.ba {
width: 96%;
height: 100%;
border: 2px solid #EEEEEE;
border-radius: 6px;
margin: 6px auto;
}
.oa {
width: 60%;
height: 50px;
padding: 0 24px;
margin: 24px auto;
background-color: #b1b1b1;
border: 1px solid #7f7f7f;
border-radius: 6px;
}
.but {
width: 90%;
height: 60px;
margin: 24px 0 0;
display: flex;
justify-content: center;
align-items: center;
}
.aa {
transform: auto;
width: 70%;
padding: 0 24px;
margin: 12px auto;
background-color: #55aaff;
border: 1px solid #55ffff;
border-radius: 6px;
}
.aa view {
margin: 16px 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
<template>
<view class="content">
<!-- <input class="oa" v-model="men" :value="men" />
<input class="oa" v-model="women" :value="women" /> -->
<view class=" uni-form-item uni-column">
<label>男生肖：</label>
<picker class="oa " @change="examinationType" :range="examinationTypeArray">
<label>{{ examinationTypeArrayType }}</label>
<image src="../../static/xia.png">
</picker>
</view>
<view class="uni-form-item uni-column">
<label>女生肖：</label>
<picker class="oa " @change="examinationType2" :range="examinationTypeArray2">
<label class="">{{ examinationTypeArrayType2 }}</label>
<image src="../../static/xia.png">
</picker>
</view>
<button class="but" type="default" @click="Bun">点击</button>
<view class="ba" v-show="isShow">
<view class="aa" >
<view>
男：{{das.men}}
</view>
<view>
女：{{das.women}}
</view>
<view>
{{das.data}}
</view>
</view>
</view>
</view>
</template>
<script>
export default {
components: {},
data() {
return {
examinationTypeArray: ['鼠', '牛', '虎', '兔'],
examinationTypeIndex: 0,
examinationTypeArrayType: '---请选择---',
examinationTypeArray2: ['鼠', '牛', '虎', '兔'],
examinationTypeIndex2: 0,
examinationTypeArrayType2: '---请选择---',
// men: '',
// women: '',
isShow: false,
das: {
men: '',
women: '',
data: '',
}
}
},
onLoad() {
},
methods: {
examinationType(e) {
this.examinationTypeIndex = e.target.value;
this.examinationTypeArrayType = this.examinationTypeArray[this.examinationTypeIndex]
},
examinationType2(e) {
this.examinationTypeIndex2 = e.target.value;
this.examinationTypeArrayType2 = this.examinationTypeArray2[this.examinationTypeIndex2]
},
Bun() {
console.log(this.men, this.women)
var that = this
if (this.examinationTypeArrayType == '' || this.examinationTypeArrayType2 == '') {
uni.showToast({
title: '不能为空',
duration: 2000
})
} else if (this.examinationTypeArrayType == '---请选择---' || this.examinationTypeArrayType2 == '---请选择---') {
uni.showToast({
title: '您还没选择属相',
duration: 2000
})
} else {
uni.request({
url: 'http://apis.juhe.cn/sxpd/query?key=009f32aa28d990b48fd494ee9edca971&men=%E7%8C%AA&women=%E7%BE%8A', //仅为示例，并非真实接口地址。
data: { //参数
// men: this.men,
// women: this.women,
men: this.examinationTypeArrayType,
women: this.examinationTypeArrayType2,
},
header: {
'content-type': 'application/json; charset=utf-8' //自定义请求头信息
},
method: 'GET', //请求方式 或GET
success: res => {
if (res.data.result !== null) {
this.isShow = true,
console.log(res.data);
this.das = res.data.result
} else {
uni.showToast({
title: '请求错误',
duration: 2000
})
}
}
});
}
},
}
}
</script>
<style>
uni-page-body {
height: 100%;
}
.uni-form-item {
width: 86%;
display: flex;
justify-content: space-between;
align-items: center;
margin: 12px 0 0 12px;
}
.oa {
margin: 0 auto;
width: 60%;
height: 30px;
border: 1px solid #7f7f7f;
border-radius: 6px;
display: flex;
align-items: center;
}
/deep/.oa div {
/* border: 1px solid #333333; */
width: 100%;
height: 30px;
padding: 0 12px;
display: flex;
justify-content: space-between;
align-items: center;
}
/deep/.oa div div {
width: 4px;
height: 20px;
margin: 0 12px 0 0;
display: flex;
justify-content: center;
align-items: center;
border: unset;
}
/deep/uni-image {
display: unset;
overflow: unset;
position: unset;
}
.oa image {
width: 10px;
height: 14px;
margin: 0 12px 0 0;
}
.but {
width: 90%;
margin: 24px 0 0;
}
.ba {
width: 96%;
height: 100%;
transform: auto;
border: 2px solid #EEEEEE;
border-radius: 6px;
margin: 6px auto;
}
.aa {
width: 70%;
height: 100%;
padding: 0 24px;
margin: 24px auto;
/* background-color: #b1b1b1;
border: 1px solid #7f7f7f;
border-radius: 6px; */
}
.aa view {
margin: 24px 0;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
标签：uniapp,res,GEt,data,对接口,title,width,ip,margin 来源： https://blog.csdn.net/YUlangML/article/details/116837172