微信小程序七（模板条件列表渲染完成模拟公众号自动回复）

最近突发奇想，如果微信小程序不在微信公众号里了该如何使用 自动回复呢？

先看下效果

话不多说 直接上代码

1.页面代码：

[html] view plain copy

1. <swiper indicator-dots="{{indicatorDots}}"  
2.         autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">  
3.       <block wx:for="{{imgUrls}}">  
4.         <swiper-item>  
5.            <navigator url="{{item.link}}" hover-class="navigator-hover">  
6.             <image src="{{item.url}}" class="slide-image" width="355" height="150"/>  
7.            </navigator>   
8.         </swiper-item>  
9.       </block>  
10. </swiper>   
11. <block>  
12.     <input type="text" class="input-text" bindchange="setInputValue"  placeholder="请输入你要咨询的内容"/>  
13.     <button bindtap="getgetinputSEnd" class="input-button">发送</button>  
14. </block>  
15. <view class="chat-area">      
16.     <view wx:for="{{msgs}}" wx:for-index="idx" wx:for-item="itemName">  
17.         <view class="say-title">  
18.             <block wx:if="{{idx%2 != 0}}"><text class="red-font">客服：</text></block>  
19.             <block wx:if="{{idx%2 == 0}}"><text class="green-font">你：</text></block>  
20.         </view>  
21.         <view class="say-content">  
22.             <block wx:if="{{itemName.type == 'video'}}">  
23.                 <video src="{{itemName.msg}}"></video>  
24.             </block>  
25.             <block wx:if="{{itemName.type == 'voice'}}">  
26.                 <audio src="{{itemName.msg}}" controls loop></audio>  
27.             </block>  
28.             <block wx:if="{{itemName.type == 'image'}}">  
29.                 <image src="{{itemName.msg}}"></image>  
30.             </block>  
31.             <block wx:if="{{itemName.type == 'text'}}">  
32.                 <text>{{itemName.msg}}</text>  
33.             </block>  
34.         </view>  
35.     </view>  
36. </view>  

页面中 使用了 模板的

 条件渲染 ：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html?t=1476197490824

 列表渲染：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/conditional.html?t=1476197492981

 

2. 样式代码

[css] view plain copy

1. .slide-image{  
2.     width: 100%;  
3. }  
4. .input-text{  
5. border:1px solid #abcdef;  
6. width:88%;  
7. background:#ddd;  
8. line-height:100%;  
9. text-indent: 0.5rem;  
10. margin:1rem auto;  
11. height:40px;  
12. }  
13. .input-button{      
14. background:#48C23D;  
15. margin:0.5rem 5%;  
16. color:#fff;  
17. }  
18. .chat-area{  
19.     width: 90%;  
20.     margin:0.5rem 5%;  
21.     border:1px solid #ddd;  
22.     background:#eee;  
23.     font-size: 1rem;  
24. }  
25. .red-font{  
26.     color:#DC143C;  
27. }  
28. .green-font{  
29.     color:#48C23D;  
30. }  
31. .say-content{  
32. font-size:80%;  
33. width:80%;  
34. margin:0.5rem 5%;  
35. }  

3. js代码

[javascript] view plain copy

1. //test.js  
2. //获取应用实例  
3. var app = getApp();  
4. Page({  
5.   data: {  
6.       imgUrls: [  
7.        {  
8.           link:'/pages/index/index',  
9.           url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'   
10.        },{  
11.           link:'/pages/logs/logs',  
12.           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'   
13.        },{  
14.           link:'/pages/test/test',  
15.           url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'   
16.        }   
17.     ],  
18.     indicatorDots: true,  
19.     autoplay: true,  
20.     interval: 5000,  
21.     duration: 1000,  
22.     msgs:[],  
23.     inputdata:'',  
24.     userInfo: {}  
25.   },  
26.   
27.   onLoad: function () {  
28.     console.log('onLoad test');  
29.     console.log(this.data.msgs);  
30.   },  
31.   
32.   getgetinputSEnd:function(){  
33.       var input = this.data.inputdata;  
34.       var that = this;  
35.       var msgs = that.data.msgs;   
36.       msgs.push({msg:input,'type':'text'});  
37.       //--------------------------------- 微信数据请求  
38.        
39.       wx.request({  
40.         url: 'http://test.com:8080/test/socket.php',  
41.         data: {  
42.           msg:input  
43.         },  
44.         header: {  
45.             'Content-Type': 'application/json'  
46.         },  
47.         success: function(res) {  
48.           msgs.push({msg:res.data.content,'type':res.data.msgType});  
49.           that.setData({msgs:msgs});  
50.           console.log(res.data)  
51.         }  
52.       })  
53.        
54.   },  
55.   setInputValue:function(e){  
56.       console.log(e.detail);  
57.       this.data.inputdata = e.detail.value;  
58.   }  
59.   
60. })  

4. 服务器端代码

[php] view plain copy

1. <?php  
2.   
3. $params = $_REQUEST;  
4.   
5. $msg = $params['msg'];  
6. $content = array();  
7. switch ($msg) {  
8.     case '1':  
9.     case '美女':  
10.         $content['msgType'] = 'image';  
11.         $content['content'] = 'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=ae4df4ec878ba61ec0eecf2f713497cc/43a7d933c895d143b233160576f082025aaf074a.jpg';  
12.         break;  
13.     case '2':  
14.     case '音乐':  
15.         $content['msgType'] = 'voice';  
16.         $content['content'] = 'http://www.w3school.com.cn/i/song.mp3';  
17.         break;  
18.     case '3':  
19.     case '视频':  
20.         $content['msgType'] = 'video';  
21.         $content['content'] = 'http://www.w3school.com.cn//i/movie.ogg';  
22.         break;    
23.     case '4':  
24.     case '笑话':  
25.         $content['msgType'] = 'text';  
26.         $content['content'] = '一男子在闹市骑摩托撞昏了一个陌生的老汉! 男子惊吓的不知所措!围观群众越来越多!突然,该男抱住老汉,声泪俱下的喊道:“爹,你等着我,我这就去给...';  
27.         break;        
28.     default:  
29.         $content['msgType'] = 'text';  
30.         $content['content'] = '您发送的指令不在识别范围内：  
31.                                你可以选择   
32.                                  1 美女   
33.                                  2 音乐  
34.                                  3 视频  
35.                                  4 笑话 ';  
36.         break;  
37.  }   
38.  echo json_encode($content);  

来源：https://www.cnblogs.com/iqiao/p/7772703.html