序:
用了两周时间,断断续续下的开发了人生第一个小程序。
在完全零基础的情况下开发小程序真的够呛的。。。
毕竟小程序使用到以下知识:
前端:
- HTML
- JavaScript
- CSS
服务器端:
- PHP
- MySQL
基本上要有这些基础才能上手折腾小程序
经历
目标
我是一个搞自动化的大学生,打算给一个嵌入式的设备添加一个微信小程序做上位机。
用墨水屏显示备忘录+微信小程序上位机
Q:为什么挑选微信小程序而不是开发一个APP
A:因为根据我的需求,我不需要手机的权限,只是一个简单的备忘录而已。设备受众是一般人,所以一定要简单易用,那微信小程序就很好办了,现在用微信小程序的人越来越多,而且微信小程序是IOS和安卓通用的。这样我就省了学IOS开发了!(虽然我还是摸索了几天flutter)
明确好需求之后我就开始着手学习开发,本身我有一定的Python基础和嵌入式的C/C++基础。而且还学习了一段时间的MYSQL。所以如果你没有我这样的基础,可能你需要花费的时间将大于我。
简单分析一下我的业务逻辑:
-
硬件ESP8266访问API 获取图片并展示。
-
小程序通过API实现登录认证,设备码的分配,备忘录的填写,备忘录图片的预览等功能。
那API是什么,API其实就是一种网站接口,类似你输入xxx.cn\api\getid.php?key=XXX,这种情况其实是调用了网站的一个getid.php文件,其中key=XXX是传递的参数。在你访问这个网址之后,服务器会返回数据(一个页面)给你。接收端接受数据并显示即可。
实现
所以备忘录的信息保存在服务器的Mysql数据库里面,微信小程序通过API获取数据库该用户的备忘录信息,然后显示在前端,用户也可以通过小程序修改备忘录并提交更新他的数据库内信息。
服务器在每次提交完成后,调用python程序,生成图片,并生成该图片的特定数组(用于硬件显示),硬件的ESP8266也是通过API调取该数组,然后在墨水屏上显示。
- 为什么使用墨水屏:墨水屏就是大家的电子书,比如kindle,通过墨囊进行显示的。保持显示不需要耗费电,只在刷新显示是耗电,一般备忘录是完成任务后才更新掉的,也超级省电,所以适合使用。其次单纯的因为这个看起来好看呐。黑白分明的。
踩坑
我是先到b站看这个视频的:黑马程序员的微信小程序
https://www.bilibili.com/video/BV1nE41117BQ?from=search&seid=6999539540121338073
基本上开2倍速看了一半,没有看项目实战。
然后开始面向百度编程(笑)
下面说说踩坑:
VSCode
右键功能菜单
如果vsc没有右键功能了,就按照这个更改你的注册表:
切记改好软件路径!
[HKEY_CLASSES_ROOT\*\shell\VSCode]
@="Open with Code"
"Icon"="D:\\Programs\\Microsoft VS Code\\Code.exe"
[HKEY_CLASSES_ROOT\*\shell\VSCode\command]
@="\"D:\\Programs\\Microsoft VS Code\\Code.exe\" \"%1\""
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\Directory\shell\VSCode]
@="Open with Code"
"Icon"="D:\\Programs\\Microsoft VS Code\\Code.exe"
[HKEY_CLASSES_ROOT\Directory\shell\VSCode\command]
@="\"D:\\Programs\\Microsoft VS Code\\Code.exe\" \"%V\""
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode]
@="Open with Code"
"Icon"="D:\\Programs\\Microsoft VS Code\\Code.exe"
[HKEY_CLASSES_ROOT\Directory\Background\shell\VSCode\command]
@="\"D:\\Programs\\Microsoft VS Code\\Code.exe\" \"%V\""
https://blog.youkuaiyun.com/weixin_37896608/article/details/91880097
PHP的坑
require和require_once
首先要记住,require和require_once是不一样的,包括include。都在在编译下就进行文件调用和引入,例如 require “database.php”; 是在程序还没进入逻辑之前就已经把文件引入了,包括你调用子文件和子程序。
我遇到的问题是这样的,主程序先调用了一次,因为这个是数据库配置信息和新建连接嘛,于是子程序我也包含了这个进行运行,结果一直显示query()空报错。
解决方法就是:不要require_once 改 require
通过require就可以相互调用子函数,对于复用比较多的函数都建议进行子函数封装,就不用在主程序里面无限CV了。(养成习惯)
一些知识点
-
php的变量都是 k e y 的 形 式 , 从 U R L 获 取 参 数 用 key 的形式,从URL获取参数用 key的形式,从URL获取参数用_GET[‘key’]
-
php可以获取时间 函数是date(“Y-m-d H:i:s”),其中可以随意去掉任何一个成分,H和h分别是是24小时制和12小时制,-:这些都是单纯的符号,输出会正常输出的
-
var_dump(),用来输出调试的,可以看类和该变量所有信息。
-
function mkeygetopenid($mkey){}子函数的写法
-
php开头结尾是 <?php XXXXX ?>
-
查询数据库的方法去看菜鸟noob,单次链接之后可以进行多次查询。
-
获取返回结果的方法
if ($result->num_rows > 0) { while ($row = $result->fetch_assoc()) { $openid = $row["openid"]; } }
-
echo()是输出,php的文本输出是用.进行连(拼)接例如echo(“id=”).$id;
JavaScript的坑
众所周知JavaScript不是java!、
this指向问题
改变指向
这个不细说,对于this指向不到的话,用let data = this;后面用data代替this。
let that = this;
wx.getStorage({
key: 'username',
success(res) {
let username = res.data;
console.log(res.data)
that.setData({
name: username
})
}
如果还是指向不到,看一下是不是第一次指向不是还不够前,可以再加一层,
第一层let thats = this;
第二层let that = thats;
反正看着套娃就行。
一些知识点
-
微信小程序的函数看官方文档看着用就行,不懂就面向百度编程。
-
获取openid不能在小程序内直接获取,虽然不是不行,但是一定要在服务器实现。
-
openid某种意义上来说保密比较好,如果你的url被人拿了,别人只要访问这个url可以看你的数据,而且openid无法变更,很麻烦,建议用个md5+salt加密一下成key传给用户当成请求,万一出现问题,帮客户再更新一个key就完事了。
-
console.log("")用来打印输出的
-
js的文本拼接是用+号
-
wx.setStorage()用来保存数据,除非彻底清除垃圾,不然会保留在手机,有10MB空间
-
wx.getStorage用来提取上面保存的数据。
-
this.setData()用来更新前端显示。
-
关键还是函数使用,比如获取用户数据什么的都有要求。
-
wx.showToast弹窗显示,比如操作成功
CSS
让两个处于一水平线,
view.search {
display: flex;
}
view.searchItem {
display: flex;
}
总结
写着写着感觉好像没什么好写的,感觉还是踩坑太多了,如果真要搞的话一周应该没问题,再接再厉吧。