无码日韩精品无码国产_一级做a爰片久久毛片潮喷_国产欧美国日产_久久9热re这里只有国产中文精品6_每天将为您更新成人影视在线看免费观看

首頁 關(guān)于我們 小程序案例 小程序解決方案 小程序資訊 聯(lián)系我們
Menu
小程序資訊
小程序資訊
首頁 > 小程序資訊 > 小程序常見問題
微信小程序簡易全攻略《四》模板條件列表渲染完成模擬公眾號(hào)自動(dòng)回復(fù) ...
時(shí)間：2016-10-20 15:10:00

最近突發(fā)奇想，如果微信小程序不在微信公眾號(hào)里了該如何使用 自動(dòng)回復(fù)呢？

先看下效果

話不多說 直接上代碼

1.頁面代碼：

<swiper indicator-dots="{{indicatorDots}}"
        autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
           <navigator url="{{item.link}}" hover-class="navigator-hover">
            <image src="{{item.url}}" class="slide-image" width="355" height="150"/>
           </navigator> 
        </swiper-item>
      </block>
</swiper> 
<block>
    <input type="text" class="input-text" bindchange="setInputValue"  placeholder="請(qǐng)輸入你要咨詢的內(nèi)容"/>
    <button bindtap="getgetinputSEnd" class="input-button">發(fā)送</button>
</block>
<view class="chat-area">    
    <view wx:for="{{msgs}}" wx:for-index="idx" wx:for-item="itemName">
        <view class="say-title">
            <block wx:if="{{idx%2 != 0}}"><text class="red-font">客服：</text></block>
            <block wx:if="{{idx%2 == 0}}"><text class="green-font">你：</text></block>
        </view>
        <view class="say-content">
            <block wx:if="{{itemName.type == 'video'}}">
                <video src="{{itemName.msg}}"></video>
            </block>
            <block wx:if="{{itemName.type == 'voice'}}">
                <audio src="{{itemName.msg}}" controls loop></audio>
            </block>
            <block wx:if="{{itemName.type == 'image'}}">
                <image src="{{itemName.msg}}"></image>
            </block>
            <block wx:if="{{itemName.type == 'text'}}">
                <text>{{itemName.msg}}</text>
            </block>
        </view>
    </view>
</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. 樣式代碼

.slide-image{
    width: 100%;
}
.input-text{
border:1px solid #abcdef;
width:88%;
background:#ddd;
line-height:100%;
text-indent: 0.5rem;
margin:1rem auto;
height:40px;
}
.input-button{    
background:#48C23D;
margin:0.5rem 5%;
color:#fff;
}
.chat-area{
    width: 90%;
    margin:0.5rem 5%;
    border:1px solid #ddd;
    background:#eee;
    font-size: 1rem;
}
.red-font{
    color:#DC143C;
}
.green-font{
    color:#48C23D;
}
.say-content{
font-size:80%;
width:80%;
margin:0.5rem 5%;
}

3. js代碼

//test.js
//獲取應(yīng)用實(shí)例
var app = getApp();
Page({
  data: {
      imgUrls: [
       {
          link:'/pages/index/index',
          url:'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' 
       },{
          link:'/pages/logs/logs',
          url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' 
       },{
          link:'/pages/test/test',
          url:'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' 
       } 
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    msgs:[],
    inputdata:'',
    userInfo: {}
  },

  onLoad: function () {
    console.log('onLoad test');
    console.log(this.data.msgs);
  },

  getgetinputSEnd:function(){
      var input = this.data.inputdata;
      var that = this;
      var msgs = that.data.msgs; 
      msgs.push({msg:input,'type':'text'});
      //--------------------------------- 微信數(shù)據(jù)請(qǐng)求
     
      wx.request({
        url: 'http://test.com:8080/test/socket.php',
        data: {
          msg:input
        },
        header: {
            'Content-Type': 'application/json'
        },
        success: function(res) {
          msgs.push({msg:res.data.content,'type':res.data.msgType});
          that.setData({msgs:msgs});
          console.log(res.data)
        }
      })
     
  },
  setInputValue:function(e){
      console.log(e.detail);
      this.data.inputdata = e.detail.value;
  }

})

4. 服務(wù)器端代碼

<?php

$params = $_REQUEST;

$msg = $params['msg'];
$content = array();
switch ($msg) {
    case '1':
  case '美女':
  $content['msgType'] = 'image';
  $content['content'] = 'https://ss0.baidu.com/7Po3dSag_xI4khGko9WTAnF6hhy/image/h%3D200/sign=ae4df4ec878ba61ec0eecf2f713497cc/43a7d933c895d143b233160576f082025aaf074a.jpg';
  break;
  case '2':
  case '音樂':
  $content['msgType'] = 'voice';
  $content['content'] = 'http://www.w3school.com.cn/i/song.mp3';
  break;
  case '3':
  case '視頻':
  $content['msgType'] = 'video';
  $content['content'] = 'http://www.w3school.com.cn//i/movie.ogg';
  break;
  case '4':
  case '笑話':
  $content['msgType'] = 'text';
  $content['content'] = '一男子在鬧市騎摩托撞昏了一個(gè)陌生的老漢! 男子驚嚇的不知所措!圍觀群眾越來越多!突然,該男抱住老漢,聲淚俱下的喊道:“爹,你等著我,我這就去給...';
  break;
  default:
  $content['msgType'] = 'text';
  $content['content'] = '您發(fā)送的指令不在識(shí)別范圍內(nèi)：
                        你可以選擇 
                          1 美女 
                          2 音樂
                          3 視頻
                          4 笑話 ';
  break;
 } 
 echo json_encode($content);

微信小程序?qū)崙?zhàn)教程：火車票查詢，直取12306數(shù)據(jù)
微信小程序簡易全攻略《三》創(chuàng)建輪播圖與數(shù)據(jù)請(qǐng)求，表單的創(chuàng)建、提交、與接收 ...
咨詢
微信掃碼咨詢
電話咨詢
400-888-9358