专栏首页大龄程序员的人工智能之路手把手教你开发人工智能微信小程序(1):Hello WeChat!

手把手教你开发人工智能微信小程序(1):Hello WeChat!

每个开始学习编程的程序员,大约是从“Hello World!”开始的吧。就这样一个简简单单在屏幕上输出“Hello World!”字样的程序,帮助我们进入编程世界。这里我也以一个最简单的小程序开启人工智能微信小程序之旅。致敬经典,Hello WeChat!

在本文,您将掌握:

  1. 如何申请微信小程序。
  2. 新建支持tfjs的微信小程序工程。
  3. 编写简单的tfjs代码。

申请微信小程序

在微信公众平台官网首页(mp.weixin.qq.com)点击右上角的“立即注册”按钮。

微信公众平台首页

然后按照向导一步步进行下去即可,如果中间遇到什么疑问,参考小程序注册流程:https://kf.qq.com/faq/170109iQBJ3Q170109JbQfiu.html

注册成功之后,登入微信公众平台。然后点击设置,记下小程序的ID,这个在后面新建小程序工程时需要:

小程序ID

新建微信小程序工程

  1. 打开微信小程序开发者工具,新建项目,在AppID那一栏填入在上一步记下的小程序ID:

新建小程序项目

  1. 点击新建按钮后,微信小程序开发者工具会自动生成小程序的基本框架代码,项目布局如下:

小程序项目布局

  1. 添加tfjs微信小程序插件 登录小程序管理后台,也就是前面步骤中的微信公众平台:设置 -> 第三方设置 -> 添加插件,搜索框中输入 wx6afed118d9e81df9,查找插件并添加。

tfjs插件

配置微信小程序工程

  1. 增加npm支持,修改基础库版本。 点击 设置 -> 项目设置,打开项目详情界面。调试基础库请选择 2.7.0以上版本,勾选增强编译使用 npm 模块

项目详情

  1. 打开操作系统的命令行程序,进入项目的根目录,执行: $ npm init
  2. 在后续的提示里,一直按回车键,使用默认值。
  3. 经过第3步,在项目下会多出一个package.json文件,往该文件中添加: "devDependencies": { "miniprogram-api-typings": "^2.6.5-2" }, "dependencies": { "@tensorflow/tfjs-core": "1.3.1", "fetch-wechat": "0.0.3" }
  4. 再到操作系统的命令行,进入项目的根目录,接着执行: $ npm install
  5. 点击微信开发者工具中的工具 -> 构建npm ,就可以继续下去。这时可能会弹出提示:

警告忽略之。

  1. 引入插件代码包,往项目文件的app.json文件中加入: "plugins": { "tfjsPlugin": { "version": "0.0.7", "provider": "wx6afed118d9e81df9" } } tfjs插件的最新版本是0.07。

微信小程序中添加tfjs代码

  1. 在app.js的onLaunch里调用插件configPlugin函数 //app.js const fetchWechat = require('fetch-wechat'); const tf = require('@tensorflow/tfjs-core'); const plugin = requirePlugin('tfjsPlugin'); App({ onLaunch: function () { plugin.configPlugin({ // polyfill fetch function fetchFunc: fetchWechat.fetchFunc(), // inject tfjs runtime tf, // provide webgl canvas canvas: wx.createOffscreenCanvas() }); // 其它初始化代码 } });
  2. 组件设置完毕就可以开始使用 TensorFlow.js库的API了。比如加入如下简单的代码: tf.tensor("Hello WeChat!").print(); 这段代码将在微信开发者工具的调试控制台输出:

控制台输出

至此,一个非常非常简单的人工智能微信小程序就完成了,虽然它啥事也没干。别着急,在后面的文章将逐步带你深入人工智能小程序的开发。

小结

本章主要讲解了建立一个支持tfjs的微信小程序工程,包括申请微信小程序,配置微信小程序工程,以及添加一段简单的tjfs代码。在下一篇文章中,我将以一个线性回归的例子,说明微信小程序中的tfjs。如果你有什么建议,欢迎留言。

本系列文章的源码请访问:

https://github.com/mogotech/wechat-tfjs-examples

本文分享自微信公众号 - 云水木石(ourpoeticlife)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-12-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Cesium案例解析(一)——HelloWorld

    感觉网上已经有不少关于cesium的教程了,但是学习一个框架最快的办法就是熟悉其自带的实例了。cesium网站上提供了一系列实例,就想通过这些实例总结下学习ce...

    charlee44
  • 2020 年 Node.js 将会有哪些新功能[每日前端夜话0xFA]

    2019 年是 Node.js 诞生的第 10 个年头,npm 上可用的包数量超过了 100 万。Node.js 本身的下载量也在持续增长,同比增长了 40%。...

    疯狂的技术宅
  • 关于 Promise 的 9 个面试题[每日前端夜话0xFB]

    我们使用构造函数方法创建一个 Promise,并通过 reject 回调立即触发错误。

    疯狂的技术宅
  • 每个开发人员都应该知道的11个Linux命令

    本文主要挑选出读者有必要首先学习的 11 个 Linux 命令,如果不熟悉的读者可以在虚拟机或云服务器上实操下,对于开发人员来说,能熟练掌握 Linux 做一些...

    武培轩
  • Next.js新手教程

    Next.js 是一个轻量级的 React 服务端渲染应用框架。本教程演示使用Next.js制作一个显示比特币汇率的网站。详细的Next.js信息请访问http...

    fanzhh
  • Kubernetes client-go实战应用

    以前创建和管理CRD的client库位于:https://github.com/kubernetes/apiextensions-apiserver,但是现在c...

    Allen.Wu
  • js --- ffmpeg rtsp 推流,websocket通信,cnavas 渲染

    小蔚
  • Best IDE for Web Development

    Top_10_Full_Stack_Web_Development_IDEs_1.png

    用户4822892
  • ANCWEB - 基于 ASP.NET CORE 2.0 的 WEB 开发

    VS code 中使用终端,并执行dotnet new webapi 指令创建 ASP.NET CORE WEB API 项目。

    李郑
  • 鼠标点击网页出现爱心特效

    将以下代码添加到footer.php里即可(其他网站同理,放在网站页面的页头或页脚)

    AlexTao

扫码关注云+社区

领取腾讯云代金券