微信公众号开发

uniapp和微信小程序 GEt对接口

本文主要是介绍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和微信小程序 GEt对接口的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!