我是怎么在 3 天内开发 AI 微信小程序的

基于对 AI 的爱好与兴趣,我走上了独自钻研机器学习的道路。和所有热爱 AI 的人们一样,在一段孤独的摸索旅程中,我勉强完成了几次深度学习模型的训练。

其中令我印象较深的成果就是情感分类模型。他能够根据你的文字生成其背后作者的喜怒哀乐。

深度学习模型展示出来的 "人性化"让我感到惊喜,于是我开始思考怎么将它的“人性化”转化为帮助人们的工具。

在情感模型的基础上建立一个上层应用,让它为人类社会中增添不一样的烟火。

基于多方面的考量,我最终选择开发一款 微信 "情感" 小程序

故事拉开序幕

在进行小程序开发之前,我们非常有必要先对小程序做一个充分的了解。

什么是小程序

简单来说,比起传统的 App,微信小程序是一种全新的连接用户与服务的方式,它具有非常出色的使用体验,并且它可以在微信内被便捷地获取与传播。

小程序发展史

实际上,小程序并非凭空而来的。当微信逐渐流行、变成几乎人人都离不开的社交工具时,承载微信的 WebView 也逐渐成为了量级最大的移动 Web 入口。每天访问 WebView 的数量甚至超过了访问所有浏览器的总和。虽然无法通过第三方获取到微信 WebView 的日活数据,但这个客观事实间接促进了小程序的诞生。

其实在小程序正式步入人们视线之前,微信早已有了类似的 js 调用接口,这里给大家展示一个调用了微信 js-bridge 原生组件去浏览图片的例子:

WeixinJSBridge.invoke('imagePreview',{
current: 'http://inews.com',urls: [ // 所有图片的URL列表,数组格式
    'https://img/1.jpg','https://img/2.jpg',0);">'https://img/3.jpg'
]
},function(res) {
    console.log(res.err_msg)
})
复制代码

此类 js 接口其实最开始是专门给腾讯内部人员去进行调用的,但却意外被许多个人开发者发现很多并进行了使用,这也慢慢成为了微信中网页的标准。

在 15 年开始的时候,微信官方发布了一套专门用于进行网页开发的工具包,名为 js-sdk ,在这个工具包内开放了如微信支付、录音、语音识别、等数十个接口。这给所有的 Web 开发者都打开了一扇从未开启过的全新的大门,让所有的开发者都可以自由地使用微信开发的原生能力,这使得他们可以去完成一些之前无法完成或是难以做到的事情。

js-sdk 完美继承了 WeixinJSBridge 的特性,并且由只对内部开放转为了对外部开放。并且它通过其暴露的微信调用接口使得所有 Web 开发者有了更多操作微信功能的能力。但是,这个模式并没有很好地解决移动网页的体验问题:

  • 用户访问页面时,在页面显示前会有一段比较明显能够被感知的白屏过程。受限于网速与不同终端的性能,这个问题会越来越明显。

于是乎,js-sdk 的增强版本就诞生了,其中有一个非常重要的新特性,被称之为: 微信 Web 资源离线存储 。

​以下文字引用自内部的文档(没有最终对外开放):

微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。

通过使用微信离线存储,Web 开发者可借助微信提供的资源存储能力,直接从微信本地加载 Web 资源而不需要再从服务端拉取,从而减少网页加载时间,为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。

相信大家都已经看明白了,这其实就是 HTML5 中 Application Cache 的加强版。

然而,在经过了多次测试后发现,还有问题没有被完全的解决:

  • 页面切换较为生硬;
  • 点击有明显延滞的感觉。

最终微信意识到 js-sdk 无法处理这些问题,这需要一个全新的系统去完成,而这个系统必须具备以下几个能力:

  • 加载速度快

  • 原生的体验

  • 易用且安全的微信数据开放

  • 兼顾开发效率与开发难度

而这就是小程序的由来。

故事开始了

前言

首先请大家见谅,这一篇文章并不会教你如何零基础开发小程序。如果你是一个软件开发新手。那么我建议你先了解一些基础的 js 语法 以及相应的 前端知识 。

掌握前端基础后,相信在 小程序前端组件官方文档 的帮助下,任何人都可以快速上手开发小程序。

下面我主要跟大家分享两个最核心、 最省钱 的两个小程序开发技巧:

  • 搭建小程序云开发环境;
  • 如何使用云开发调用 AI 模型接口。

小程序云开发

在刚开始考虑开发小程序时,和你们一样,我有着许多的顾虑:

  • 需要购买域名、服务器吗?

  • 维护成本大吗?

带着这些顾虑,我小心翼翼地翻开了 微信官方文档 。在大脑经过分布式阅读过后,我发现了 云开发 这个关键词。

什么是云开发?

微信官方文档中是这么解释的:

开发者可以使用云开发开发微信小程序、小游戏,无需搭建服务器,即可使用云端能力。

云开发为开发者提供完整的原生云端支持和微信服务支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代,同时这一能力,同开发者已经使用的云服务相互兼容,并不互斥。

云开发提供了几大基础能力支持:

简单来说,有了云开发, 我不需要购买服务器就可以开发一款全栈小程序。

嘿嘿,没错,这就是我想要的。

如何搭建小程序云开发环境

那么如何搭建云开发环境呢,综合官方文档,我总结了一套极简搭建教程,大家可以作为参考。

云开发环境极简搭建四部曲:

  • 接着需要下载 小程序开发工具 ;

  • 然后使用管理员 / 开发者账号登录开发工具并填入小程序的 APPID 以及勾选 云开发 选项后点击新建;

  • 点击页面中的云开发,跟着提示选择 免费版云开发配额 。

至此一个云环境就算是搭建完毕了。

什么是云函数?

云开发环境搭建完毕后,是时候看看什么是 云函数 了。

官方的定义如下:

云函数是一段运行在云端的代码,无需管理服务器,在开发工具内编写、一键上传部署即可运行后端代码。

简单来说,云函数就是运行在云端的函数。

云函数有什么用?

云函数大有用处。

有了它,就相当于是有了一个 "大后端",所有业务逻辑以及对数据库的操作我们都可以封装在云函数中调用,十分方便。

第一个云函数

说了这么多大道理,是时候来实战一下了。

右键点击云函数环境 (cloudfunctions | xxxxxxx)后新建一个名为 test 的云函数:

可以看到默认的文件(index.js)中已经有了云函数代码(获取当前微信用户上下文,并返回用户信息):

// 云函数入口文件

const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数

exports.main = async (event,context) => {

	const wxContext = cloud.getWXContext()

	return {

		

最后右键点击该云函数并选择 开启云函数本地调试 后点击右下角调用:

可以看到函数执行成功并拿到了返回值(openid 等信息......)

至此,恭喜我们快速完成了第一个云函数。

如何在小程序中快速调用 AI 模型

来自清晨的灵光一闪

相信大家都非常好奇,我是怎么做到在云函数中 "零成本" 调用 AI 能力的。

其实我开始也非常苦恼这个问题,即使小程序有云函数的功能,但也没办法轻易 "零成本" 调用 AI 模型,原因如下:

  • 小程序云函数目前仅支持 node.js,而我的模型调用接口代码为 python;
  • 不管再怎么 "云",想要运行自己的 AI 模型必须得有一台 16G 内存以上的机器(成本巨大);
  • 即使有了自己的服务器也需要域名备案,实在是太麻烦了;

但就在一个明媚的清晨,我翻身起床后突然灵光一闪:

  • 可不可以调用腾讯自己的 AI 开放接口间接达到这个目的呢?

想法再多不如动手行动,于是我访问了 腾讯云控制台的自然语言处理模块 。

根据指引进行服务开通后,我进入到 API 密钥管理 并记录下了 API 密钥:

那么如何在小程序中调用它呢?我再一次陷入了深深的沉思......

云函数调用 AI 模型

在经过漫长的探索后我回到了 test 云函数目录下的命令行,安装了腾讯云服务调用包:

npm install tencentcloud-sdk-nodejs
复制代码

然后修改 test 云函数 (index.js):

)

const tencentcloud = "tencentcloud-sdk-nodejs");

cloud.init()

async (event,51); font-weight: 700;">const  NlpClient = tencentcloud.nlp.v20190408.Client;
	
	const models = tencentcloud.nlp.v20190408.Models;
	
	const  Credential = tencentcloud.common.Credential;
	
	const  ClientProfile = tencentcloud.common.ClientProfile;
	
	const  HttpProfile = tencentcloud.common.HttpProfile;
	
	let cred = new  Credential(event.secretId,event.secretKey);
	
	let httpProfile = new  HttpProfile();
	
	httpProfile.endpoint = "nlp.tencentcloudapi.com";
	
	let clientProfile = new  ClientProfile();
	
	clientProfile.httpProfile = httpProfile;
	
	let client = new  NlpClient(cred,0);">"ap-guangzhou",clientProfile);
	
	let req = new models.SentimentAnalysisRequest();
	
	let text = event.text
	
	let params = '{"Text":\"' + text + '\"}'
	
	console.log('待预测字符串: ' + text)
	
	req.from_json_string(params);
	
	client.SentimentAnalysis(req,51); font-weight: 700;">function (errMsg,response) {
	
		if (errMsg) {
		
		console.log(errMsg)
		
		}
		
		'AI 预测情绪正值: ' + response.Positive)
		
		'AI 预测情绪负值: ' + response.Negative)
		
	})

}
复制代码

在这段代码中,我通过腾讯云账号中的密钥连通了 AI 情感预测接口,最后将情感预测的结果打印了出来。

接下来我开启了本地云函数调用窗口并传入相应参数:

  • secretId (腾讯云 API 服务密钥 Id )

  • secretKey (腾讯云 API 服务密钥 Key)

  • text (待预测的字符串)

然后点击调用后终于看到了 AI 模型的预测结果:

最后我成功地使用云函数调用了免费的 AI 开放接口

这时我已经热泪盈眶,除了感动还有一丝小满意,原来云开发还能这么玩。

故事的结尾

文章到这里,相信最重要的两个部分大家已经了解并掌握了:

  • 搭建云开发环境
  • 快速调用 AI 模型

回头望去,整个小程序开发过程大概历经三天两夜,整段经历大概与 "编程马拉松" 类似。

编程马拉松,又称黑客日、黑客节或编程节,是一个流传于黑客当中的新词汇。编程马拉松是一种活动。

在该活动当中,计算机程序员以及其他与软件发展相关的人员,如图形设计师、界面设计师与项目经理,相聚在一起,以紧密合作的形式去进行某项软件项目。

编程马拉松的灵魂是合作地编写程序和应用。编程马拉松的时长一般在几天到一周不等 。

--维基百科

于是乎,在经过 "疯狂" 开发后,一个日记小程序的雏形就诞生了。

虽然说前端页面并没有多复杂,但是确实倾注了许多开发心血。

开发完成的那一刻我已经不在乎是否有人真正去使用他。因为我已经从他身上收获到了全身心投入开发的快乐。

最后,老铁,要不点个赞再走可好?么么哒

1、给俺点个赞呗,可以让更多的人看到这篇文章,顺便激励下我,嘻嘻。

2、老铁们,关注我的原创微信公众号「智能测试开发」,专注于写 AI 与测试开发的结合(AI + 测试 + 开发)。

保证让你看完有所收获,不信你打我。后台回复『进阶教程』,免费送你一套关于测试与开发的进阶教程。

作者简介

作者:大家好,我是泰斯特,从测试入门,再转战开发,最后学习 AI。深知 AI 对测试与开发的影响力。,所以申请了一个微信公众号『智能测试开发』,泰斯特期待你的关注,和我一起学习。 转载说明:未获得授权,禁止转载

最后预祝所有用心实践的读者都能开发出有特色的 AI 小程序~

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


判断H5页面环境在微信中还是小程序中 用小程序提供的wx.miniProgram.getEnv可以获取环境参数 <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-23 11:18:05 wx.navigateTo 用于保留当前页面、跳转到应用内的某个页面,使用 wx.navigateBack可以返回到原页面。对于页面不是特别多的小程序,通常推荐使用 wx.n
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法总结 小程序里常见的取值有以下几种,一个完整的项目写下来,用到的概率几乎是100%。 列表index下标取值 页面传值 form表单取值 1. 列表index下标取值 实现方式是:data-index="{{index}}&quot
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器: let ua = navigator.userAgent.toLowerCase(); let isWeixin = ua.indexOf('micromessenge
微信小程序获取data-xx=""属性的值,自定义属性设置和获取(data-) 微信小程序<view class="details-btn" data-taskId="111" bindtap='taskdetails&#39
小程序报错:TypeError: Cannot read property ‘addEventListener‘ of undefined 解决办法 将调试基础库由2.16.0(或者当前的) -> 2.14.1 解决问题
H5跳转微信小程序-成功案例(VUE)(踩坑无数) TuoMei 已于 2022-07-29 09:52:22 修改 准备工作 根据官方提供的资料需准备以下几点: 1、已认证的服务号 2、绑定JS接口安全域名 (在微信公众平台设置) 3、IP白名单 (在微信公众平台设置) 4、将小程序和H5公众号进
微信小程序 页面跳转和数据传递实例详解 这篇文章主要介绍了微信小程序 页面跳转和数据传递实例详解的相关资料,这里附有实例代码帮助到家学习理解,需要的朋友可以参考下 微信小程序 页面跳转和数据传递 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也
情景1.拉取公司代码演示: 因为github有墙,这里我们以gitee(码云)为例作为演示 (其实就是国产github,也非常好用~) 步骤一:打开Git界面 先在一个空文件夹右击Git Bash Here,打开git界面 步骤二:输入克隆远程仓库指令 别人复制的链接在这里获取 拿到别人赋值的链接自
如何开发微信小程序? 作为一名10多年一直从事互联网平台开发的从业者,我来回答下这个问题吧。 微信小程序开发流程总体可以归纳为4个步骤, 老张带您捋一捋整个环节,小白用户可以收藏了。 好了废话不多说,开始! 一、开发前小程序需要准备的资料 我们在开发微信小程序前,需要准备下相关资料。这个资料主要是后
原生小程序开发优化方案 为了更好的制定优化方案,我们 有必要先了解下小程序的底层架构、以及与普通网页开发的差异 小程序最终渲染载体与当下一些热门的技术 Flutter、React Native等不同,依然是浏览器内核,而不是原生客户端。 而对于传统的网页来说,UI 渲染和 JS 脚本是在同一个线程中
1,不要下两倍尺寸的图片, 小程序本身自己就会对元素缩小两倍,设计图片的一杯就已经很清晰了。 2,图片压缩,(主要是压缩静态资源,ps 可以压缩,然后有一些在线压缩工具,保持600-800kb 的静态) 3,通用的代码组件化 4,是在工程量太大可以分包,分包现在最大支持20m(一般都不会去分包的)
文章浏览阅读189次。人工智能研究实验室OpenAI在2022年11月30日发布了自然语言生成模型ChatGPT,上线两个月就已经超过一亿用户,成为了人工智能界当之无愧的超级大网红。ChatGPT凭借着自身强大的拟人化及时应答能力迅速破圈,引起了各行各业的热烈讨论。简单来说ChatGPT就是可以基于用户文本输入自动生成回答的人工智能聊天机器人。那肯定会有人说这不就是Siri嘛,虽然都是交互机器人但是两者的差别可老大了。那么ChatGPT在人机交互时为什么会有这么出色的表现?它到底会不会取代搜索引擎?90%的人真的会因为ChatG
文章浏览阅读193次。8. 导航和路由管理:掌握小程序的导航方式,如使用wx.navigateTo跳转页面、使用wx.redirect重定向页面等,学会实现页面之间的跳转和传参。1. 小程序的基本概念和架构:了解小程序的定义、特点以及与传统APP的区别,掌握小程序的运行环境、组件和API等基本概念。10. 支付功能:学习小程序的支付方式,如微信支付、支付宝支付等,了解支付流程和注意事项,学会实现小程序的支付功能。9. 用户授权和登录:了解小程序的用户授权机制,如获取用户信息、调用微信API等,学会实现用户的登录和注册功能。_微信小程序开发知识点总结
文章浏览阅读4.8k次,点赞7次,收藏18次。一、准备工作1. 安装微信开发者工具,并登录微信小程序账号;2. 准备斗地主游戏的图片资源;3. 准备斗地主游戏的音效资源;二、创建小程序1. 打开微信开发者工具,点击“新建小程序”,输入小程序名称,选择小程序的项目目录,点击“创建”;2. 在小程序的项目目录中,新建文件夹“images”,将准备好的斗地主游戏的图片资源放入“images”文件夹中;3. 在小程序的项目目录中,新建文件夹“sounds”,将准备好的斗地主游戏的音效资源放入“sounds”文件夹中;三、编写代码1. 在小程_扑克牌微信小程序代码
文章浏览阅读3.9k次,点赞3次,收藏7次。一、准备工作:1. 安装微信开发者工具,创建小程序项目;2. 准备游戏角色图片;3. 准备游戏背景音乐;二、实现步骤:1. 创建游戏页面,添加游戏角色图片,添加游戏背景音乐;2. 创建游戏角色类,定义游戏角色属性,如角色名称、角色图片、角色能力等;3. 创建游戏类,定义游戏属性,如游戏人数、游戏角色、游戏规则等;4. 创建游戏控制类,定义游戏流程,如游戏开始、游戏结束、游戏角色分配等;5. 创建游戏界面,实现游戏流程,如游戏开始、游戏结束、游戏角色分配等;6. 创建游戏结果页面,显示游戏_微信小程序游戏代码
文章浏览阅读1.7k次。1. 创建小程序项目:使用微信开发者工具创建一个小程序项目,并在项目中添加一个页面,用于模拟聊天。 2. 定义数据结构:定义一个数据结构,用于存储聊天记录,包括发送者、接收者、消息内容等信息。 3. 实现聊天功能:实现聊天功能,包括发送消息、接收消息、显示消息等功能。 4. 实现界面:使用微信小程序的界面框架,实现聊天界面,包括聊天记录列表、输入框等。代码示例:// 定义数据结构var chatData = { sender: '', receiver: '', message: '' };_制作聊天对话小程序代码
文章浏览阅读2.1k次。1、创建小程序项目:使用微信开发者工具,新建一个小程序项目,输入项目名称,选择项目目录,点击“创建”按钮,即可创建小程序项目。2、添加页面:在小程序项目中,可以添加多个页面,每个页面都有自己的页面文件,比如首页、分类页、购物车页、我的页面等。3、添加组件:在小程序项目中,可以添加多个组件,比如商品列表组件、购物车组件、订单组件等,用于在页面中显示商品信息、购物车信息、订单信息等。4、添加接口:在小程序项目中,可以添加多个接口,用于获取商品信息、购物车信息、订单信息等,以便在页面中显示。5、_微信开发者工具做一个我的商城
文章浏览阅读515次。首先在配置页面index.json 添加以下代码。然后在index.jx页面配置下拉刷新。_小程序云开发上拉刷新