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

首页 > 小程序资讯 > 小程序常见问题

时间：2016-10-20 15:10:00

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

先看下效果

话不多说直接上代码

1.页面代码：

<swiper indicator-dots="{{indicatorDots}}"

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

<swiper-item>

</navigator>

</swiper-item>

</block>

</swiper>

<block>

</block>

</view>

</block>

</block>

</block>

<text>{{itemName.msg}}</text>

</block>

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

微信小程序实战教程：火车票查询，直取12306数据

微信小程序简易全攻略《三》创建轮播图与数据请求，表单的创建、提交、与接收 ...