前段时间试着做了一个微信小程序，第一次从数据库到后端再到前端一起弄，这个过程还是遇到了很多问题，然后就总结下来了。

1. 找错误技巧：
2. 后端找不到json数据中的属性：
3. AJAX跨域请求失败：
4. servlet404错误可能：
5. servlet500错误可能：
6. js中出现 this.setData is not a function：
7. js中关于日期的操作：
8. console.log()输出this.data里的数据出错：
9. 微信小程序获取js中的全局变量：
10. 数据库导出sql文件：
11. 微信小程序关闭或切换后台时保存数据：
12. 微信小程序弹框：
13. 微信小程序wxml中显示的数据动态改变：
14. 微信小程序登录授权时出现 errcode":40125,"errmsg":"invalid appsecret：
15. 微信小程序textarea组件获取value值慢：
16. 微信小程序触发事件后刷新页面：
17. 微信小程序循环对点击内容单独执行操作：
18. 微信小程序连续打开多次相同页面但参数不同出现页面栈满：
19. 微信小程序在当前页面进行编辑后返回上层页面并刷新数据：
20.用户使用微信自带的openID:
总结

1. 找错误技巧：

出现问题一定先看报错，一般都能看出是哪里出错了，还要会点击报错中的提示出错的类的路径，找到出错的哪一个语句，一般出错的就是和这句话有关的内容，有时也会因为其他语句有错导致该语句报错，所以在检查之后发现报错的这条语句没用问题就往上看看前面的代码会不会出错了。
一定要多在控制台输出提示语句，比如输入、输出、变量赋值后的结果、收到的请求内容，发送出去的数据，这个功能要干什么，关键变量的值。有了这些提示就大概清楚这个功能有没有正常执行，或者执行到哪一步之后就停下出错了。

2. 后端找不到json数据中的属性：

由于前后端交互传递的是一个对象，在后端servlet中需要提取该对象中的属性，所以用到了request.getParameter()方法来提取，该方法的参数为要提取的属性的名字。由于在前端的json的data中使用了JSON.stringify()方法，该方法会把一个对象转化为json格式的字符串，所以前端传回来的是一个字符串而不是可以单独提取属性的对象。所以json的data只需要直接放一个按照json格式的javascript对象即可。此时servlet就可以直接用request.getParameter()方法来提取单独的值

3. AJAX跨域请求失败：

在servlet中加上 response.setHeader(“Access-Control-Allow-Origin”, “*”)

4. servlet404错误可能：

使用idea出现404的话，要在servlet文件中进行注解配置，加上servlet的映射路径
@WebServlet(name=“servlet名字”, urlPatterns=“映射路径”)
如果不放心，就在web.xml文件中也配置servlet的请求路径

5. servlet500错误可能：

servlet中声明的变量没有初始化，会出现 java.lang.NumberFormatException:null 错误

6. js中出现 this.setData is not a function：

在该方法里定义一个this的备份 var that = this ;

7. js中关于日期的操作：

使用var date = new Date()即可获得当前日期，若要创建指定日期的变量，则添加一个字符串类型的日期作为Date()的参数var date = new Date(str)
date.getFullYear()获得日期的年
data.getMonth()+1获得日期的月份
data.getDate()获得日期的日
如果两个日期需要比较大小或者计算时间差，把日期变为时间戳然后用时间戳相减就得到了时间差。时间戳是自1970/1/1/00：00：00至这个日期的总秒数，分为10位（以秒为单位）和13位（以毫秒为单位）。使用date.getTime()就可以将日期变量转换为时间戳

8. console.log()输出this.data里的数据出错：

除了this.data的数据之外不能含有其他的内容
consloe.log(this.data.user); 正确
consloe.log(‘数据为：’ + this.data.user); 错误

9. 微信小程序获取js中的全局变量：

在app.js文件中的globalData中声明变量，按照普通的赋值方法后即可在其他页面中直接使用，但要先在使用的js文件中声明const app = getApp()

10. 数据库导出sql文件：

使用命令行跳转到mysql安装的文件夹中的bin文件夹中，输入：
mysqldump -u 用户名 -p 要导出的数据库名 > 数据库名.sql
回车后提示输入和用户名匹配的密码就会导出到bin文件夹中了。用户名一般是root

11. 微信小程序关闭或切换后台时保存数据：

小程序的生命周期是创建onLaunch()、更新onShow()、销毁onHide()。当从小程序前台切换到后台时，会触发app.js文件中的onHide()方法，在此方法中写入需要保存的数据，向后端发送请求保存到数据库中

12. 微信小程序弹框：

wx.showToast是一个提示框，可在其属性title中设置7个字以内的提示语
wx.showModal是一个确认框，可在其属性content中设置长文本内容，若需要换行就在需要换行的地方后加上 \n ，但只会在真机上出现换行，如果要在开发者工具中也显示就用 \n\n

13. 微信小程序wxml中显示的数据动态改变：

在组件中的文字是显示出来的内容，如果想要达到修改某个值后这个内容就会自动改变而不需要重新刷新页面，那么就要使用{{xxx}}来代表要显示的内容，xxx为js文件中的data数据，之后只需要在js方法中使用setData方法修改xxx的值就会自动更新内容。要注意的是如果是{{xxx.yy}}，xxx是一个对象，yy是它的属性，改变yy的值不会自动更新内容，目前的解决方法就是将这个属性赋值给一个单独的变量，用这个变量来显示内容

14. 微信小程序登录授权时出现 errcode":40125,“errmsg”:"invalid appsecret：

● 可能是太久没用，需要重置appSecret，在微信小程序官网里弄。
● url中出现了空格
● 创建项目时appID用了测试号，导致appID和appSecret配对不上，在微信开发者工具中修改appID为自己注册的账号的ID即可

15. 微信小程序textarea组件获取value值慢：

触发的条件不要用bindblur，这是失去焦点后才会触发，会晚于bindtap，编辑完文本框中的内容后还没来得及触发失焦事件就已经来不及了。
使用bindinput，这是文本框内容发生变化就会触发事件，所以当文本框的内容编辑完时相应的事件也完成了

16. 微信小程序触发事件后刷新页面：

调用this.onLoad()或者this.onShow()就可重新刷新页面，重点是重新读取数据，你把读取数据的代码放在哪里就调用哪个方法

17. 微信小程序循环对点击内容单独执行操作：

在循环元素的view组件中加入data-xxx属性，将想要传递的数据赋值给它，这个数据甚至可以是一整个对象，可以存在很多个类似的属性。在触发的js方法中通过参数e可以找到这个属性，e.currentTarget.dataset.xxx即data-xxx的值，从而对点击的内容单独执行操作

18. 微信小程序连续打开多次相同页面但参数不同出现页面栈满：

不能使用wx.navigateTo()，会保留当前页面跳转到指定页面，也不能使用wx.redirectTo()，虽然不会保留当前页面但是依然会累积同样会满。
使用wx.navigateBack()，delta指定退回几层页面

19. 微信小程序在当前页面进行编辑后返回上层页面并刷新数据：

onLoad(Object query)：页面加载时触发。一个页面只会调用一次。
onShow：页面显示/切入前台时触发。所以把之前在onLoad里的操作全部转移到onShow里，为获取上上层页面的传来的参数使用页面栈。
let pages = getCurrentPages(); //获取页面栈
let currpage = pages[pages.length-1]; //获得当前页面
currpage.options.参数名 //获取上上层页面传来的参数

20.用户使用微信自带的openID:

首次登录小程序时会提示授权登录的按钮，点击之后便会进入到主页面中。若不进行授权登录则无法使用其中的功能，该点也符合了微信小程序平台的要求，即使不授权登录也有展示的内容。登录的过程使用的是微信自带的openId,点击授权登录后，会向该小程序后端发送一个临时码，然后小程序向后台发送请求得到每个微信用户唯一的openId。使用openId可以省下注册账号的过程，同时可以获取用用户微信中的信息，例如头像、昵称、所在位置等,则可以直接使用微信的头像、昵称等等作为该小程序用户的信息，从而节省了存储用户部分数据的空间，提高了效率。

总结

这是在寒假期间自学了数据库、jdbc、js、html、小程序开发之后弄的，第一次实现了三层架构，但也只是很简单很low的，没有用到什么框架，因为还不会，等暑假就会把框架也学了。
在打代码的过程真的遇到了好多问题，上面列举的只是一部分，我是在重复遇到几次相同问题之后才想起来应该把这些问题和解决方法总结起来，以后再遇到就方便查看了
我觉得这个过程中最难的就是前后端的沟通，一个404能恶心我一天，还有前端的东西不是很熟，感觉有很多方便的方法可以实现某个功能但我不知道或者不会用就只能自己硬想一些野路子的方法实现
上学期学了jsp说实话真的没有理解servlet之类的东西，这次硬着头皮不断摸索终于搞懂了，这是比较值得高兴的一点
在微信小程序功能实现的差不多了之后要来美化界面，调配色是真的太恶心人了，不管怎么弄都达不到自己的想法，就有一种想自己设计又做不到的感觉
这个小程序还没完工，之后还会继续完善，到时候会出一期从0开始实现一个微信小程序的全过程

学习微信小程序踩过的坑相关推荐

新手学习微信小程序遇到的一些坑
从以下几点罗列 1.vant-weapp 样式修改不起作用 2.双向绑定不起作用 3.小程序引入高德SDK不报错也不画地图 3.1 报错: https://restapi.amap.com 不在以下 ...
微信小程序嵌套iframe_H5嵌入微信小程序踩过的坑
关于背景项目是一个涉及跨移动平台的前端项目,技术使用的是vue,因为项目不是很大,所以没有用到状态管理. 主要是用vue将h5项目编译成静态页面放到服务器的制定地址上,然后在小程序测使用,将服务器上 ...
微信小程序踩坑记——ColorUI组件的使用
微信小程序踩坑记--组件的使用组件类型 ColorUI Vant weapp ColorUI 首先贴上官网链接:官网链接,GitHub链接简介 ColorUI是一个css库!!!在你引入样式后可以 ...
微信小程序踩坑—用户登录界面
最近做的一个项目有涉及到用户登录.微信小程序的用户登录在我看来有两种,一种是需要用微信提供的用户身份标识,简单地说就是小程序的登录者就是使用这个小程序的微信用户,还有一种是小程序和服务器之间有自己的一 ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
微信小程序开发的那些坑，你踩过吗？
微信小程序开发的那些坑,你踩过吗? textarea组件value不显示 textarea组件默认值绑定data数据真机不显示问题 |?链接使用.switchTab跳转到tabbar页传递参数问题 ...
学习微信小程序-索引贴
学习微信小程序-索引贴微信小程序一出,到处都是讨论它的. 搞得人心惶惶. 更是打乱了我的学习计划. 而且微信的那个IDE, 真是难用啊. 而且有bug. 页面数据量大的时, 调试页面会假死. 真是坑 ...
一个C#程序员学习微信小程序的笔记
一个C#程序员学习微信小程序的笔记客户端打开小程序的时候,就将代码包下载到本地进行解析,首先找到了根目录的 app.json ,知道了小程序的所有页面. 在这个Index页面就是我们的首页,客户端在 ...
微信小程序最新开发资源汇总，对学习微信小程序的新手有一定帮助
微信小程序最新开发资源汇总,希望给想学习或正在学习微信小程序开发的同学们带来一定帮助,汇总的小程序资源有点繁杂,各种类型的小程序demo都有,大家可以选择自己想要的demo进行下载学习.这些微信小程序 ...

学习微信小程序踩过的坑

目录