ionic之中文tts集成
因为业务需要,需要用到tts播报中文语音,但是目前插件库能搜到的tts插件几乎全是英文的(因为谷歌安卓系统本身的问题),所以只能自己借助中文tts语音包编写插件.
目前插件已经更新到插件库,本人在ionic4下采用angular开发方式已经完成了验证与使用.需要的可以直接使用我写好的插件,还有其他需求的可以参考我的源码.
源码
使用方式下载1cordova plugin add cordova-plugin-chinese-tts
在ts(angular)中使用1234567891. 申明(原生中不需要这一步)declare let cordova:any;2. 初始化语音引擎cordova.plugins.chineseTTS.init();3. 播放cordova.plugins.chineseTTS.speak("你好");
ionic之应用兼容Android9与10的经历
文中Android P就是Android 9,这一块原因大家自己google.
突然,给用户开发的App无法在Android9与Android10上正常使用,甚至10上面无法进行安装,不得不拉取很早之前的代码进行问题排查.
此前是ionic4与Angular的混合开发项目,所以我首先想到的事Android9以上api进行了变动,如果是权限好处理,如果是api并且涉及到第三方cordova插件那么就有点麻烦,不能等到插件作者自己更新的情况下我们只能自己基于源码去修改.就像我之前想找一个支持中文TTS的cordova插件,网上能找到的几乎全部是英文的.最后只能自己封装ionic之Cordova中的中文tts集成 | DLLCNX的博客,所以如果了解cordova插件原理及懂一些java知识,第二点也不麻烦.
好在我们这次的问题出在自己本身身上,就是那种好解决的,我们现在我们添加的android平台源码里面改动.
问题解决Apache HTTP client 类丢失将 compileSdkVersion 升级到 28(Android9) 之后,如果在项目中用到了 Apache HTTP cl ...
Rollup之babel的集成
背景使用svelte开发了一个网站,并且需要进行Android端app转换,为了简单就采用了cordova来进行封装.
一切就绪,但是编译后,嗯?白屏.
经过分析与查证,估计问题出在我的手机上,因为提供的测试机是7.0的系统,貌似webview对于ES6的支持还不是很好,会不会是这原因的,先试试再说.
大家了解,涉及到ES6兼容的问题我们首先想到babel,我现在要做的就是将babel转义集成进rollup.
Babel是一个工具链,主要用于在当前和较旧的浏览器或环境中将ECMAScript 2015+代码转换为JavaScript的向后兼容版本。
但是哪些代码需要转译?我们需要考虑两个级别的移植:
1.我们应用的代码如果您在应用中使用ES6及更高版本的代码,则需要进行转义。这包括您的.svelte文件和.js文件。
2.依存关系如果应用的依赖模块也就是与应用程序捆绑在一起的代码使用了ES6语法,则它们也将导致最终编译的bundle.js中包含未编译的代码。顺便提一下,下面是Babel对外部依赖的看法:
理想情况下,你应该只转换你的源代码,而不是通过Babel运行你所有的外部依赖-因 ...
Svelte之svelma-pro组件库
svelte生态的组件库比较少并且良莠不齐,因为技术选型的原因得用,只能在前人的基础上继续前进.
svelma-pro基于开源项目svelma 扩展和修改,暂只支持svelte原生项目及sapper框架,不支持sveltekit.
原项目组件比较少,存在一些小bug,所以在原有的组件库的基础上,扩展了一些常见的组件,并对发现的一些bug进行了修改,对原有的组件功能,事件以及用户配置进行更人性化的修改和扩展。
文档文档及Demo
快速开始1. 通过template创建svelte应用(或者sapper应用)https://github.com/sveltejs/template 是一个svelte的初始化模板. degit这个脚手架可以帮你获取它:
$ npx degit sveltejs/template my-svelma-project
$ cd my-svelma-project
$ npm install
2. 引入bulma样式及svelma-pro组件等依赖bulma and svelma-pro$ npm install --save bulma svelma-pr ...
从清除浮动引起的BFC、IFC、FFC再学习
首先,’FC’肯定不是开封菜,而是Formatting context的简称.而在理解BFC等等概念之前,先让我们了解一下’FC’与’Box’是什么?
-Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)以及Flex formatting contexts(简称FFC),最后还有一个GridLayout Formatting Contexts(GFC)。
Box是 CSS 布局的对象和基本单位, 直观点来说,就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性,决定了这个 Box 的类型。 不同类型的 Box, 会参与不同的 Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒 ...
Svelte之集成sass语法
现在前端项目中不能使用使用Sass或Stylus等预处理器,是一个很不爽的事情,而svelte目前官方暂时真的没将这一块纳入初始模板,那么我们就只能自己动手了。
可以直接使用我集成好的模板:
1234567# for Rollupnpx degit "KeiferJu/svelte-sass-template" my-appcd my-appnpm installnpm run dev & open http://localhost:5000
正文以下文章以集成saas(scss)为例,其他的可以自己研究svelte-preprocess这个开源项目。
一. 集成saas预处理器1. 安装依赖模块1npm i -D svelte-preprocess node-sass
2. 修改配置文件1234567891011121314151617181920212223// rollup.config.js// ...import sveltePreprocess from 'svelte-preprocess'const preproc ...
02.搭建私有云笔记-leanote
我最近想把自己玩过的好玩的docker镜像整理一个合集,而这篇文章写的比较早,也是docker部署的,所以也依旧收录进这个系列。并且我目前也已经不在使用这款笔记了,目前换到了halo。
前言一直使用印象笔记和onenote。onenote不支持markdown,不开心!印象笔记盼了很多年终于也盼来了markdown,但是会员刚到期,它就不让我登录了,说是登录的设备太多,当时忙着找一篇文章,急匆匆的没找见哪里删除设备。如果不是会员,哪家的都不会把我们当真正上帝(客户)。有道云的话,因为对国内前段时间云盘(360等等宣布关闭)的阴影,一直持保守态度(所以后续还会出一个搭建私有云盘的文章)。于是萌生出一个想法,自己搭建一个笔记云,万事不求人,于是在开源的社区找一找,目前找到的比较靠谱的就只有一个“蚂蚁笔记leanote”,这也是国内一家公司开源的云笔记搭建方案,但是我还是想提前看一下它的优缺点。
优点:
私有化部署,数据安全。
可以选择一些文章一键发布成博客,就是说它自带博客功能,一举两得但又互不影响。
支持markdown,支持markdown,支持markdown。
界面风格类似于 ...
Svelte之Sapper简单探索
原文链接:https://blog.logrocket.com/exploring-sapper-svelte-a-quick-tutorial/
因为英文水平有限,有问题大家留言批评。本来准备结合作者文章做体验文章,但是觉得感觉作者对于sapper的初始结构介绍很全面,没必要画蛇添足。
在战争中,建造桥梁,修路,清理雷区并进行拆除(在战斗条件下均如此)的士兵被称为**工兵(Sapper)**。
我们可以单独使用Svelte构建更复杂的应用程序,但是随着代码逻辑深入,它可能很快就会变得混乱。那么让我们来看看Sapper!
简介Sapper是Svelte的配套组件框架,可帮助您以快速有效的方式构建更大,更复杂的应用程序。
在当今时代,构建web应用程序是一项相当复杂的工作,包括代码分解、数据管理、性能优化等。这就是为什么今天有无数的前端工具,但它们都有自己的复杂性和学习曲线。
开发一个应用程序应该不会那么困难,对吧?它能比现在更简单吗?有没有一种方法能让你在保持头脑清醒的同时满足所有的要求呢?这是一个问题。
对于web开发人员来说,风险当然比不上作战的工程师。但是我们面对的也是充满敌 ...
Svelte之神奇的svelte
简介
更少的代码
无Virtual DOM
真正的响应式
Svelte是一种构建用户界面的全新方法。传统框架(如React和Vue)的大部分工作是在浏览器中完成的,而Svelte将这些工作转换为编译步骤,这在构建应用程序时发生。Svelte没有使用virtual DOM diffing之类的技术,而是编写可在您的应用程序状态更改时通过特定方式更新DOM的代码。
svelte官网
看完上边官网的介绍,我们可能还是不太理解这个框架到底有什么不一样.
下面是大神尤雨溪对svelte的一段回答(但是尤大在说这话的时候svelte版本还是v1或者v2,没去深究,但v1和v2差别不是太大。但目前版本3 的API 设计上已经完全抛弃Ractive那套,v3 版本进行了大改动,跟之前的版本有很大的差别),继续引用这段话的意义只是在于svelte的核心思想大致就是这样。
作者是 Rich Harris,也就是 Ractive, Rollup 和 Buble 的作者,堪称前端界的轮子哥,现在又带来新轮子了!
这个框架的 API 设计是从 Ractive 那边传承过来的(自然跟 Vue ...
vue之集成ace编辑器
正文demo展示
创建组件直接使用封装好的组件1npm install @dllcn/vue-ace
自己实现
安装依赖
1npm install brace
创建组件(xxx.js)
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293var ace = require('brace');module.exports = { render: function (h) { var height = this.height ? this.px(this.height) : '100%' var width = this.width ? this.px(this.width) : '1 ...