七天学习微信小程序开发(一)—— 学习笔记
文章目录
- 前言
- 目标
- 第一天 —— 前端配置和编写
- 微信开发
- 微信小程序的代码结构
- 常用标签(wxml)
- 常用样式(wxss)
- 界面布局的技术
- 任务
- 第二天 —— 深度学习微信前端编写(一)
- 程序底部图标
- 页面数据
- for循环
- if语句
- 任务
- 第三天 —— 深度学习微信前端编写 (二)
- 文本框和按钮的事件
- 获取用户信息
- 点击按钮发送消息
- 关于微信前端样式的补充
- 任务
- 第四天 —— 后端环境配置和编写
- node.js的安装方法
- egg框架的安装方法
- egg的使用方法
- egg代码提示工具
- 任务
- 第五天 —— 前后端交互的简单学习
- 前后端交互的方法及注意事项
- 后端获取前端传来的文件
- 向后端传入图片或拍照上传
- 向后端传入录音文件
- 任务
- 第六天 —— 动态界面的实现
- 前端向后端发送文字
- 微信AI(腾讯)小程序开发
- 智能聊天、智能语音、人脸识别等
- 人脸检测
- 语音识别
- 任务
- 第七天 —— 自主学习
- 目标
- 任务
- 参考资料
- 微信开放文档
- 各大公司AI接口
前言
最近受疫情的影响,一直呆在家中进行网课学习。由于我们有一定的JS、CSS以及后端开发的基础,所以老师只给了七天的时间学习智能微信小程序的项目开发。在线上听课的同时,抽空也将一些重点记了下来,在此上传至CSDN下作以保留。这里所写的代码,基本都是固定格式,在开发其他功能的小程序中同样适用。
目标
- 前端 —— 掌握微信开发技术
- 后端 —— 掌握node.js的egg框架
- AI技术 —— 掌握各大平台的AI接口使用方法(如:腾讯AI、阿里AI、百度AI等)
- 最终目标 —— 开发一个AI产品
第一天 —— 前端配置和编写
微信开发
注意事项:
一:需要一个微信账号
二:将微信账号升级为开发者账号(操作步骤如下)
- 第一步:打开此网址https://mp.weixin.qq.com
- 第二步:选择个人开发
- 第三步:申请开发必要的appkey和appid,在开发设置里面有appkey,可在本地电脑上保存这两个数据
三:使用各大厂商的AI接口提供的功能,开发自己的产品(各种厂商的AI网站可在参考资料下自行获取使用)
微信开发工具使用方法:
第一步:打开微信开发工具
第二步:选择项目目录,可以选择默认,也可选择其他目录
第三步:appid填入上一步获取的appid或者选择测试
微信小程序的代码结构
1、app开头的几个文件是整个小程序的入口
2、在app.json文件中,pages数组中代表的是页面路径,所有的小程序页面都必须在这里进行注册,放在数组第一个的就是小程序的入口页面,也就是第一个加载出来的页面
3、pages文件夹中代表的就是该小程序的所有页面
注意:在创建页面的时候,文件夹的名字最好和页面名字相同
4、页面由4个文件组成
.js文件:主要实现用户交互和跟后端的交互
.wxss文件:决定了页面上的控件的外观(如:宽高背景颜色字体大小等270多个效果)例如:
.myname{width:200px;color:red;}
.wxml文件:用来写标签,决定页面上展示哪些控件和内容
常用标签(wxml)
标签名称 | 功能 |
---|---|
view | 用来排版的模块标签,可以在它里面放很多控件 |
text | 放文字的标签 |
image | 显示图片,在src属性里面放图片的网址或路径 |
其他标签不再展示,可在微信开发文档查看。
常用样式(wxss)
样式名称 | 介绍 |
---|---|
宽(width) | 设置宽度 |
高(height) | 设置高度 |
背景颜色(color) | 设置背景颜色 |
圆角度(border-radius) | 设置圆角度 |
文字、大小、颜色(font-xxx) | 例如:font-size:30px; |
线条粗度(font-wight) | 设置线条粗度 |
间隔(leter-space) | 设置间隔距离 |
行高(line-height) | 设置行高 |
页面背景(background-image:url(“放入图片地址或图片路径”)) | 设置页面背景 |
调整界面居中(text-align:center) | 设置界面布局方式为居中 |
调整字体大小(font-size:) | 例如:font-size:25px; |
字体加粗(font-weight:bold;) | 设置字体加粗 |
其他不再赘述,只展示最常用的样式,其余样式可在CSS文档下查看使用。
界面布局的技术
1、元素内部的控件之间的弹性布局技术
代码格式:
.xxx{display: flex; /*弹性布局*/justify-content:flex-start; /*居左对齐 flex-end space-round space-beteawn*/flex-wrap: wrap; /*内容模块超出了自动换行*/
}
最小宽度:内容比元素窄
最大宽度:内容比元素宽
.xxx{min-width:20px; /*最小20px*/max-width:200px; /*最宽200px*/
}
任务
写一个微信聊天的页面(不需要实现功能,只展示静态效果)
写一个商品页面的商品排版
第二天 —— 深度学习微信前端编写(一)
程序底部图标
icon图标库:阿里矢量图标库网址 https://www.iconfont.cn/
图标显示的开发步骤:
1、在程序的app.json文件中输入tabBar,即可创建单个或多个跳转按钮
2、tabBar属性中的"iconPath":放入图片icon路径,“selectedIconPath”:放入单击后的图片路径。
页面数据
1、微信中开发时,对于变量的取法:在wxml文件中,通常在标签中使用双大括号来对变量取值。
例如:
<view>{{……}}</view>
注意:
1、在使用image标签对数据进行取值时,图片文件要放在src中。
例如:
<image src="{{……}}"></image>
2、在js文件中,存放自定义数据的元素要放在data中,通常数据有以下几种格式。
1、对象格式,如:
obj:{name:"zhangsan",age:"22"}
2、元素定义赋值,如:
title:"hello word"
3、数组格式,如:
arr["123","456","789"]
4、对象+数组格式,如:
users[{name:"marry",age:11},{name:"xiaomin",age:22},{name:"kares",age:33}]
3、在wxml中调用js中保存的数据
通常使用双大括号的格式调用,如:
<text>{{users[0].name}}</text>
for循环
1、在wxml中for语句的使用方法,如:
<view wx:for="{{arr}}">{{item}}</view> <!--此时程序会自动遍历数组中所有的元素,并显示在页面上。-->
<view wx:for="{{users}}">{{item.name}}</view> <!--使用此方式可以对对象数组或复杂数据进行调用。-->
2、企业级数据的获取及使用
通过不同的平台获取页面的json或Ajax数据,粘贴复制到js文件中的data中,然后在onLoad中写入函数,例如:
onLoad: function (options){console.log(this.data.weibo)}
3、Ajax中的数据可通过搜索查找相应的数据对应。
4、数据导入完成后,即可通过for循环,将其展示在页面上。
if语句
1、使用格式:
<view wx:if="{{判断条件}}"></view>
2、for循环和if语句可嵌套使用。
任务
- 制作一个可以跳转的界面,并在一个页面上显示获取到的相应的数据(理解json/ajax的数据处理)
第三天 —— 深度学习微信前端编写 (二)
文本框和按钮的事件
1、文本框(input)属性
value的值是文本框中所显示的内容。例如:
<input>value="{{inp1}}" <!--这时inp1所在的js页面中所写的数据将被调用 --> </input>
bindinput=“函数名”,文本框的自定义函数,在js中定义此函数。
定义格式如下:
函数名:function(e){“这里写入该函数的方法”}
常用函数 作用 console.log(this.……) 控制台输出括号中this调用的数据 console.log(e.detail.value) 在文本框函数中使用时,会在控制台输出此时文本框所调用的数据 this.setData({inp1:e.detail.value}) 设置此时inp1的值为文本框中输入的值
2、按钮(button) 属性
bindtap=“函数名”,按钮自定义函数,在js中定义此函数。定义方法同文本框自定义函数类似。
声明变量时,使用let来声明变量。例如:
let last=this.data.count
实例:通过点击按钮实现数字的加减,并把运算后的结果输出到屏幕上。
方法:这时可通过使用let声明变量,setData设置变量等。(代码如下)
data:{count:1} /*存放的数据*/test.function(){ let newData=this.data.count+1 /*变量new存放新的数据*/this.setData({count:newData}) /*设置变量(赋值)*/}
获取用户信息
1、在js文件中的onLoad:function(options)中写入如下代码:
wx:wx.getUserInfo({success(res) {console.log(JSON.parse(res.rawData))}})/*可查看当前用户的一些微信数据*/
2、获取当前用户的头像,在js文件中的onLoad:function(options)中写入如下代码:
//获取当前用户的头像
let that=this
wx:wx.getUserInfo({success(res) {let userinfo=JSON.parse(res.rawData)console.log(userinfo)that.setData({ userimg: userinfo.avatarUrl})}
})
点击按钮发送消息
1、JS代码如下:
console.log(this.data.chatInputValue)
//获取数据
let arr2=this.data.arr
//给数组添加数据
arr2.push({ flag: 0, img: this.data.userimg, text: this.data.chatInputValue})
//把新数组添加到data中,让界面显示
this.setData({arr:arr2})
//设置滚动条,使得每次的新数据都能展示在最下方而不必滑动页面
this.setData({scrolltop:10000000000})
2、各种功能学习在微信开发者文档中。
关于微信前端样式的补充
名称 | 用法 |
---|---|
外边距 | margin- |
内边距 | padding- |
相对定位 | position: relative |
绝对定位 | position: absolute |
微调圆角度 | border- |
关于相对定位:若在某个元素中设置了相对定位,它不会影响此元素,如果它的子元素设置了绝对定位后,它的子元素就可以设置x、y的值。
关于绝对定位:position: absolute (left: top bottom right),可选择其他的值来进行绝对定位。
关于圆角度的微调:可对该元素的不同位置的圆角度进行细小的调整,例如:
border-bottom-left-radius: 9px; //左下方的圆角度设置border-top-left-radius: 9px; //左上方的圆角度设置
任务
- 将第一天和第二天的内容结合起来,加入第三天的内容,编写一个静态的小程序界面
第四天 —— 后端环境配置和编写
node.js的安装方法
1、安装时全部选择默认,安装路径可以装在C盘下或其他盘下。
- 安装在C盘下,可以避免不少的配置步骤和项目后期出现的一些BUG。
- 安装在其他盘下需要对系统环境变量和用户环境变量进行配置。(具体方法可在百度中进行搜索)
2、配置环境变量PATH
egg框架的安装方法
注意:egg框架要在node.js安装完成后进行
1、打开vscode,创建文件夹后,右键单击文件夹,选择在终端中打开,之后使用如下命令下载egg框架。
npm init egg --type=simple
2、在终端中输入 npm i
,安装必要的文件(项目的依赖模块,会自动生成一个node_mudules文件夹)
3、等待安装成功后,输入npm run dev
启动egg服务框架
4、启动成功后,在浏览器中可以访问服务器(localhost:7001或服务器本机IP:7001)
egg的使用方法
注意事项:
1、app文件夹是存放项目源代码的地方
2、controller文件夹里面就是处理不同业务的控制文件
ctx.boy=“js中的所有数据类型都可以发送给前端” ,例如
async mycar() {const { ctx } = this;ctx.body = '6666';//发送到前端的数据}
3、service文件夹中的方法专门给controller中的方法使用(新建.js文件后,在空文件后输入egg service会有提示)
数据传输过程示例代码(controller文件中):
//在controller中调用如下方法
let data1=await ctx.service.car.findCarName() //await等待,等待异步操作完成
ctx.body = data1; //向前端发送数据
//这里相当于调用了service文件夹中的car文件中的findCarName方法
在service文件夹中car.js中的代码示例:
async find(uid) {return {EnName:"BMW",ZhName:'宝马'};
}
router.js文件中的接口
router.get('/learndata', controller.learn.learndata); //三层调用
注意:生成egg service代码片段后,const后跟的命名不能和class后跟的命名相同,否则会报错。
4、public文件夹放静态资源,前端可以直接访问 http://localhost:7001/public/ 这个网址,相当于服务器的public文件夹。
文件说明:
文件类型 | 说明 |
---|---|
config文件夹 | 放项目的配置文件 |
config.default.js | 配置文件 |
plugin.js | 插件配置 |
5、router.js中的module.exports = app => {router.get(“通过编写get方法实现在浏览器中输入不同的网址呈现不同的页面”) }
如:
router.get('/learn', controller.learn.learn); //在浏览器中输入localhost:7001/learn即可查看learn页面
egg代码提示工具
因为egg框架比较新,它的一些代码辅助工具没有完善,所以这里需要自定义用户代码片段,来构造一个代码提示工具。
做法步骤:
1、vscode的扩展按钮单击后输入eggjs选择eggjs 0.3.1版本下载
2、选择这个插件,部分代码会没有提示,此时可完善提示功能,步骤:文件–>首选项–>用户代码片段–>回车(新建一个文件),新建完成后全选删除页面的所有文件,把下面的代码粘贴进去并保存
补全代码提示功能的代码片段:
{// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. // Placeholders with the same ids are connected.// Example://egg控制器代码提示"egg-controller": {"scope": "javascript,typescript","prefix": "egg controller","body": ["'use strict';","const Controller = require('egg').Controller;","class $1Controller extends Controller {"," async index() {"," const { ctx } = this;"," ctx.body = '$2';"," }","}","module.exports = $1Controller;", ],"description": "egg 控制器的代码提示"},//egg服务代码提示"egg-service": {"scope": "javascript,typescript","prefix": "egg service","body": ["const Service = require('egg').Service;","class $1Service extends Service {"," async find(uid) {"," const sql=``"," const data = await this.app.mysql.query(sql);"," return data;"," }","}", "module.exports = $1Service;",],"description": "egg 控制器的代码提示"},//axios cdn"scr-axios": {"scope": "html,typescript","prefix": "scr-axios","body": ["<script src='https://unpkg.com/axios/dist/axios.min.js'></script>"],"description": "axios cdn"},//jquery cdn"scr-jquery": {"scope": "html,typescript","prefix": "scr-jquery","body": ["<script src='https://code.jquery.com/jquery-3.4.1.slim.min.js'></script>" ],"description": "jquery cdn"}
}
任务
- 根据前面所学习的内容,结合第三天自己做的静态小程序界面,编写好后端文件代码。
第五天 —— 前后端交互的简单学习
前后端交互的方法及注意事项
1、在微信开发者工具中创建一个按钮,方法名自定义,在js文件中定义此方法,方法体如下:
/*获取后端的数据*/
let that=this //在微信开发者工具中this未定义,此时要使用一个声明了的变量that定义this
//网络请求
wx.request({//前端要访问的页面,如果要展示给他人使用,这里的localhost要改为服务器IP地址url: 'localhost:7001/learndata',success(res){console.log(res) //网址后端发送给我们的数据// console.log(that)that.setData({user:res.data}) //将后端的网页数据传入前端的user中,并放入data中}
})
此时在wxml中可使用{{user.name}}将获取后的数据打印在界面上
2、将前端的数据发送到后端
在vscode中创建一个方法,用该方法获取前端传来的数据,代码如下:
async getdata() {const { ctx } = this;//获取前端的数据console.log(ctx.request.query);ctx.body="已收到数据";
}
3、向后端传入参数
在浏览器网址后输入要传入的参数,如:localhost:7001/learn?name=tom&pwd=123
浏览器接收数据的两种方式:
get方式, 如:router.get(’/’, controller.home.index);
post方式,如:router.post(’/getfile’, controller.home.getfile);
后端获取前端传来的文件
在router.js页面使用post方法编写接口,在getfile所在的js文件中写入getfile方法。代码如下:
async getfile() {const { ctx } = this;//获取前端传来的文件console.log(ctx.request.files)ctx.body = "文件已收到";}
注意:若要接收传过来的文件并使用post方式写接口,必须在config文件夹中的config.default.js文件中进行配置。方法如下:
在此文件(config.default.js)中找config,找到后将下面的代码粘到const config = exports = {};之后。代码如下:
config.security = {csrf: {enable: false //使用post请求要将安全协议关闭}
}
config.multipart = {mode: "file" //开启文件模式
}
向后端传入图片或拍照上传
在微信开发者工具中的js文件中写入如下代码:
//向后端传入图片或拍照上传
//按钮的事件
sendfile() { //图片的获取:图片/拍照wx.chooseImage({success: function(res) {//上传文件wx.uploadFile({url: 'http://localhost:7001/getfile',filePath: res.tempFiles[0].path, //用户选择的图片的路径:相册/拍照name: 'myfile',success(res) {console.log(res)} //控制台打印传入成功后的结果}) }})
}
注意:传文件或图片时要用post请求
文件传完之后,如果想保留到服务器,需要在vscode中的getfile方法中添加如下代码:
//例如:oldpath:"C:\\Users\\ADMINI~1\\AppData\\Local\\Temp\\egg-multipart-tmp\\taobao\\2020\\03\\28\\16\\ba295b87-26f4-47ca-aa53-5a319bbba281.jpg"
//newpath:"c:/xx/x/x/x/public/wx616a91aed6a26640.o6zAJs4731Mrs5ZaKUNC6Aotfkso.mYezV3Q3EFMv128753d0885c888f9b4cd8746717b19e.jpg"
let oldpath=ctx.request.files[0].filepath
let newpath=__dirname+"/../public/"+ctx.request.files[0].filename
fs.rename(oldpath,newpath,()=>{})
注意:如果上传的文件和项目文件不在同一磁盘下,此方法移动文件会失败,这时要使用其他方法来移动文件。
向后端传入录音文件
微信端(前端)实现方法如下:
sendrecord() {//实现开关按钮this.data.flag = !this.data.flagconsole.log(this.data.flag)if (this.data.flag) {console.log("录音开始")let myrecord = wx.getRecorderManager() //获取录音的工具this.setData({ //将录音工具保存在data中myrecord: myrecord})myrecord.start({ //开始录音format: "mp3"})//监听录音工具停止录音的事件,录音停止将调用函数myrecord.onStop((res)=>{console.log(res)//获取录音文件的信息,//向后端发送录音文件wx.uploadFile({url: 'http://localhost:7001/getrecord',filePath: res.tempFilePath,name: 'mymp3',})})} else {console.log("结束录音,获取录音文件")this.data.myrecord.stop() //停止录音}
}
这时在后端的.js文件中要补全接口代码和函数代码,后端获取前端发送的录音文件代码与获取图片的代码大致相同。
任务
根据今天的内容,将第四天的任务项目中添加如下功能的实现,排版问题请自行实现
- 加入上传文件的功能,并保存在服务器端的 public/file 文件夹中
- 加入上传图片和拍照上传的功能,并保存在服务器端的 public/photo 文件夹中
- 加入上传录音的功能,保存在服务器端的 public/record 文件夹中
第六天 —— 动态界面的实现
前端向后端发送文字
1、前端要点
查看用户输入的信息数据的组成格式
console.log(this.data.chatMsg)
获取用户输入的信息,并保存在data中
this.setData({chatMsg: e.detail.value})
清空输入框
this.setData({chatMsg:""})
将数据发送到后端
wx.request({url: 'localhost:7001/chatMsg',data: {msg: this.data.chatMsg},success(res) {console.log(res) //控制台打印后端传入前端的数据的组成结构that.setData({tencentChat:res.data.data})//获取后端返回的结果并保存}})
注意:在进行网络请求时,不能直接使用this,需要在wx.request函数体之外,声明并保存this,如:
let that=this
2、后端对接各大厂商AI接口的要点(如:腾讯智能闲聊API)
代码如下:
console.log(714, ctx.request.query) //获取前端传来的数据,第一个参数可省略,这里只是为了精确定位
//将获取到的数据发送给AI处理(三步)
//第一步:得到原始数据
let obj = {app_id: "填入个人的appid",//appidtime_stamp: Math.round(new Date().valueOf() / 1000),//时间戳nonce_str: Math.round(new Date().valueOf() / 1000),//随机数session: "before",//为了记住上一次的聊天用户的唯一标志question: ctx.request.query.msg, //用户的聊天信息sign: "" //签名
}
//第二步:对原始数据进行签名
obj.sign = await this.ctx.service.sign.getReqSign(obj) //调用service目录下的sign文件中的getReqSign方法,并将此时的obj传入方法中
let url = "https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat" //对接AI接口API
//第三步:向腾讯AI接口发送网络请求
let result = await this.app.curl(url, {method: "GET",//请求方式dataType: "json",//希望腾讯返回的数据的格式,若不写默认返回的就是二进制数据包data: obj,//给腾讯发送的数据(签名后的数据)
})
console.log(result.data)//控制台打印腾讯API返回的数据的组成结构
ctx.body = result.data;//将关键数据发送给前端
}
3、调用service目录下的sign文件中的getReqSign方法,进行签名转换机制
代码如下:
async getReqSign(obj) {//第一步:key排序const newkey = Object.keys(obj).sort();var params = {};for (var i = 0; i < newkey.length; i++) {params[newkey[i]] = obj[newkey[i]];}//第二步:转queryStringlet str = '';for (const k in params) {if (params.hasOwnProperty(k) && params[k]) {str += k + '=' + encodeURIComponent(params[k]) + '&';}}//第三步:末尾拼接Appkeystr += 'app_key=' + appKey(申请应用时所分配的);//第四步:md5加密return md5(str).toUpperCase();//return newObj;
}
微信AI(腾讯)小程序开发
1、申请AI应用: https://ai.qq.com/ ,获取App_ID 和 App_Key
注意:签名算法的计算步骤
2、接口鉴权(详解)
将<key, value>请求参数对按key进行字典升序排序,得到有序的参数对列表N
将列表N中的参数对,按URL键值对的格式拼接成字符串,得到字符串T(如:key1=value1&key2=value2),URL键值拼接过程value部分需要URL编码,URL编码算法用大写字母。(例如:%E8,而不是小写%e8)
将应用密钥以app_key为键名,组成URL键值拼接到字符串T末尾,得到字符串S(如:key1=value1&key2=value2&app_key=密钥)
对字符串S进行MD5运算,将得到的MD5值所有字符转换成大写,得到接口并请求签名。
注意:所有接口调用前,都要先接入能力再调用接口。
3、AI智能对话
请求url:https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat
请求方式:GET或POST
响应格式:统一采用JSON格式
接口鉴权:签名机制,参考接口鉴权(详解)
参数 | 解释 |
---|---|
app_id | 应用标识(AppId) |
time_stamp | 请求时间戳(秒级) |
nonce_str | 随机字符串 |
session | 会话标识(任意值,作用:通过标识记住你的对话,应用内唯一) |
question | 用户输入的聊天内容 |
sign | 签名信息,参考接口鉴权(详解) |
代码示例:
async chat() {const obj = {app_id: appId,//申请应用时分配的session: '7888',question: ctx.request.query.message.toUpperCase(),//用户会话信息time_stamp: Math.floor(new Date().valueOf() / 1000),nonce_str: Math.random().toString().substr(2, 18),sign: ''};obj.sign = await getReqSign(obj);let url = 'https://api.ai.qq.com/fcgi-bin/nlp/nlp_textchat';//egg发送网络请求const result = await this.app.curl(url, {method: 'GET',dataType: 'json',data: obj});console.log(result.data);
}
智能聊天、智能语音、人脸识别等
1、智能聊天的后端请求可以是GET/POST,智能语音的后端请求为POST
2、CSS样式:z-index的含义:z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
人脸检测
参数 | 解释 |
---|---|
app_id | 应用标识(AppId) |
time_stamp | 请求时间戳(秒级) |
nonce_str | 随机字符串 |
sign | 签名信息,详见接口鉴权(详解) |
image | 原始图片的base64编码数据(原图大小上限1MB,支持JPG、PNG、BMP格式) |
mode | 检测模式,0-正常,1-大脸模式(默认1) |
代码示例:
//将上传的图片保存
let oldpath = this.ctx.request.files[0].filepath;
let newpath = __dirname + "/../public/upload/" + this.ctx.request.files[0].filename;
fs.renameSync(oldpath, newpath, err => err);//两个路径必须在一个盘下
//图片转base64编码
let imgData = fs.readFileSync(newpath);
let imgBase64 = Buffer.from(imgData).toString("base64");
在配置文件中修改相关参数
代码如下:
//关闭安全威胁csrf的防范
config.security={csrf:{enable:false}
}
//打开文件上传模式
config.multipart={mode:"file"
}
//常用的字段可以保存到config中,便于统一管理使用
config.ai={app_id:"xxxx",app_key:"xxx"
}
调用保存的字段
this.app.config.ai.app_id
语音识别
请求url:https://api.ai.qq.com/fcgi-bin/aai/aai_asr
传输方式:HTTPS
请求方法:POST
语音参数:必须符合16k或8K采样率、16bit采样位数、单声道
语音格式:PCM、WAV、AMR、 SILK
字符编码:统一采用UTF-8编码
响应格式:统一采用JSON格式
接口鉴权:签名机制,详见接口鉴权(详解)
参数 | 解释 |
---|---|
app_id | 应用标识(AppId) |
time_stamp | 请求时间戳(秒级) |
nonce_str | 随机字符串 |
sign | 签名信息,详见接口鉴权 |
format | 语音压缩格式编码 |
speech | 语音数据的Base64编码,非空且长度上限8MB,待识别语音(时长上限15s) |
rate | 语音采样率编码,默认即16KHz |
函数名 | 返回值类型 | 返回值含义 |
---|---|---|
ret | int | 0表示成功,非0表示失败 |
msg | string | ret非0时表示出错 |
data | object | ret为0时有意义 |
format | int | API请求中的格式编码 |
rate | int | API请求中的采样率编码 |
text | string | 语音识别结果(UTF-8编码) |
任务
- 结合第五天的任务,在自己的小程序中加入智能聊天、语言识别、人脸识别的功能。
第七天 —— 自主学习
目标
- 补充关于微信小程序开发的基础知识
- 熟练应用egg框架
- 掌握AI接口的使用方法
- 复习巩固近六天的知识
任务
- 选定题材,开发一套属于自己的微信小程序
参考资料
微信开放文档
网址:https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/api.html
各大公司AI接口
腾讯AI开放平台:https://ai.qq.com/
百度AI开放平台:https://ai.baidu.com/
阿里AI开放平台:https://www.aligenie.com/
网易AI平台:https://openai.163.com/
讯飞开放平台:https://www.xfyun.cn/
相关的开放平台还有很多,比如华为、小米(小爱)、京东以及适合学习机器学习、深度学习的亚马逊、英特尔等,这里不再详述。
关于我个人开发的微信小程序,因为部分功能没有完善、且未向服务器发布,这里就不展示了。
七天学习微信小程序开发(一)—— 学习笔记相关推荐
- 微信小程序开发:学习笔记[8]——页面跳转及传参
微信小程序开发:学习笔记[8]--页面跳转及传参 页面跳转 一个小程序拥有多个页面,我们可以通过wx.navigateTo推入一个新的页面.在首页使用2次wx.navigateTo后,页面层级会有三层 ...
- 微信小程序开发:学习笔记[9]——本地数据缓存
微信小程序开发:学习笔记[9]--本地数据缓存 快速开始 说明 本地数据缓存是小程序存储在当前设备上硬盘上的数据,本地数据缓存有非常多的用途,我们可以利用本地数据缓存来存储用户在小程序上产生的操作,在 ...
- 钢琴学习微信小程序开发功能
如今的家长都希望孩子在艺术方面能够有一技之长,这样才能在将来的生活交际中游刃有余.而钢琴作为艺术中不可缺少的一部分,自然受到了很多人的青睐,因为钢琴代表着高雅和高贵的象征.是提高个人修养的表现.对于钢 ...
- 《微信小程序开发》学习情况大调查!
微信小程序已经公测一段时间,很多同学都通过各种渠道注册了小程序,拿到开发者权限,从一个前端开发者,俨然变成了一个最炙手可热的小程序员. 当然,还有不少同学因为没有办法注册到小程序,未能一探究竟. 今天 ...
- 新手从零开始学习微信小程序开发01
新手从零开始学习小程序开发01 文章目录 新手从零开始学习小程序开发01 前言 一.什么是微信小程序? 二.如何着手学习微信小程序 1.开发工具下载安装 2.注册账户 前言 本章主要介绍微信小程序开发 ...
- 记一次学习微信小程序开发的心得感悟
一句话:当你发现你自己做的工作,花了8天时间,然而其实只需要一两天时间的时候,心里挺烦,感觉自己在浪费时间. 另外,喜欢一个人在在实验室看课程放音箱,太爽了,嘻嘻嘻 这几天有发现写代码的乐趣,很开心, ...
- 微信小程序开发入门-个人笔记
微信小程序开发 下载和安装看网上教程即可,如果遇到一直黑屏打不开,可以换一下32/64位的重新下载安装,看看能不能打开,仍然不行的话,可以使用360软件管家下载,亲测有效哦!附上几个链接:微信小程序- ...
- 微信小程序开发基础入门笔记
文章目录 vsc 安装插件(小程序开发助手-微信小程序开发助手) 日常注意: 微信小程序WXS模块的使用 框架 1小程序结构和传统的web结构 2 基本的项目目录 3全局配置app.js 4.运算 = ...
- 微信小程序开发(学习记录1.0)
首先,把遇到的问题贴出来,主要是这个解决问题的思路,供大家参考. 现在的问题是将下面的导航栏做出来,但是在自己做的时候 遇到的问题 在app.json文件中输入tarBar,就会生成模板代码,默认会生 ...
最新文章
- pip国内常用源及配置方式
- 通过DBA_SOURCE定位SQL语句属于哪个存储过程
- win7访问windows server 2003服务器出现未知的用户名或者错误的密码(转载)
- [转]IIS的完整控制类
- linux卸载交叉工具,linux-如何从crosstool-ng工具链名称中删除供应...
- 误删除Linux中libc.so.6文件急救办法
- HandlerAdapter解析参数过程之HandlerMethodArgumentResolver
- [转]优秀的女孩是没有性生活的
- 剑指offer面试题40. 最小的k个数(sort函数)
- 学习日记12、list集合中根据某个字段进行去重复操作
- 浙江利捷分析报告(0612)
- HE4484E泛海微5V USB 输入双节锂电池串联应用升压充电IC管理芯片
- 拼搏30天VUE.js之 set(Part8)
- python动画篮球大小_用Python把蔡徐坤打篮球视频转换成字符动画!
- java中实现工厂日历_Java实现的日历功能完整示例
- 以太网,令牌网,FDDI,ATM是什么?有什么区别?
- P1425 小鱼的游泳时间
- 基于密码的移动办公安全能力体系构建
- 范文网站服务器配置,服务器配置与管理论文范文怎么写(2)
- zabbix监控方式(02) - zabbix通过IPMI监控硬件环境(温度和风扇)