整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
常大家对于软件开发都是一行一行地敲代码，程序员也被称为 “码农”，但实际上现在随着程序开发技术的不断发展，目前开始普及 "无代码" 编程，不需要你懂任何代码知识，只需要拖动组件，即可完成快速开发。
今天锋哥要给大家推荐这个「Zion」低代码开发平台，通过可视化和组件化模块就能实现制作小程序、网站。
Zion体验
目前「Zion」支持微信小程序、Web页面以及H5的无代码开发，App端的开发，未来也会上线。由于锋哥也是个网站前后端开发者，对于「Zion」的网页低代码开发比较感兴趣。
新建立网页开发，通过双击背景进入聚焦模式后，可以看到左边有各种组件功能，你可以自由拖拉到页面上，非常像原型设计工具。最贴心的是右边会显示移动端的响应兼容模式，你可以对手机端单独设置样式。
对于每个组件模块都提供了丰富的样式设置，如果前端开发都需要手动写 CSS 代码，通过这种 "无代码" 编程方式的确要方便多了。
组件也提供了行为设置功能，包括可以设置功能请求、用户事件、逻辑时间、刷新数据、设置数值、二维码、图片、视图等。
对于下面这种布局，传统前端开发折腾起来还是比较麻烦的，在「Zion」里面你可以自由拖动到你需要的位置，图片还支持悬浮、垂直流、以及悬浮编辑。
到这里一些用户可能会觉得「Zion」也只能做静态页面？实际上「Zion」还提供了数据模型构建功能，也就是数据库，通过新建立表、字段以及数据关系，然后关联到相关的组件上，就可以实现动态数据了。例如下面我给 Xbox 手柄创建了不同颜色的数据库字段。
需要显示不同颜色的手柄的剩余库存，可以利用文本框，添加行为条件，选择你刚才添加的数据库字段，这样就会关联上了。这样对比传统的开发模式，要方便多了。
体验下来通过「Zion」制作网页的确很方便，例如下面这个页面，如果用传统开发需要前端/后端搭建、数据库搭建以及最终的部署，是十分繁杂的，而用「Zion」的话，基本上 5 分钟左右就完事，都是拖拉组件，所以效率要提高不少。
最后可以把制作好的项目通过「Zion」部署发布上线，实现从设计到交付的完全自动化，免去折腾服务器网站环境各种配置。
另外小程序无代码开发基本和网页一样，都是通过拖拉组件来制作，需要注意的是你需要先注册微信小程序之后才能发布程序。具体「Zion」官方有教程，这里就不多介绍了。
通过 API 接口你还可以快速制作查询天气快递 / 星座运势 / 天天鸡汤 / 那年今日 /繁简文字转换 / 笑话大全 / 生成海报等小程序。
通过「Zion」开发小程序上手门槛低。快速实现应用的开发、建构和发布。提供稳定的开发环境、最优的发布路径，最快的迭代速度，前端一站式集成开发，后端提供永久支持保障。
Zion 社群&社区
值得一提的是，「Zion」有着非常活跃的社群，每天都会有大量的新老用户在社群进行交流、提问，除了官方人员几乎24小时的积极答疑之外，也有很多正在使用的老用户会帮助新用户解决问题，你可以在登陆的「Zion」之后在编辑器的右下角看到进入社群的二维码进群交流。
另外据官方透露，用「Zion」自己搭建的新社区也即将上线，里边将会提供更加全面的帮助文档以及小程序、网页的搭建方案，帮助新用户快速上手。
团队
根据官方介绍「Zion」的创始成员来自于美国硅谷，毕业于剑桥、康奈尔、卡内基梅隆等世界名校，曾任职于 Google、Facebook、Dropbox、Groupon、Medallia 和 Yahoo 等硅谷一线大厂或独角兽企业。
总结
体验下来才知道低代码开发原来可以这么 “爽” ，像传统开发某个功能或者需要对网页进行设计排版，整个过程非常折腾，而通过「Zion」可以快速完成从需求到应用，可以节约不少开发成本。
同时「Zion」也集成了数据模型、远程数据、行为功能，降低大型系统研发的复杂性，降低搭建的难度，所以这种低代码平台会成为中小企业一种新选择。
最后，感兴趣的话，快用「Zion」制作你第一个小程序 / 网站吧！
对了「Zion」使用完全免费！完全免费！完全免费！
牌在建立自己的品牌网站时，都会有设计微信小程序的想法，但是许多品牌常常缺乏专业人员，不了解微信原生小程序和网页版微信小程序的区别何在，接下来就由星凯网络来对此稍作介绍。
第一点，微信原生小程序使用的是微信制定的标准，HTML语义有限，完成以后需要经过微信审核，审核通过方可发布。而微信网页版小程序一经成功发布，事后可以随时随意修改小程序的内容，避免了每一次版本更新都要再提交审核的麻烦。因为网站源码就在品牌自己的手中。
第二点，两者运行环境不同
应用HTML5的网页版微信小程序的运行环境即包括webview的浏览器本身。而微信小程序的运行环境则类似一个并不完整的浏览器，在此处将微信小程序的运行环境形容为“不完整的浏览器”有着以下几个原因：
1、微信小程序在其开发过程中将会使用到部分与HTML5相关的技术。
2、微信小程序完成之后，需要将其提交给微信进行审核，而微信可以在微信本身版本不进行更新的情况下将小程序的更新实装到微信之中。
3、微信小程序的运行环境是微信开发团队基于浏览器内核完全重构的内置解析器，这个内置解析器专门针对微信小程序专了优化，通过与自己定义的开发语言标准配合，从而提升小程序的运行性能。
第三点，两者开发成本不同
原生的微信小程序需要严格按照微信的开发文档以及使用微信规定的语言来开发，为了聘请具有相应能力的人或是让员工学会相关技术，成本将会相对来说有所提高。
但是微信的网页版小程序则只需要开发一个手机网站，即可将其封装成为一个基于浏览器运行的微信小程序，这就意味着任何一个品牌网站都能够被打包成为一个手机网页版微信小程序。
第四点，两者可获取的系统权限级别不同
微信小程序相比起HTML5的网页版应用，可以取得更多的系统权限，并且能够和微信小程序完美契合，微信官方也就此宣称它具有native App的流畅性能，同时这也是微信小程序与网页版小程序相比最大的优势所在。网页版的大多数功能被限定在业务逻辑简单的功能之中的最大原因便是其无法获取足够的系统权限，无法实现较为高级的功能。微信小程序花费更多成本，搭载在更复杂的运行环境下，又被高标准要求所换取的便是优秀的质量和良好的口碑。
如今围绕微信生态相关开发已经非常常见，本期带来如何通过 qrcode.js 实现微信内置浏览器动态生成二维码并能够长按识别 以及 通过 html2canvas 生成图片并长按保存
微信长按弹出识别选项的原理
Base64
Blob
canvas.toDataURL([type, encoderOptions])
结合微信规范明确需求
确定实现方案
开发平台
开发环境
客户端环境
本例的技术实现方案均在Vue项目环境下实现的
提供两种引入方式，两种方式是不同的js库，方便大家选择和使用
// 第一种方式
// qrcode.js官方GitHub文档: https://github.com/davidshimjs/qrcodejs
<script src="static/js/qrcode.js"></script>
// 第二种方式
npm install qrcodejs2
import qrCode from 'qrcodejs2'HTML
<div class="qrcode-panel" id="qrcode"></div>JS
// 简单调用
new QRCode(document.getElementById('qrcode'), 'your content');
// new QRCode(element, option)
// element 显示二维码的元素或该元素的 ID
// option 参数配置
// 标准调用
var qrcode=new QRCode(document.getElementById("qrcode"), {
text: "https://www.xxx.com?did=123456&id=123&userid=456",
width: 160, //图像宽度
height: 160, // 图像高度
render: 'canvas', // 生成格式(table 和 canvas)
colorDark : "#000000", //前景色
colorLight : "#ffffff", //背景色
correctLevel : QRCode.CorrectLevel.H // 容错级别
});
// 容错级别，可设置为：
QRCode.CorrectLevel.L（最大 7% 的错误能够被纠正）
QRCode.CorrectLevel.M（最大 15% 的错误能够被纠正）
QRCode.CorrectLevel.Q（最大 25% 的错误能够被纠正）
QRCode.CorrectLevel.H（最大 30% 的错误能够被纠正）
// 其他公共方法
QRCode.makeCode(text) // 设置二维码内容
QRCode.clear() // 清除二维码
重置的原因是原JS生成的 image 和 canvas 对象无法在微信端长按识别
var canvas=document.getElementsByTagName('canvas')[0];
var img=this.convertCanvasToImage(canvas);
document.getElementById("qrcode").append(img);
convertCanvasToImage(canvas) {
//新建Image对象
var image=new Image();
// canvas.toDataURL 返回的是一串Base64编码的URL
image.src=canvas.toDataURL("image/png");
image.id='qrcodeImg';
return image;
}
至此，一个能够满足长按识别的动态二维码已经生成，不继续处理的话会有两张二维码，长按对比就能看出，qrcode.js 生成的二维码长按无法识别，而经过重置之后的对象是可以实现此功能的。
我的处理方式是两个二维码都保留，将二维码图片进行重新定位，将重置的二维码图片置于不能识别二维码上层，不去频繁操作DOM节点的显示隐藏。
生成的二维码通过 append 的方式插入到dom节点中，在关闭操作时需要将之前生成的 canvas 和 image 去除
上述教程可以实现动态生成二维码进行保存和长按识别，但是如果需要将HTML内容生成canvas保存就存在问题了。
针对保存需要注意的几个问题：
使用第三方JS库 html2canvas 进行处理
识别和生成原理：
存在的问题：
一些可能需要的参数
使用 html2canvas
import html2canvas from 'html2canvas'HTML
<div class="html2canvas-conetent" ref="canvasContent">
<img src="/static/images/canvas.jpg">
<span>测试Title</span>
</div>
<button @click="showCanvas()">生成canvas图片</button>
JS
showCanvas() {
let self=this;
html2canvas(self.$refs.canvasContent).then(function(canvas) {
self.imgUrl=canvas.toDataURL();
self.showCanvasImg=true;
});
}
// 异步解析调用和呈现元素
showCanvas() {
let self=this;
html2canvas(self.$refs.canvasContent {
async: true
}).then(canvas=> {
self.imgUrl=canvas.toDataURL();
self.showCanvasImg=true;
});
}
*请认真填写需求信息，我们会在24小时内与您取得联系。
