根据目前了解到的情况，微信从8.0.19开始内核从x5换成了xweb，原来使用的vConsole无法使用了，目前仅能使用Chrome浏览器调试，但是速度很慢，影响使用，官方能给回复不，什么时候能把vConsole集成进来，不然只能选择降级，不用新版本了

2022微信公开课开讲啦！ 在刚刚过去的1月6日，微信公开课于广州正式开讲。今年的公开课以「入微」为主题，预示微信迈进产品打磨入微、行业创新入微、服务场景入微的新阶段。 公开课从小程序、视频号、搜一搜、企业微信等生态产品及其衍生使用场景出发分析过去一年的亮眼表现。 [图片] 在大会上我们了解到：微信小程序日活已成功突破4.5亿；视频号多次直播活动观看数据过千万；搜一搜日活突破7亿，微信搜索引擎逐渐成熟；企业微信已成为大多数品牌与客户建立信任的标配工具等等非常可观的数据之外，还有一些非常具有创意且有相当大的发展潜力的应用在公开课上得以亮相展示。 小程序AR 餐饮行业全新应用场景受疫情的影响，线下用户的消费习惯已经改变，用户倾向于通过小程序点单获得更安全卫生的服务。 在本次公开课上微信公布的数据显示，目前已有超过5成的餐饮企业拥有自己的微信外卖小程序，而这个数据在2022年仍有巨大增长潜力。 [图片]编辑 微信开放平台会继续通过产品能力支持小程序入微支持餐饮行业：通过AR能力实现用户AR点餐新体验；通过OCR能力实现菜单快捷录入；通过语音识别能力实现无障碍点餐；通过半屏唤起能力支持商户异业合作；通过官方数据平台We分析帮助商户进行经营分析…… [图片] 其中AR与餐饮行业在小程序上的应用独具创新。在微信公开课上释出的AR+点单小程序的创意demo，为餐饮行业创造新增长点提供了更多的可能性。 [视频] 在过往的经历中，通过外卖平台商家拍摄的图片与简短的文字描述来了解菜品，或是在线下通过服务生的口头介绍是点单的两种主要表现形式。所以在过去的点单环节，餐饮供需双方往往陷入这样的难题： 图片仅供参考。消费者苦恼于所见未必所得，对菜品的期待与实际存在落差，就餐满意度也会因此降低 [图片] 新菜品推广难度大。商家新菜品推出，不仅要考虑菜品的研发，还需要从价格的优惠、员工的培训等多个维度考虑提升新品下单率。 [图片] 小程序AR点单再造业务增长点小程序AR菜品展示让点餐环节解决痛点问题，成为新一代餐饮品牌形象展示工具： [图片] 在公开课展示的demo中我们可以看到令人食指大动的“牛排”在出现在顾客的餐桌上，超仿真的3D食物模型加上小程序AR的展现形式，全方位刺激着顾客的大脑，所见即所得，提升商家生意表现；支持与第三方点评软件接通，直接在AR UI界面即可展示该菜品的食客评价，无需另开APP查看菜品评价，缩短决策链路，提升顾客体验；微信团队还结合当代消费者对健康体态的追求，让顾客可以实时可视化的查看当前菜品的热量与营养，辅助顾客决策参考[图片] 商家如何升级AR菜单？弥知科技（KIVISENSE）非常荣幸能够成为本次入微小程序AR餐饮行业应用的技术服务商。我们在demo的制作过程中，梳理出了商家如何将现有菜单AR化的全流程： [图片] （一）菜品模型制作 在菜品的建模上目前市面上常见的食物模型有3D纯手工建模与扫描建模两种形式。为了进一步降低商家的数字菜品制作门槛，我们探索出了拍照建模这一新模式。 [图片] 商家仅使用手机拍摄商品照片即可输出高仿真度的3D菜品模型。欢迎关注弥知科技公众号后台回复「建模」关键词获取制作教程 （二）KivicubeAR插件接入 为了让商家与小程序开发者们更容易上手AR点单交互制作，我们将此次入微餐饮行业AR示例使用到的AR功能放到kivicubeAR插件的高级API中免费开放给所有的开发者。 [图片] 开发者可将建好的菜品数字化模型使用KivicubeAR插件进行AR交互的开发。通过本插件开发者可实现Slam平面追踪、UI自定义、模型素材的接入与模型点击事件的自定义等本次示例AR部分所用到的内容。 欢迎关注弥知科技公众号后台回复「餐饮」关键词获取高级API接入文档 （三）跳转下单 在前两个部分的的工作完成之后，我们只需要将AR点单的部分与实际下单的接口串联起来，就能完成对整个AR点单流程的制作，AR菜单也就正式升级完成啦！欢迎点击下方小程序链接进入体验！ 期待服务商与开发者们在2022使用KivicubeAR插件制作出更多与餐饮行业结合的精彩应用！欢迎大家保持对弥知的关注，我们会持续更新更多新奇好玩的AR技术分享给广大的开发者们！ 关于弥知 专注于AR(增强现实)原创技术研发，是国内领先的AR整体解决方案服务商 旗下国内首个WebXR在线制作平台KIVICUBE，帮助用户通过可视化编辑，零基础即可制作出交互丰富的AR商业场景，并一键发布至小程序、公众号与微博等多个平台 更多好玩的想法？ 欢迎直接联系我们 [图片] www.kivisense.com

目前官方提供小程序基础能力，开发者可以接入第三方引擎，完成小程序AR效果开发。 微信相关的基础能力供参考： -摄像头组件（用户授权下，可获取视频帧数据）： https://developers.weixin.qq.com/miniprogram/dev/api/media/camera/CameraContext.html -WebGL画布： https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html -完整示例代码： https://developers.weixin.qq.com/s/ElC24AmF729W -传感器： https://developers.weixin.qq.com/miniprogram/dev/api/device/compass/wx.onCompassChange.html#accuracy%20%E5%9C%A8%20iOS/Android%20%E7%9A%84%E5%B7%AE%E5%BC%82 -陀螺仪： https://developers.weixin.qq.com/miniprogram/dev/api/device/gyroscope/wx.startGyroscope.html https://developers.weixin.qq.com/miniprogram/dev/api/wx.onGyroscopeChange.html 欢迎开发者/开发平台进驻微信服务平台，成为服务商、提供插件，供更多服务商和品牌合作伙伴了解、联系你们。具体请参考：https://developers.weixin.qq.com/community/develop/doc/000e2ed8e44e98b1916884aa351008 开发者也可以多关注官方微信号"微信公开课"等解读：https://mp.weixin.qq.com/s/4_p2bAcp3OkTQizceFvMkQ

视频中的操作是怎么实现的，请大神们指点。如果是app唤起小程序，那微博app我们如果去操作，自己的app倒是可以实现。 话不多说上视频： [视频]

不建议同个页面使用多个video组件，建议不超过3个video，如果要实现video列表功能，请进行优化（image列表，选中时将image替换成video）

[图片] 2019年google开发者大会于9月10日~11日在上海浦东举行，这次大会2天吸引了4000+人的参加，现场气氛“爆炸”，分享主题将涵盖 Android、Flutter、Web、Firebase、TensorFlow、Google Cloud、ARCore by Google、Material Design、无障碍、Google Play、Wear OS by Google 谷歌、Google 搜索、Google 助理、Payments、谷歌艺术与文化等等。 [图片] GDD大会的主页： http://events.google.cn/intl/zh-CN/developerdays2019/ [图片] 可以说这次大会除了Android10的新版本特性外，核心中核心就是关于TensorFlow 2.0的发布以及关于其的深度应用，现在越来越多的APP和场景都用到机器学习，AI赋能已经进入了生活的方方面面，通过机器学习和数据挖掘，AI甚至比你的父母更懂你，比如抖音、淘宝京东的推荐，而近期大火且极具争议性的产品 "ZAO" 也是依靠AI完成换脸。结合机器学习、AI、大数据喂食，这将会是未来！！！ [图片] 作为一名前端开发，智库君很幸运能参加到这次大会，本人也重点关注了GDD大会有关Web前端开发，多平台应用以及Google的“重型武器" TensorFlow 的JS版本。 之前7月5日，欧莱雅宣布与微信合作，上线小程序端（阿玛尼美妆）首个动态虚拟试妆应用，釆用欧莱雅集团增强现实和人工智能ModiFace公司技术，旨在为消费者提供更具个性化、社交化的消费新体验。 [图片] 早前，我们认为机器学习可能更偏向后端，而现在它已经渐渐走向前台，很多之前Web和小程序无法做到的事情，都已经发生了改变。 下面是本人在大会现场拍的一些PPT供大家学习参考： [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] [图片] 会后的思考： 作为一个前端工程师，智库君正努力向全栈开发转型，但这次大会给了我一个深深的触动，现在大量的年轻人涌入IT行业，未来的竞争将会越来越激烈，那么很快我们就会遇到一些的问题，你是否思考过以下问题呢？ 等你到了35岁是否会遇到中年危机呢？如何站在技术的尖端不被淘汰呢？如何与后来的年轻人比拼学习能力呢？ 5ABCD（5G、人工智能AI、区块链Blockchain、云计算Cloud、数据Data）是今年很火的一个概念，相信也会是未来五年技术主要的发展方向，随着VR、AR、裸眼3D和物联网技术的成熟，行业大洗牌也将不期而至。你是否想好了未来5年努力的方向呢？ 最后，送上TensorFlow学习资料地址： TF官网： https://tensorflow.google.cn/ TF的JS版本官网： https://tensorflow.google.cn/js TF中文社区： http://www.tensorfly.cn/ 往期回顾： [打怪升级]小程序评论回复和发贴组件实战（一） [填坑手册]小程序Canvas生成海报（一） [拆弹时刻]小程序Canvas生成海报（二） [填坑手册]小程序目录结构和component组件使用心得

小程序中使用three.js 目前小程序支持了webgl, 同时项目中有相关3D展示的需求，所以考虑将three.js移植到小程序中。 但是小程序里面没有浏览器相关的运行环境如 window，document等。要想在小程序中使用three.js需要使用相应的移植版本。https://github.com/yannliao/three.js实现了一个在 three.js 的基本移植版, 目前测试支持了 包含 BoxBufferGeometry, CircleBufferGeometry, ConeBufferGeometry, CylinderBufferGeometry, DodecahedronBufferGeometry 等基本模型，OrbitControl， GTLFLoader, OBJLoader等。 使用 下载https://github.com/yannliao/three.js项目中build目录下的three.weapp.min.js到小程序相应目录，如： [图片] 在index.wxml中加入canvas组件, 其中需要手动绑定相应的事件，用于手势控制。 [代码]<view style="height: 100%; width: 100%;" bindtouchstart="documentTouchStart" bindtouchmove="documentTouchMove" bindtouchend="documentTouchEnd" > <canvas type="webgl" id="c" style="width: 100%; height:100%;" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" bindlongtap="longTap" bindtap="tap"></canvas> </view> [代码] 在页面中引用three.js 和相应的Loader： [代码]import * as THREE from '../../libs/three.weapp.min.js' import { OrbitControls } from '../../jsm/loaders/OrbitControls' [代码] 在onLoad中获取canvas对象并注册到[代码]THREE.global[代码]中,[代码]THREE.global.registerCanvas[代码]可以传入id, 用于通过[代码]THREE.global.document.getElementById[代码]找到, 如果不传id默认使用canvas对象中的_canvasID, registerCanvas同时也会将该canvas选为当前使用canvas对象. 同时请在onUnload回调中注销canvas对象. 注意: THREE.global 中最多同时注册 5 个[代码]canvas[代码]对象, 并可以通过id找到. 注册的canvas对象, 会长驻内存, 如果不及时清理可能造成内存问题. [代码]THREE.global[代码]为[代码]three.js[代码] 的运行环境, 类似于浏览器中的window. [代码]Page({ data: { canvasId: '' }, onLoad: function () { wx.createSelectorQuery() .select('#c') .node() .exec((res) => { const canvas = THREE.global.registerCanvas(res[0].node) this.setData({ canvasId: canvas._canvasId }) // const canvas = THREE.global.registerCanvas('id_123', res[0].node) // canvas代码 }) }, onUnload: function () { THREE.global.unregisterCanvas(this.data.canvasId) // THREE.global.unregisterCanvas(res[0].node) // THREE.global.clearCanvas() }, [代码] 注册相关touch事件. 由于小程序架构原因, 需要手动绑定事件到THREE.global.canvas或者THREE.global.document上. 可以使用[代码]THREE.global.touchEventHandlerFactory('canvas', 'touchstart')[代码] 生成小程序的事件回调函数，触发默认canvas对象上的touch事件. [代码] { touchStart(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e) }, touchMove(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e) }, touchEnd(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e) }, } [代码] 编写three.js代码, 小程序运行环境中没有requestAnimationFrame, 目前可以使用canvas.requestAnimationFrame之后会将requestAnimationFrame注入到THREE.global中. [代码]const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000); camera.position.z = 500; const scene = new THREE.Scene(); scene.background = new THREE.Color(0xAAAAAA); const renderer = new THREE.WebGLRenderer({ antialias: true }); const controls = new OrbitControls(camera, renderer.domElement); // controls.enableDamping = true; // controls.dampingFactor = 0.25; // controls.enableZoom = false; camera.position.set(200, 200, 500); controls.update(); const geometry = new THREE.BoxBufferGeometry(200, 200, 200); const texture = new THREE.TextureLoader().load('./pikachu.png'); const material = new THREE.MeshBasicMaterial({ map: texture }); // const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio); // renderer.setSize(canvas.width, canvas.height); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(canvas.width, canvas.height); } function render() { canvas.requestAnimationFrame(render); // mesh.rotation.x += 0.005; // mesh.rotation.y += 0.01; controls.update(); renderer.render(scene, camera); } render() [代码] 完整示例: index.js [代码]import * as THREE from '../../libs/three.weapp.min.js' import { OrbitControls } from '../../jsm/loaders/OrbitControls' Page({ data: {}, onLoad: function () { wx.createSelectorQuery() .select('#c') .node() .exec((res) => { const canvas = THREE.global.registerCanvas(res[0].node) this.setData({ canvasId: canvas._canvasId }) const camera = new THREE.PerspectiveCamera(70, canvas.width / canvas.height, 1, 1000); camera.position.z = 500; const scene = new THREE.Scene(); scene.background = new THREE.Color(0xAAAAAA); const renderer = new THREE.WebGLRenderer({ antialias: true }); const controls = new OrbitControls(camera, renderer.domElement); // controls.enableDamping = true; // controls.dampingFactor = 0.25; // controls.enableZoom = false; camera.position.set(200, 200, 500); controls.update(); const geometry = new THREE.BoxBufferGeometry(200, 200, 200); const texture = new THREE.TextureLoader().load('./pikachu.png'); const material = new THREE.MeshBasicMaterial({ map: texture }); // const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); const mesh = new THREE.Mesh(geometry, material); scene.add(mesh); // renderer.setPixelRatio(wx.getSystemInfoSync().pixelRatio); // renderer.setSize(canvas.width, canvas.height); function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(canvas.width, canvas.height); } function render() { canvas.requestAnimationFrame(render); // mesh.rotation.x += 0.005; // mesh.rotation.y += 0.01; controls.update(); renderer.render(scene, camera); } render() }) }, onUnload: function () { THREE.global.unregisterCanvas(this.data.canvasId) }, touchStart(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchstart')(e) }, touchMove(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchmove')(e) }, touchEnd(e) { console.log('canvas', e) THREE.global.touchEventHandlerFactory('canvas', 'touchend')(e) }, touchCancel(e) { // console.log('canvas', e) }, longTap(e) { // console.log('canvas', e) }, tap(e) { // console.log('canvas', e) }, documentTouchStart(e) { // console.log('document',e) }, documentTouchMove(e) { // console.log('document',e) }, documentTouchEnd(e) { // console.log('document',e) }, }) [代码] index.wxml [代码]<view style="height: 100%; width: 100%;" bindtouchstart="documentTouchStart" bindtouchmove="documentTouchMove" bindtouchend="documentTouchEnd" > <canvas type="webgl" id="c" style="width: 100%; height:100%;" bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd" bindtouchcancel="touchCancel" bindlongtap="longTap" bindtap="tap"></canvas> </view> [代码] 其他 全部示例在 https://github.com/yannliao/threejs-example three.js 库 https://github.com/yannliao/three.js loader 组件在 threejs-example 中的 jsm 目录中 欢迎提交PR和issue

自从微信7月初开放AR增强现实接口之后，我们已经成功的将人脸识别与图像识别算法进行了移植，我们的算法在小程序支持实时的跟踪！效果视频如下： 自然图像识别与实时跟踪https://project.kivisense.com/videos/kivisense-wechat-ar.mp4 人脸特征点识别与实时跟踪https://project.kivisense.com/videos/kivisense-facear.mp4 视频是在安卓设备上拍摄的效果非常好，在很低端的设备上都可以跑出很好的效果，但是目前遇到一个问题，这个问题在iOS上面最为明显，希望可以拜托官方人员处理一下，涉及到基础库的一个问题。只要这个问题解决了，我们会将AR接口做成插件，方便所有微信开发者使用！到时就真正的可以为所有需要AR功能的微信小程序服务了！感谢官方人员帮忙处理一下~ 谢谢

建议小程序官方可以封装ARKit与ARCore的相关识别与跟踪能力，然后供小程序使用 当前不支持ARKit的设备已经是少数（5%），可以参考Apple App Store统计：https://developer.apple.com/support/app-store/ [图片] 支持ARCore的设备也日益增多，请参考：https://developers.google.cn/ar/discover/supported-devices#android_china [图片] 另外，一般的，如果晚于上面列出的这些设备上市的新中高端设备，都支持ARCore 具体实现建议参阅浏览器上的XR标准 - WebXR ：https://immersive-web.github.io/webxr/ 目前AR常见的平面检测与跟踪：https://github.com/immersive-web/anchors/blob/master/explainer.md