最详细的【微信小程序+阿里云Web服务】开发部署指引(十一):开发小程序设置功能
文章目录
- 前言
- 一、功能说明
- 二、设置界面代码实现
- 1.创建界面Page
- 2.WXML
- 3.JS
- 4.WXSS
- 三、参数控制逻辑代码实现
- 1.自动跳转卡片
- 2.自动播放声音
- 专题文章链接
前言
案例的运行效果,可以扫码观看:
本篇文章,我们将实现一个增值功能,参数设置的功能。
一、功能说明
功能实现一个参数设置界面,提供“自动跳转卡片”和“自动播放声音”两个设置选项。
如果启用“自动跳转卡片”,可以在卡片浏览时,间隔一定时间自动切换到下一张。
如果启用“自动播放声音”,可以在加载每张卡片后,无需点击学习按钮而自动播放中文、英文朗读。
二、设置界面代码实现
1.创建界面Page
2.WXML
<!--pages/setting.wxml-->
<view class="nocate"><view style="display: flex;"><view class="title">自动跳转卡片</view><view class="switch"><switch checked="{{switch1}}" bindchange="switch1Change"/></view></view><view style="display: flex; padding-top: 60rpx;"><view class="title">自动播放声音</view><view class="switch"><switch checked="{{switch2}}" bindchange="switch2Change"/></view></view>
</view>
3.JS
const app = getApp()
Page({data: {switch1: false,switch2: false},onLoad: function (options) {if (app.globalData.AutoPlay == 1) {this.setData({switch1: true})}else {this.setData({switch1: false})}if (app.globalData.AutoSound == 1) {this.setData({switch2: true})}else {this.setData({switch2: false})}},switch1Change(e) {if(e.detail.value) {app.globalData.AutoPlay = 1}else {app.globalData.AutoPlay = 0}},switch2Change(e) {if (e.detail.value) {app.globalData.AutoSound = 1}else {app.globalData.AutoSound = 0}}
})
我们在app.js定义了全局变量来保存这两个参数值。
globalData: {AutoPlay: 0,AutoSound: 0}
4.WXSS
page {background: #eee;
}
.nocate{padding:120rpx;text-align: center;
}
.title {font-size: 42rpx;
}
.switch {padding-left: 40rpx;
}
三、参数控制逻辑代码实现
1.自动跳转卡片
startPlay()和stopPlay()分别实现开始自动跳转和停止自动跳转的操作。
handlePlay() {this.handleForwardCore() //向前跳转一张卡片},startPlay:function() {if (this.data.imageMode == 0 && app.globalData.AutoPlay == 1 && this.data.totalnum > 1) {this.stopPlay()var id = setInterval(this.handlePlay, 5000) //5s调用一次handlePlaythis.setData({intervalId: id})}},stopPlay: function () {if (this.data.imageMode == 0 && app.globalData.AutoPlay == 1 && this.data.totalnum > 1) {clearInterval(this.data.intervalId)}
记得在页面刚加载获取卡片信息完成之后,也运行一次startPlay()调用。
setCards(res) {...this.startPlay()}
如果手动按了向前或者向后的按钮,可以先停止当前的自动跳转,再重新运行自动跳转,避免逻辑和时间间隔的混乱。
handleForward() {this.stopPlay()this.handleForwardCore()this.startPlay()},handleBackward() {this.stopPlay()this.handleBackwardCore()this.startPlay()},
当“自动跳转卡片”启用后,则会执行自动跳转逻辑。
2.自动播放声音
定义handleSound()来自动播放声音。对于题目学习的卡片不做自动播放声音。
handleSound() {if (this.data.imageMode == 0 && app.globalData.AutoSound == 1) {if (this.data.c_name1) {this.handleButton1()if (this.data.c_name2) {setTimeout(this.handleButton2, 1500) //开始播放中文词语后,等待1.5s播放英文词语}}else {this.handleButton2()}}}
在向前向后翻转卡片的handleForwardCore()和handleBackwardCore()事件中,在原先的逻辑后面再加上handleSound()调用,当“自动播放声音”启用后,卡片加载时候就会自动播放词语朗读声音。
handleForwardCore() {...this.handleSound()},handleBackwardCore() {...this.handleSound()},
专题文章链接
最详细的【微信小程序+阿里云Web服务】开发部署指引(一):准备开始
最详细的【微信小程序+阿里云Web服务】开发部署指引(二):注册微信小程序
最详细的【微信小程序+阿里云Web服务】开发部署指引(三):开通阿里云主机
最详细的【微信小程序+阿里云Web服务】开发部署指引(四):搭建服务端数据库
最详细的【微信小程序+阿里云Web服务】开发部署指引(五):实现服务端调用逻辑
最详细的【微信小程序+阿里云Web服务】开发部署指引(六):开发微信小程序的准备
最详细的【微信小程序+阿里云Web服务】开发部署指引(七):小程序项目中的文件资源
最详细的【微信小程序+阿里云Web服务】开发部署指引(八):开发小程序卡片类型呈现功能
最详细的【微信小程序+阿里云Web服务】开发部署指引(九):开发小程序卡片浏览功能
最详细的【微信小程序+阿里云Web服务】开发部署指引(十):实现发音朗读
最详细的【微信小程序+阿里云Web服务】开发部署指引(十一):开发小程序设置功能
最详细的【微信小程序+阿里云Web服务】开发部署指引(十二):开发小程序用户反馈功能
最详细的【微信小程序+阿里云Web服务】开发部署指引(十三):小程序底部菜单
最详细的【微信小程序+阿里云Web服务】开发部署指引(十四):发布小程序
最详细的【微信小程序+阿里云Web服务】开发部署指引(十五):结语
最详细的【微信小程序+阿里云Web服务】开发部署指引(十一):开发小程序设置功能相关推荐
- 最详细的【微信小程序+阿里云Web服务】开发部署指引(四):搭建服务端数据库
文章目录 前言 一.连接主机数据库 二.创建数据表结构 三.准备测试数据 专题文章链接 前言 做完了前面的注册申请工作,今天我们开始进行程序的开发. 这篇文章,我们要完成的是服务端数据库表的创建. 一 ...
- 最详细的【微信小程序+阿里云Web服务】开发部署指引(八):开发小程序卡片类型呈现功能
文章目录 前言 一.功能说明 二.代码实现 1.创建主界面Page 2.WXML 2.JS 3.WXSS 4.合法域名校验 5.图片缓存刷新问题的解决 小结 专题文章链接 前言 本篇文章,将对照专题案 ...
- 最详细的【微信小程序+阿里云Web服务】开发部署指引(一):准备开始
文章目录 前言 案例说明 专题文章链接 前言 作为一个程序开发的老鸟,有时候想使用微信小程序,开发实现一些实用的小功能.由于小程序往往需要有后台数据的支持,所以一般还需要搭建一个Server服务器,来 ...
- 最详细的【微信小程序+阿里云Web服务】开发部署指引(十二):开发小程序用户反馈功能
文章目录 前言 一.功能说明 二.代码实现 1.创建界面Page 2.WXML 3.JS 4.WXSS 专题文章链接 前言 案例的运行效果,可以扫码观看: 本篇文章,我们将实现应用的用户反馈功能. 一 ...
- Istio 在阿里云容器服务的部署及流量治理实践
目标 在阿里云容器服务 Kubernetes 集群上部署 Istio 服务网格 实践灰度发布.故障注入.熔断等 Istio 流量管理特性 准备工作 安装和设置 kubectl 客户端,请参考不同的操作 ...
- 【Linux 操作系统】阿里云服务器 操作实战 部署C语言开发环境(vim配置,gcc) 部署J2EE网站(jdk,tomcat)
. 作者 :万境绝尘 转载请注明出处 : http://blog.csdn.net/shulianghan/article/details/18964835 . 博客总结 : 设置SecureCRT ...
- 阿里云服务器上单机部署大数据开发环境(hadoop2.6-cdh5.8.0系列)
概述 之前在阿里云买的学生版服务器,闲着也是浪费,为了平常学习使用,决定在一台服务器上搭建一个伪分布式的开发环境.之前用三台虚拟机部署过集群,时间长了怕忘,现在升级各个版本重新部署,记下来方便以后查看 ...
- 阿里云容器服务中国最佳,进入 Forrester 报告强劲表现者象限
近日,全球知名市场调研机构 Forrester 发布首个企业级公共云容器平台报告. 报告显示:阿里云容器服务创造了中国企业最好成绩,与谷歌云位于同一水平线,进入强劲表现者象限. 究其原因,分析师认为: ...
- Knative 应用在阿里云容器服务上的最佳实践
作者|元毅 阿里云智能事业群高级开发工程师 相信通过前面几个章节的内容,大家对 Knative 有了初步的体感,那么在云原生时代如何在云上玩转 Knative?本篇内容就给你带来了 Knative 应 ...
最新文章
- Linux下三个密码生成工具
- android代码混淆笔记
- Java 策略模式和状态模式
- 为什么手机突然没有信号无服务器,手机为什么突然没有信号?
- struts2多文件动态下载及中文解决方案
- 大众CEO迪斯承认芯片仍短缺
- php为什么要使用静态方法,为什么PHP在对象上下文中使用静态方法?
- readonly于disable的区别 及 name和id的区别
- oracle的sum函数精度问题_Excel中的这些烧脑问题,你遇到过几种?
- 移动浏览器相关总结(持续更新)
- 详解谷歌官方教程 Android插件ADT 9.0.0
- C#应用视频教程3.4 Halcon+C#测试
- 随机森林:对UCI数据集的分类实现
- flex和blazeds_Java程序员学习Flex和BlazeDS的13个理由
- 解决IE兼容H5的问题
- 2015年天翊他爹有想法了
- Excel数据分析案例三——预测销量
- 【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
- 关键路径 详解 (前置知识:拓扑排序)
- 解决方案|电力行业应如何应对数字化转型危机
热门文章
- 战舰猎手服务器不稳定,《战舰猎手》竟然还有这个系的这艘战舰啊?今天就让你见识一下!...
- git 推送出现 “fatal: The remote end hung up unexpectedly“ 解决方案
- Go语言核心之美-必读
- 黑苹果安装后不能启动Windows解决
- 关于营销自动化,30个惊人的事实
- 俞优静的“航海”人生-搜狐财经
- 卡西欧计算机软件测量,卡西欧fx-5800P计算器公路设计与测量程序
- SSM上传用户头像。解决HTTP 400,保存到本地以及数据库保存路径,在页面显示的问题
- 【渝粤题库】陕西师范大学200611 英语修辞 作业
- 无盘启动服务器f12,无盘pxe引导winpe