微信小程序与SSM交互

爱被打了一巴掌 2023-03-04 14:27 9阅读 0赞

一、关于小程序的交互

**1.与本地交互的解决办法**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]  
在详情中勾上图选项即可。  
       **2.交互代码**

js文件

data:{ 
    param:{ },
    }
    
    test: function(options){ 
        wx.request({ 
          url: 'http://127.0.0.1:8082/Hys/api/adminLogin', //管理员登录接口
          data: { 
          "id": '00001',
          "password": '12345'
          },
          method:"POST",
          header: { 
          'content-type': 'application/x-www-form-urlencoded' // 若要传参到后端，改为此形式，json形式只能拿取参数
          },
          success (res) { 
          that.setData({ param:res.data[0]['key']})//取数据
          console.log(res.data)
          },
          fail (error){ 
            console.log("失败")
          }
          })
      },

wxml文件

<view>
    <button bandtap="test">test<button>
    <text>{
       {param}}<text>//展示
    <view>

补充：[微信事件绑定][Link 1]

完整代码：  
Js

wxml

<view class='index-contier'>
    	<view class="index-left">
    	
    	</view>
    
    
    	<view class="index-center">
    		<view class="logo"><open-data type="userAvatarUrl" class="userinfo" id="userinfo1"></open-data></view>
    		<view id="userinfo2"><open-data type="userNickName" class="userinfo"></open-data></view>
    	</view>
    
    </view>
    
    <view class='inform'>
    
    <view class='manger'>
    		<span>工号   000001</span>
    		<span>{
       {user.empNo}}</span>
    	</view>
    	<view class='name'>
    		<span>姓名   李云飞</span>
    		<span>{
       {user.name}}</span>
    	</view>
    	<view class='sex'>
    		<span>性别   男</span>
    		<span wx:if="{ {user.sex == '1'}}">男</span>
        <span wx:if="{ {user.sex == '0'}}">女</span>
    	</view>
      <view class='phone'>
    		<span>手机   **********</span>
    		<span>{
       {user.phone}}</span>
    	</view>
    
    	<view>
    	    <button bindtap="onShow">hello</button>
    	</view>
    
    	<view>
    	    <button bindtap="print1">print1</button>
    	</view>
    
    		<view>
    	    <button bindtap="print2">print2</button>
    	</view>
    
    			<view>
    	    <button bindtap="test">print2</button>
    	</view>
    	<view>
    	<text>{
       {name}}</text>
    	</view>
    
    	<view>
    	<text>{
       {id}}</text>
    	</view>
    </view>

wxss

.index-contier {
    	color: rgb(94, 163, 94);
    	background-color: rgb(94, 163, 94);
    	font-size: 12px;
    	width: 100%;
    	height:620rpx;
    background-size: cover; 
    
     
    }
    
    .index-left {
    	float: left;
    	width: 30%;
    	text-align: center;
    	margin-top: 477rpx;
      color: #000000;
    }
    
    .index-center {
    	float: left;
    	width: 40%;
    	text-align: center;
      margin-top:240rpx;
      color: #000000;
    }
    
    .logo {
    	margin: 0 auto;
    	width: 80px;
    	height: 80px;
    	
    	border-radius: 40px;
    }
    
    .index-right {
    	float: left;
    	width: 30%;
    	text-align: center;
    	margin-top:477rpx;
      color: #000000;
    }
    
    .index-right image{
      height: 100%;
      width: 100%;
    
    }
    .inform {
    	padding: 0 6px;
    	font-size: 12px;
    }
    
    .phone {
    	height: 40px;
    	line-height: 40px;
    	border-bottom: 1px solid #e6e5e2;
    }
    
    .phone span {
    	margin: 0 10px;
    }
    
    .phone span:nth-child(2) {
    	float: right;
    }
    
    .name {
    	height: 40px;
    	line-height: 40px;
    	border-bottom: 1px solid #e6e5e2;
    }
    
    .name span {
    	margin: 0 10px;
    }
    
    .name span:nth-child(2) {
    	float: right;
    }
    
    .sex {
    	height: 40px;
    	line-height: 40px;
    	border-bottom: 1px solid #e6e5e2;
    }
    
    .sex span {
    	margin: 0 10px;
    }
    
    .sex span:nth-child(2) {
    	float: right;
    }
    
    .age {
    	height: 40px;
    	line-height: 40px;
    	border-bottom: 1px solid #e6e5e2;
    }
    
    .age span {
    	margin: 0 10px;
    }
    
    .age span:nth-child(2) {
    	float: right;
    }
    
    .manger {
    	height: 40px;
    	line-height: 40px;
    	border-bottom: 1px solid #e6e5e2;
    }
    
    .manger span {
    	margin: 0 10px;
    }
    
    .manger span:nth-child(2) {
    	float: right;
    }
    
    #userinfo1{
      width: 185rpx;
      height:185rpx;
      /* margin:20rpx; */
      border-radius:50%;
      display: flex;
      overflow:hidden;
      text-align: center;
    }
    
    #userinfo2{
     font-family: "微软雅黑"; 
     font-size: 15px;
      margin-top:75rpx;
     
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0NjU0OTc0_size_16_color_FFFFFF_t_70]: /images/20230208/9d9902c2f4a54842ad836b6c0e222697.png
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html