使用 Less 替换 wxss 开发微信小程序

2018-01-10 约 1 分钟读完搬砖秘籍

微信小程序开发中默认使用的 wxss 做为样式文件，这货对应成前端就是 CSS 文件，所以通常写 wxss 文件的时候会很痛苦。因为我已经完全放弃了小程序自带的编辑器（参考：wxapp.vim——使用Vim开发小程序利器），于是尝试在微信小程序开发中引入 Less 来自动编译 wxss。思路启用一个 gulp 任务，在文件更新的时候自动将 .less 文件编译成 .wxss 文件。主要用到了 2 个 gulp 插件，gulp-less 和 gulp-rename。前者用来编译 Less 文件，后者用来将编译出来的 css 文件重命名为 .wxss。实现代码： var lessPath = ['./app/**/**/*.less', './app/**/*.less']; /** * 本地监视less的文件 */ gulp.task('less', function () { return gulp.src(lessPath) .pipe($.plumber()) .pipe($.less()) .pipe($.rename(function (path) { path.extname = '.wxss'; })) .pipe(gulp.dest('./app')); }); // 静态服务器 gulp.task('style', function () { gulp.watch(lessPath, ['less']); }); 使用开发前运行 gulp style，剩下的事情就是写 Less 了，再不也用管什么 wxss 了。

小程序开发 webview 中无法获取参数的解决方法

2018-01-04 约 1 分钟读完搬砖秘籍

小程序开发已经支持 web-view 的跳转，最近开发的一项功能正好APP与小程序均要使用，于是自然想到使用 web-view 的方式。场景是这样的：用户打开APP/小程序，查看自己个人信息卡片，根据不同的 userid 返回不同的卡片样式。 H5实现 H5实现很简单，直接使用页面类似地址 https://xxx.com/xxx.html?userid=2345。所以可以看出 2345 这个 userid 是需要我们动态传入的。小程序实现小程序中跳转 web-view 需要生成一个新的页面，然后里面嵌入一个 <web-view></web-view> 组件。所以想当然的可以这样写： <web-view src="https://xxx.com/xxx.html?userid={{userid}}"></web-view> 其中 userid 我们需要在跳转之前传入，并在当前的 onLoad 中获取一下，代码如下： /** * 页面的初始数据 */ data: { userid: '' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (option) { if (option.userid) { this.setData({ userid: option.userid }) } }, 遇到的问题使用上面的方法在 iOS 下完美，但是在 Android 下经常会出现 H5 页面没有获取到 userid 的情况。后来思考了一下，应该是 <web-view> 组件在没有取到参数的情况下（也就是 onLoad 没有执行完成）的时候就已经打开了我们的 H5 页面。继续阅读

解决html2canvas的图片跨域问题

2018-01-04 约 1 分钟读完搬砖秘籍

最近要做一个将当前HTML页面生成图片的功能，网上百度了一圈，确定了如下的解决方案。使用html2canvas将HTML DOM节点转换成canvas 使用canvas的toDataURL方法将canvas转换成base64 github: niklasvh/html2canvas 图片跨域在前端开发中，HTML中的 img 标签是默认支持跨域的，但是这个规则canvas不认。使用html2canvs转换canvas的时候，如果使用了不同域的图片就会报错。针对这种情况的解决方案如下: 第一步：给 img 元素设置 crossOrigin 属性，值为 anonymous 或 *。 PS：这个html2canvas已经支持了这个配置项（version：1.0） useCORS: true 第二步：图片服务端设置允许跨域（返回 CORS 头）。如果图片是自己服务器的，这么做很简单，可是如果是其他服务器的呢？比如微信头像。图片资源转发针对非自己服务器图片的情况下，可以使用 NodeJS 做一个中间层代理。代码如下： const router = require('express').Router(); const coWrap = require('../utils/coWrap'); var request = require('request'); router.get('/transferImage', coWrap(function* (req, res) { var path = req.query && req.query.path; return request.get(path).pipe(res); })); 使用 NodeJS 的 request 库可以方便的完成这个功能。使用方法如下： <img src="http://yourserver/prcImage/transferImage?path=https://yourimg.png"> 问题解决，以上。参考一次 H5 「保存页面为图片」的踩坑之旅