学习微信小程序踩过的坑

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

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开始实现一个微信小程序的全过程