Nodejs
共 4 篇文章
安装nodejs
sudo apt-get install nodejs
sudo apt-get install npm
全局安装包
sudo npm i -g cnpm
查看全局安装的包
npm list -g --depth 0
全局卸载包
sudo npm uninstall -g cnpm
清理缓存
npm cache clean -f
默认镜像太慢换淘宝镜像
npm config set registry https://registry.npm.taobao.org
现在我常使用cnpm包
检查配置是否成功
npm config get registry
首先，为什么我们需要这个？
因为微信小程序虽然可以可以绘制svg图片，但是在真机调试的时候却渲染不出来。所以我们需要一个工具(可以将svg转成微信小程序支持的canvas并绘制出来)。
我使用的是touch-wx + vs code 开发。
现已启用该开发模式.因为Ubuntu下经常编译不完整
Touch WX 是什么？
Touch WX是一套完全免费的微信小程序开发框架，包含丰富的UI控件用于官方组件的补充。与Touch UI开发方式很相似，也是通过VSCode编辑器+插件的方式开发，经过编译后输出小程序代码。
与其他小程序框架最主要的区别在于：Touch UI完全是基于小程序官方的自定义组件机制实现，输出的是小程序原始代码，而不是输出开发者完全无法阅读的编译代码。这样当遇到问题时，开发者可以很方便的定位问题所在，还可以基于输出的原始代码继续开发。
当你用Touch UI开发了H5应用，可以直接导入到Touch WX进行转换，稍作调整就能生成小程序。反之也同样，当你Touch WX开发了微信小程序，可以导出为Touch UI工程来生成H5应用。
Touch WX 的特点
我的理解
Touch WX 就是一个可以将特定的nodejs项目编译成微信小程序项目的框架
Touch WX更多操作
更多操作见http://www.touchui.io/touchui_doc_wx/
推荐大家看一下，或许会打开新世界的大门哦！
接下来，我默认你已经看了Touch WX的文档，并且拥有一定的nodejs基础
开始流程
安装parse-svg-path
npm install parse-svg-path --save
引入parse-svg-path
var parse = require('parse-svg-path')
使用parse-svg-path
parse(d)
d为svg中的path值
不了解svg？
请转
http://www.w3school.com.cn/svg/svg_intro.asp
如何获得path值？
var options = {
url:"svg的URL",
success:function(res){
const ctx = wx.createCanvasContext('myCanvas')
ctx.setFillStyle('black')
var match = res.data.match(/d="(.*?)"/);
var d = match[1];
console.log(d);
}
}
wx.request(options);
上图中d就是path值，我这里使用的是正则表达式查找，而且只有一个path，如不一样，请自行modify
为什么要在服务端装canvas？ 因为并不是所有的客户端都能很好的支持canvas（比如微信小程序不能修改自定义字体），所以我们需要一个
能够在服务端生成图片的，然后将图片传输
安装node-canvas
1. 更新编译环境
sudo apt-get install libcairo2-dev libjpeg8-dev libpango1.0-dev libgif-dev build-essential g++ -y
2. 安装node-canvas
npm install -g canvas
3. 测试代码
var Canvas = require('canvas'),
canvas = new Canvas(300, 200),
ctx = canvas.getContext('2d'),
fs = require('fs');
var out = fs.createWriteStream(__dirname + '/image.png')
, stream = canvas.createPNGStream();
stream.on('data', function(chunk){
out.write(chunk);
});
//在左边画正方形
ctx.fillStyle = '#A00'
ctx.fillRect(0, 30,50,50);
//在右边画正方形
ctx.fillStyle = '#aaa'
ctx.fillRect(50, 30, 50, 50);
//画文字
ctx.fillStyle = "#000";
ctx.font = "20px Arial";
ctx.fillText("Hello World", 0, 20);
//画一个圆
ctx.beginPath();
ctx.arc(30, 110, 20, 0, 2*Math.PI);
ctx.stroke();
ctx.fillStyle = "green";
ctx.fill();
ctx.save();
可能遇到的问题
如果你按上述方法操作，并且运行成功了。那便是极好的