在这里给大家分享一个小游戏开发神器-Annie2x. Annie2x是一款Flash插件,直接通过Flash来开发小游戏，简单逆天。 如果你会Flash或者以前用Flash做页游，做动画，那Annie2x基本上就是0难度了，直接上手。 如果你在Flash使用过CreateJS开发过H5，那基本上Annie2x基本上就是0难度了，直接上手。 并且Annie2x比CreateJS好用太多了。 如何使用呢，去Annie2x官网下载插件（http://annie2x.com)。然后在他的论坛有一个专门讲安装的教程 http://ask.annie2x.com/article/5。 照着来就行了。 不说了，直接上图: [图片] [图片] [图片] [图片] 具体制作可以去官方论坛，或者官方的QQ里了解，那里有更多学习资源。 上手非常快，之前用laya egret 还有cocos做一个项目，要做动画效果的时候真的是好麻烦。 有了Annie2x，像做swf一样开发小游戏，真的是太爽了。 上面这个游戏我只用了半天时间就把以前的Flash游戏转换成小游戏了。这里放出源码，大家直接下载后解压用微信开发者工具打开就能预览效果了，见证下这个神奇的开发工具吧。 源码地址:https://pan.baidu.com/s/1Igcyc7pAKijoezfCfm3I7A  密码:9x1j

生成海报相信大家有的人都做过，但是canvas绘图的坑太多。大家可以试试这个组件。然后附上楼下大哥做的可视化拖拽生成painter代码的工具：链接地址https://developers.weixin.qq.com/community/develop/article/doc/000e222d9bcc305c5739c718d56813

开发文档：https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx069ba97219f66d99&token=61191740&lang=zh_CN 插件功能 语音转文字 语音合成 文本翻译 具体使用案例可以查看面对面翻译小程序开源项目：  https://github.com/Tencent/Face2FaceTranslator                   简单DEMO实现： step 1：添加插件 在使用前，需要登录官网 设置 → 第三方服务 → 添加插件 搜索 【微信同声传译】并添加 [图片] 在需要使用插件的小程序 app.json 中指明需要使用的插件版本等信息 [代码]// app.json {  ...  "plugins": {    ...    "WechatSI": {      "version": "0.0.6",      "provider": "wx069ba97219f66d99"  } }[代码] 接下来，在index.js引入插件，获取全局唯一的语音识别管理器recordRecoManager [代码]// index.js const plugin = requirePlugin("WechatSI") const manager = plugin.getRecordRecognitionManager() [代码] step 2：语音输入 希望做到的效果是按住某个按钮，开始识别语音，松开按钮就结束识别 [代码][代码][代码]<view  catchtouchstart="streamRecord" catchtouchend="endStreamRecord">中文view> [代码] [代码]// index.js Page({  data: {},  streamRecord: function() {    manager.start({      lang: 'zh_CN',    })  },  streamRecordEnd: function() {    manager.stop()  } }) [代码] step 3：绑定录音回调事件 [代码][代码][代码] <view>语音识别内容：{{currentText}}view> [代码] [代码]// page.js Page({  data: {    currentText: '',  },  initRecord: function() {    //有新的识别内容返回，则会调用此事件    manager.onRecognize = (res) => {      let text = res.result      this.setData({        currentText: text,      })    }    // 识别结束事件    manager.onStop = (res) => {      let text = res.result      if(text == '') {        // 用户没有说话，可以做一下提示处理...        return      }      this.setData({        currentText: text,      })      // 得到完整识别内容就可以去翻译了      this.translateTextAction()    }  },  translateTextAction: function() {},  onLoad: function() {    this.initRecord()  } }) [代码] step 4：文本翻译 [代码][代码][代码]<view>翻译结果：{{translateText}}view> [代码] [代码]// page.js Page({  data: {    currentText: '',    translateText: '',  },  translateTextAction: function() {    let lfrom =  'zh_CN'    let lto = 'en_US'    plugin.translate({      lfrom: lfrom,      lto: lto,      content: this.data.currentText,      tts: true, // 需要合成语音      success: (resTrans)=>{        // 翻译可以得到 翻译文本，翻译文本的合成语音，合成语音的过期时间        let text = resTrans.result        this.setData({          translateText: text,        })        // 得到合成语音让它自动播放出来        wx.playBackgroundAudio({          dataUrl: resTrans.filename,          title: '',        })      },    })  }, }) [代码] step 5：语音合成 plugin.translate得到的语音文件是有过期时间，可以download到本地使用。 如果像面对面翻译一样需要存比较多历史记录的话，也可以选择过期之后调用plugin.textToSpeech接口再去重新合成一次。 [代码]  plugin.textToSpeech({    lang: 'zh_CN',    content: '我想重新进行语音合成',    success: resTrans => {      // 可以重新得到语音合成文件和过期时间    }, }) [代码]

wxDraw.js--小程序的Canvas动画库正式发布 [图片] wxDraw轻量的小程序canvas动画库 github 是什么canvas 是HTML5的一个重要元素，它能够高效的绘制图形，但是过于底层，且粗糙的Api，导致开发者很难使用它来做较为复杂的图形， 而且它的即时绘制无记忆特性，使得它内部的图形并不支持动画更不支持一切交互事件。 这样的问题出现在所有支持canvas的客户端上同样出现在 微信小程序中的canvas中， 由于小程序由jscore支持，并没有window对象，并且canvas的Api与标准的canvas的Api有所出入，所以市面上绝大部分canvas库与它无缘。 而wxDraw也就应运而生，专门用于处理小程序上canvas的图形创建、图形动画以及交互问题的。 特性简单 不需要你会canvas,会用jQuery就会使用wxDraw。 灵活 所有图形，随时随地都可以进行属性修改、图形添加以及图形销毁。 事件支持 小程序支持的事件只要是合理的都支持。 缓动动画支持 wxDraw支持链式调用动画『就像jQuery的animate一样』，并且支持几乎所有的缓动函数 图形创建 支持图形这些图形都可以在演示文件里看到 点这里 rect[代码] var rect = new Shape('rect', {x: 60, y: 60, w: 40, h: 40, fillStyle: "#2FB8AC", rotate: Math.PI/2 },'mix', true);[代码] [图片]rect circle[代码] let circle = new Shape('circle', { x: 100, y: 100, r: 40, sA: Math.PI/4,                             fillStyle: "#C0D860",                            strokeStyle: "#CC333F", rotate: 20, lineWidth: 0, needGra: 'line',                              gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]},                           'fill', true)[代码] [图片] polygon[代码]let polygon = new Shape('polygon', { x: 200, y: 200, r: 40, sides: 9, //9边形                          fillStyle: "#FC354C", rotate: Math.PI / 4 }, 'mix', true)[代码] [图片] ellipse[代码]    let ellipse = new Shape('ellipse', { x: 200, y: 200, a: 40, b: 100,                             fillStyle: "#00A0B0", rotate: Math.PI / 7 }, 'mix', true)[代码] [图片] cshape 「自定义图形」[代码]  let cshape = new Shape('cshape', {      rotate: Math.PI / 2,      points: [[70, 85], [40, 20], [24, 46], [2, 4], [14, 6], [4, 46]],      lineWidth: 5,      fillStyle: "#00A0B0",      rotate: Math.PI / 7,      needGra: 'circle',      smooth:false,      gra: [[0, '#00A0B0'], [0.2, '#6A4A3C'], [0.4, '#CC333F'], [0.6, '#EB6841'], [1, '#EDC951']]    }, 'fill', true)[代码] [图片] line[代码]let line = new Shape('line', { points:[[240,373],[11,32],[28,423],[12,105],[203,41],[128,0.06]],               strokeStyle: "#2FB8AC",lineWidth:1, rotate: 0, needShadow: true,smooth:false },                 'fill', true)[代码] [图片] text[代码]  let text = new Shape('text', { x: 200, y: 200, text: "我是测试文字",                      fillStyle: "#E6781E", rotate: Math.PI / 3}                      'fill', true)[代码] [图片] wxDraw创作的动画演示这些动画都可以在演示文件里看到 点这里 Google [图片] 贪吃蛇 [图片] logo演绎 rect舞蹈 [图片] 吃豆人 [图片] wxDraw事件这些事件都可以在演示文件里看到 点这里 支持 tap touchStart touchEnd touchMove longPress drag「自定义的事件」 事件演示旁边UI小妹妹亲自示范 😜 第一视角 [图片] 是不是特别简单，特别方便！！！ 来，老铁们！star 走一波！！！ 详细文档还请关注github

微信小程序图表工具，charts for WeChat small app，基于canvas绘制，体积小巧。

首先要登录微信公众平台，在你的小程序后台的设置-第三方服务—插件管理，搜索插件并点击添加，之后等待插件开发者的同意申请。（备注：如果你的申请迟迟未通过，可以在https://github.com/tvfe/txv-miniprogram-plugin的Issues里new issue一条，填写你的小程序名称，你的qq/微信号，申请时间。然后提交，等待通过，亲测很快就通过了使用申请。） 然后可以download下https://github.com/tvfe/txv-miniprogram-plugin上的腾讯视频小程序播放插件在本地，用通过申请的小程序appid打开下载的代码包在微信开发者工具中查看，可以看到一个简单的demo。预览扫描二维码可以在手机上测试。 ———————————————————————————————————————————————————— 补充：vid的获得。 在腾讯视频上登录你的qq或者微信，然后实名认证通过后，上传视频审核通过后，点击你的视频播放，在视频左下有个分享，点击后复制html代码到你的剪切板等地，然后在https的路径里找到vid，这个vid就是你视频的唯一vid值。之后把它放到组件txv-video的vid里。 使用： 1、先在你的小程序的app.json里声明使用插件的   "plugins": {     "myPlugin": {       "version": "1.0.0",       "provider": "wxxxxxxxxxxxxxxxxx"     }   }， 使用腾讯视频插件就对应   "plugins": {          "tencentvideo": {              "version": "1.1.1",              "provider": "wxa75efa648b60994b"          }       } 2、在使用插件的页面的js文件里 const txvContext = requirePlugin("tencentvideo"); 3、使用插件的自定义组件，在json中定义需要引入的自定义组件。使用plugin://协议   "usingComponents": {         "txv-video": "plugin://tencentvideo/video"   } 4、页面上<txv-video vid="xxxxxxxx" playerid="txv1"></txv-video> 5、去看插件的使用方法，比如暂停，播放等。 先在onload中 this.txvContext = txvContext.getTxvContext('txv1'); 然后在你的具体的函数中调用需要的方法，如 this.txvContext.pause()