Koa 代理http请求，解决跨域问题1、为什么用Koa做跨域代理？"最初为了解决跨域问题，我把站点部署到了nginx上就解决了问题。一次偶然的面试机会，面试官提出了一个假设我需要对提交api和api返回的数据进行适配，那么nginx是不是就无法满足了。当然这个问题的提出，让我考虑到其实如果自己搭一个站点，通过这个站点进行转发，适配第三方api的请求和应答不就好了。那么要搭一个站点的语言其实有很多，例如.net,java,nodejs,php...，那...
使用 iview Upload 上传组件 手动上传 包括单个文件和多个文件 思路：创建一个数组 把需要上传的文件 push到这个数组里面 1.引用组件 2.手动上传，根据官方文档 设置:before-upload ="handleUpload"等于false (1).:before-upload 是 iview Upload 上传组件的一个属性 设置返回值为 false 可以阻止默认上传方式（自动上传模式） (2).handleUpload 是方法 *备注:代码在最后面 3.上传方法 //创建 formData 对象let formDat...
在过去，浏览器是不允许我们读取本地的文件，包括图片。因此，当我们需要预览一个图片的时候，往往先将它传送到服务端，然后服务端返回一个访问 url 地址，达到预览图片的功能。如今，随着标准不断的改善，JavaScript 里的 API 越来越多，我们可以通过直接读取本地文件的方式来加载我们想要看到的文本或者图片，一定程度上减少了服务端的压力。 Upload 组件参考文档：https://www.iviewui.com/components/upload 文档提供的参考代码...
小程序原生组件的音频播放时并没有进度条的显示，而此次项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。 视频和音频提供的api大致是相似的，可以根据以下代码修改为与音频相关的进度条。 wxml的结构如下: <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1...
前言：这章我们使用小程序的 scroll-view组件 实现横向滚动和竖向滚动。 GitHub： https://github.com/Ewall1106/miniProgramDemo 1、竖向滚动 首先从简单的来，竖向滚动很简单，只用记住两点即可： 首先得设置 scroll-y 属性； 其次，一定要给 scroll-view 设置一个 height 高度； <scroll-view scroll-y style="height: 200px;"><view class="green" style="width: 100%; height: 200px; background: green;"></view><view class...
1、布局及样式等（1）xml布局 <view class="container"><scroll-view scroll-x="true"><view class="item-content" wx:for="{{list}}" wx:for-item="item"><view class="title">{{item.title}}</view><view class="content">{{item.content}}</view></view></scroll-view> </view> （2）wxss scroll-view {width: 80%;white-space: nowrap; }.item-content {width: 40%;display: inline-block;border: 1rpx solid gray;text-align:...
微信支付已上线企业付款至银行卡功能。商户可以将商户号余额付款至指定的收款银行账户。通过指定收款银行账户户名、卡号，以及收款银行信息即可实现付款。功能目前为灰度开放，已灰度新资金流直连普通商户及普通受理模式子商户，其他商户类型将在后续开放。 一、微信商户号须开通此功能； 二、应用环境TP5+Mysql+Centos三、编写代码3.1、Model层，Wechat.php <?php namespace app\home\model; use think\Cache;class Wechat extend...
React 组件中处理 onClick 类似事件绑定的时候，是需要显式给处理器绑定上下文（context）的，这一度使代码变得冗余和难看。 请看如下的示例： class App extends Component {constructor() {super();this.state = {isChecked: false};}render() {return (<div className="App"><label >check me:<inputtype="checkbox"checked={this.state.isChecked}onChange={this.toggleCheck}/></label></div>);}toggleCheck() {this.setState...
做的产品证书管理系统使用的是VueJs和ElementUI，现将遇到的一些知识点记录一下。 VUe全局变量的实现全局变量专用模块Global.vue是以一个特定模块来组织管理全局变量，需要引用的地方导入该模块即可。使用方法如下： 将全局变量模块挂载到Vue.prototype里，在程序入口的main.js里加下面代码： import Global from ../components/Global.vue Vue.prototype.global = Global挂载后，在需要引用全局变量的模块时，不需要再导入全局变量...
什么是多语言？我们平时访问一些文档类型的网站时，经常可以看到页面右上角有一个下拉框用来选择当前页面支持的语言，并在选中后将整个网页的内容切换为选中的语言，这就是项目中的多语言，多语言可以根据浏览器请求发送的语言类型在服务器进行设置，也可以在请求服务器时返回多种语言，并根据权重和浏览器的支持情况进行选择和渲染。 功能描述在本文中我们通过客户端向服务器发送请求告诉服务器客户端所支持的语言及权重，服务器检...
Vue 中使用 typescript 什么是typescript typescript 为 javaScript的超集，这意味着它支持所有都JavaScript都语法。它很像JavaScript都强类型版本，除此之外，它还有一些扩展的语法，如interface/module等。 typescript 在编译期会去掉类型和特有语法，生成纯粹的JavaScript。 Typescript 5年内的热度随时间变化的趋势，整体呈现一个上升的趋势。也说明ts越来越?受大家的关注了。 安装typescript npm install -g typescript tsc...
vue弹窗组件的样子我们先看一下，我们要实现出来的弹窗组件长什么样子：呐，我们要用vue组件实现的弹窗就是这个样子，跟我们用js插件实现的效果一样，下面我们开始讲述怎么实现一个通用的vue弹窗组件。 实现vue弹窗组件需要的知识是vue组件，当然最基础的是vue的知识，我假设大家是有一定vue功底的，然后你还需要了解： 1、vue的事件系统，vue组件间的单项数据流，props从父组件向子组件传递数据，子组件通过事件emit向父组件传递事...
前言http的特点是一问一答，而即时通讯是需要双向通信的，这样以前的即时通信只能使用轮询的方式通过周期性的ajax请求获取数据，直到websocket出现，就完美实现了双向通信 一 即时通讯方式简介段轮询前台使用setInterval进行定时请求后台，这样无疑非常浪费性能长轮询和长连接（html5的EventSource）客服端连接一次，服务端不断开连接，服务端接收到新消息就发送给前台，客服端和服务端保持一直连接，缺点是只有服务端向客服端输出...
业务需求：将heatmap引入页面中，做成一个可引入的框架，使用于所有页面。代码如下。 <!DOCTYPE html> <html> <head><meta charset="UTF-8"><title></title><style>.heatmap {width:1900px; height:1900px;}</style><script src="js/heatmap.min.js"></script><script src="js/jquery.js"></script> </head> <body> <input id=xxx type=hidden value=""><input id=yyy type=hidden value=""> <input id="array" type="button" valu...
微信小程序中如果判断页面滚动方向？ 解决方案1.用到微信小程序API 获取页面实际高度 nodesRef.boundingClientRect([callback]) 监听用户滑动页面事件onPageScroll。 2.获取页面实际高度 <!--WXML--> <view id="box"><view class="list" wx:for="{{List}}" wx:key="List{{index}}"><image mode=aspectFill class=list_img src="{{item.imgUrl}}" ></image></view> </view> /* JS */// 封装函数获取ID为box的元素实际高度 getScroll...