微信小程序之语音导播--悦行 1.0

微信小程序----悦行
背景：
随着人民生活水平的提高和我国交通系统的逐步发达，旅游行业越来越兴旺。国家“十二五”规划指出大力发展国内旅游，走内涵式发展道路，实现速度、结构、质量、效益、科技与网络相统一，提升旅游业发展的科技化、信息化水平。景区淡旺季导游人员及设备配置难题，景点导游解说质量参差不齐，游客个性化需求越发明显，景点无法实现多国语言导游等现状已经成为旅游界急需解决的问题。
项目简介：
景点搜索
景点简介
景点相关语音文件
语音播报
景点搜索：实现搜索功能

const app = getApp()
Page({data: {},//执行点击事件formSubmit: function (e) {//声明当天执行的var that = this;//获取表单所有name=keyword的值var formData = e.detail.value.keyword;//显示搜索中的提示wx.showLoading({title: '搜索中',icon: 'loading',})//向搜索后端服务器发起请求wx.request({//URLurl: 'http://localhost:8080/yuexing/NameServlet?keyword=' + formData,//发送的数据data: formData,//请求的数据时JSON格式header: {'Content-Type': 'application/json'},//请求成功success: function (res) {//控制台打印（开发调试用）console.log(res.data)//把所有结果存进一个名为re的数组that.setData({re: res.data,})//搜索成功后，隐藏搜索中的提示wx.hideLoading();}})},

景点简介：文字版简介

const app = getApp()
Page({/*** 页面的初始数据*/data: {name: '',details: '',image: ''},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var keyword = options.keyword;console.log(keyword);this.setData({name: keyword})this.getdata(keyword);},//获取景点详情getdata:function(view){var that = this;wx.request({url: 'http://localhost:8080/yuexing/ViewServlet',data:{viewName: view,},header:{"Content-Type": "applciation/json"},success:function(res){;that.setData({image: res.data.image,details: res.data.text})}})},voice: function () {wx.navigateTo({url: '../index/index?keyword=' + this.data.name, success: function (res) { },fail: function (res) { },complete: function (res) { },})}})

语音列表：实现一个景点出现不同的语音介绍

const app = getApp()Page({/*** 页面的初始数据*/data: {name: '',vedio: '',flag : 0},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var keyword = options.keyword;this.setData({name: keyword})this.getdata(keyword);},//获取景点详情getdata: function (view) {var that = this;wx.request({url: 'http://localhost:8080/yuexing/VideoServlet',data: {viewName: view,},header: {"Content-Type": "applciation/json"},success: function (res) {if(res.data[0] == null){flag : 1 } else{that.setData({item: res.data})}}})},gotoNewMusice: function () {wx.navigateTo({url: '../newMusic/index',})}
})

微信小程序之语音导播--悦行 1.0相关推荐

微信小程序的语音输入功能开发：微信同声传译插件
微信小程序的语音输入,语音转文字功能在很多场景要使用到比如搜索框,搜索关键字的时候用语音输入比用文字方便多了再比如再天下网吧小程序里发帖,发布回复时,用语音输入比输入文字也方便不少那么如何实现语 ...
php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
微信小程序：swiper轮播图添加外层圆角
微信小程序:swiper轮播图添加外层圆角 .swiper-wrap{overflow: hidden;border-radius: 8rpx;box-sizing: border-box;width ...
微信小程序组件思维导图
微信小程序组件思维导图
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法
微信小程序的swiper轮播图中的图片设置自适应高度的一种方法小程序中的轮播图很简单,但是唯一的缺陷就是 swiper 是固定的150px 高度(320px 宽度),这样如果传入的图片大于这个高度就 ...
微信小程序----实现语音的录制，并将语音转为文字
最近在开发微信小程序,遇到一个需求,实现类似于微信发送语音的效果,但是我这个是发送语音后直接转为文字展示. 先说微信小程序的textarea 0/200. 是限制用户输入的最长长度 0这个位置首先是 ...
swiper高度自适应_微信小程序之swiper轮播图片高度自适应
微信小程序中使用swiper组件可以实现图片轮播效果,但是默认swiper高度是固定的150px,如果项目中图片大于固定高度就会被隐藏,所以本篇文章要实现轮播图片的高度自适应. 效果图: swiper ...
微信小程序轮播中的current_手把手教你美化微信小程序中的轮播效果
微信小程序现在依然很火,相信大家有目共睹:所以作为前端开发者,掌握如何开发小程序,是一项必备技能了,你觉得呢? 相对于PC和H5开发,小程序坑很多,所以需要慢慢"踩",被坑多了,路 ...
微信小程序实现3D轮播图
在写微信小程序时,有写到实现3D轮播图的效果,可以直接使用微信小程序中自带的组件swiper来实现效果图如下: 1.swiper的相关属性 indicator-dots 是否显示小圆点,也可以自己重 ...

微信小程序之语音导播--悦行 1.0

微信小程序之语音导播--悦行 1.0相关推荐

最新文章

热门文章