微信小程序开发回顾笔记

序：

用了两周时间，断断续续下的开发了人生第一个小程序。

在完全零基础的情况下开发小程序真的够呛的。。。

毕竟小程序使用到以下知识：

前端：

• 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.csdn.net/weixin_37896608/article/details/91880097

PHP的坑

require和require_once

​ 首先要记住，require和require_once是不一样的，包括include。都在在编译下就进行文件调用和引入，例如 require “database.php”; 是在程序还没进入逻辑之前就已经把文件引入了，包括你调用子文件和子程序。

​ 我遇到的问题是这样的，主程序先调用了一次，因为这个是数据库配置信息和新建连接嘛，于是子程序我也包含了这个进行运行，结果一直显示query（）空报错。

​ 解决方法就是：不要require_once 改 require

​ 通过require就可以相互调用子函数，对于复用比较多的函数都建议进行子函数封装，就不用在主程序里面无限CV了。（养成习惯）

一些知识点

• php的变量都是$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;

}

总结

写着写着感觉好像没什么好写的，感觉还是踩坑太多了，如果真要搞的话一周应该没问题，再接再厉吧。