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

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

先看下效果

话不多说直接上代码

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="请输入你要咨询的内容"/><button bindtap="getgetinputSEnd" class="input-button">发送</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
//获取应用实例
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'});//--------------------------------- 微信数据请求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. 服务器端代码

<?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'] = '一男子在闹市骑摩托撞昏了一个陌生的老汉! 男子惊吓的不知所措!围观群众越来越多!突然,该男抱住老汉,声泪俱下的喊道:“爹,你等着我,我这就去给...';break;     default:$content['msgType'] = 'text';$content['content'] = '您发送的指令不在识别范围内：你可以选择 1 美女 2 音乐3 视频4 笑话 ';break;} echo json_encode($content);

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

微信小店里的微信小程序跳转产品及类目，公众号产品吐槽
首先要吐槽一下微信公众号,这个产品真是不完善,搞了个微信小店,里面的产品没有搜索栏,无语了.还有微信搜索商品,怎么总是搜索别的平台的产品呢?咋不搜索微信小店里的商品呢?这个公域流量为啥微信要给别的电商 ...
微信小程序跳转到其他网页(外部链接)公众号等的实现方法
个人类型和海外类型的小程序不支持 web-view 标签也就是说个人申请的小程序,就别想跳转了!!!! 1.开发的时候,我们难免碰到要跳转到其他网页中去那该怎么实现呢? 2.例如我想点击一个按钮, ...
微信小程序编写新闻阅读列表
微信小程序编写新闻阅读列表本篇学习主要内容 Swiper 组件(轮播图) App.json 里的关于导航栏.标题的配置. Page 页面与应用程序的生命周期数据绑定(核心知识) 数据绑定的运算与逻 ...
微信小程序模仿华为音乐列表界面
微信小程序模仿华为音乐列表界面 index.js var app=getApp(); var listDatas = require("../../data/data_list.js&q ...
php+实现群发微信模板消息_使用php实现微信小程序发送模板消息（附代码）
本篇文章给大家带来的内容是关于使用php实现微信小程序发送模板消息(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本章将会简单说一下微信小程序的模板消息发送,相对来说比较简 ...
微信小程序消息模板设计及实现
本文以微信小程序内置的两个模板:购买成功和评论回复提醒为例来阐述第三方微信小程序平台的设计. 小程序端微信用户支付成功后,微信服务通知中会收到支付成功服务提醒.见下图: 商家端用户完成评价后,商家 ...
微信小程序实战—实现城市列表的选择
##微信小程序实战-实现城市列表的选择 ####实现效果预览 ####实现功能简介城市的选择按中文/拼音/首字母条件搜索按首字字母快速定位到城市位置 ####目录结构 ####主要代码 #### ...
微信小程序 scroll-view组件实现列表页实例代码
这篇文章主要介绍了微信小程序 scroll-view组件实现列表页实例代码的相关资料,scroll-view组件介绍scroll-view是微信小程序提供的可滚动视图组件,其主要作用是可以用来做手机端 ...
修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...