应用程序开发公司
软件开发

针对您的项目需求及预算规划量身制定方案

个体/中小企业/集团/政府机构/行业组织 了解详情 了解详情

微信小程序简易全攻略《四》模板条件列表渲染完成模拟公众号自动回复 ...

发布时间:2024-01-01 00:00 浏览次数:94

最近突发奇想,如果微信小程序无此微信公众号里了该如何采用 自动答复呢?


先看看效果


话不多说道 轻易上代码


1.页面代码:



autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">

















客服:


你:














{{itemName.msg}}






页面中 采用了 模板的


条件图形 :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. 服务器端代码



$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);

TAG标签:
阅读推荐