微信小程序 星座查询

微信小程序 星座查询

1、界面布局

1. .xml代码

<image class="anime_bg" src="/images/cartoon_2.jpg"></image>
<!-- 动漫化图片容器 -->
<view class="anime_wrap">
<!-- <image src="{{anime_img}}" bindtap="previeImg"></image> -->
<text class="text1">{{motto}} </text>
<text class="text2"><text style="color: rgb(157, 255, 0);">特点：</text>{{text_zxtd}} </text>
<text class="text2"><text style="color: rgb(157, 255, 0);">幸运色：</text>{{text_xyys}}</text>

<text class="text2"><text style="color: rgb(157, 255, 0);">幸运数字:</text>{{text_xyhm}}</text>
<text class="text2"><text style="color: rgb(157, 255, 0);">优点：</text>{{text_yd}}</text>
<text class="text2"><text style="color: rgb(157, 255, 0);">行事风格：</text>{{text_xsfg}}</text>
<text class="text2"><text style="color: rgb(157, 255, 0);">总体评价：</text>{{text_zj}}</text>
</view>
<view class="input_1">
<input class="search" placeholder="请输入内容: 2021-05-21"placeholder-class="search-placeholder" auto-focus bindchange="handleSearch"></input>
</view>[];.

3、.wxss代码

.anime_bg{
  width:100Vw;
  height: 100vh;
  /* display: inline-block; */
  }
  .anime_wrap{
  position:fixed;
  width: 80vw;
  height: 61vh;
  left: 8vw;
  /* 距地面的距离 */
  bottom: 27vh;
  border: 2vw solid rgba(255, 255,255, 0.5);
  /* 滚动  */
  overflow: scroll;
  }
  .anime_wrap image{
    /* inherit属性的意思是被应用属性继承父级的该属性 */
  width: inherit;
  height: inherit;
  display: block;
  opacity: 0.9;
  }
  .button_wrap{
  position: fixed;
  bottom: 16vh;
  left: 0;
  width: 100%;
  height: auto;
  text-align: center;

  }
  .button_wrap button{
  display: inline-block;
  /*  */
  width: 36vw !important;
  margin: 0 30rpx !important;
  color: #fff;
  background: #108c33;
  }
.text1{
color: #fff;
text-align: center;
display: block;

}
.text2{
  color: #fff;
  display: block;
  
  
}
.input_1{
  position: fixed;
  width: 100%;
  bottom: 10vh;
  /* 弹性布局 */
  display: flex;
  justify-content: center;
  /* border-bottom: 1px solid #ccc; */
  margin-bottom: 24rpx;
  height: 80rpx;
  /* background-color:#fff; */
  text-align:center ; 
}
.search{
width: 600rpx;
height: 80rpx;
background-color: #fff;
border: 4rpx solid red;

}

4、js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // anime_img:"/images/cartoon_1.jpg"
    motto:"",//存储星座
    text_zxtd:"",//特点
    text_xyys:"",//幸运色
    text_xyhm:"",//幸运数字
    text_yd:"",//优点
    text_xsfg:"",//行事风格
    text_zj:"",//总体评价
    text_value:"",//获取文本值
  },
  //键盘事件
  handleSearch(e){
    console.log(e,"value")
    //把文本的值给text_value
    this.data.text_value = e.detail.value
    this.setData({
      //重置
   text_value:this.data.text_value
})
console.log(this.data.text_value)

    wx.request({
      url: 'http://apis.juhe.cn/fapig/constellation/query?key=  自己的key &keyword='+this.data.text_value,
     
      header:{'Content-Type':'application/x-www-form-urlencoded'},
    method:'POST',
   
    timeout:8000,
      success:res=>{
        
        console.log(res);
      //获取值
      if(res.data.error_code==0){
        //显示模态对话框
        wx.showModal({
          title:"温馨提示",
          content:"已经知晓",
          confirmText:"确认",
          showCancel:false
        })
           this.setData({
           motto:res.data.result.name,
           text_zxtd:res.data.result.zxtd,
           text_xyys:res.data.result.xyys,
           text_xyhm:res.data.result.xyhm,
           text_yd:res.data.result.yd,
           text_xsfg:res.data.result.xsfg,
           text_zj:res.data.result.zj
        })
      } else{

        //显示模态对话框
        wx.showModal({
          title:"温馨提示",
          content:"格式有误",
          confirmText:"确认",
          showCancel:false
        })
      }
     
        console.log(res.data.result.xsfg);
      }
    })
  },

效果