[微信小程序]小程序中的JS和踩坑记录

出于毕设的要求，本次先制作了一个开题报告的demo程序，由于是第一次接触前端，加上后续的毕设要求，现将今日踩的坑和之后开发考虑到的问题在本文作出记录。动手之前本人跟着视频做过的demo如下：

• 计算器:主要学习页面布局和页面跳转
• 天气预报：调用wx.request()从网页获取信息，并组合(后由于天气获取的协议被禁用，只做了根据经纬度获取城市名) 涉及到的小程序操作:
  • 1.js中的data与.wxml通信
  • wx.request()函数
• 电影推荐：调用豆瓣热门top250接口，实现电影推荐和电影搜索，页面布局形式为海报基本信息 涉及到的小程序操作:
  • wx.request()
  • .wxml的循环展示

在以上的基础上，自己再写了个数据库操作的demo就开始了毕设demo的制作
本文的目录结构：

• 微信小程序结构简单介绍
• 页面跳转时如何携带参数
• 小程序中的箭头函数和普通形式的函数踩坑
• 小程序中的云开发和数据库
• onload函数，仅在程序第一次加载时调用
• input组件，输入完毕自动清空

微信小程序结构简单介绍

• .wxml文件：类比html文件，用于搭建界面的展示框架
• .wxss文件：类比scc文件，用于构建样式
• .js文件：js脚本文件，用于数据交互
• .json文件：配置文件，目前为止只更改过app.json文件，所以暂不清楚各个页面的json文件配置用途
  -小程序整体可分为app 和pages ，其中app为整个小程序共享,而各个pages下的子目录中包含的上述四种文件各自分管所在的目录，一个目录即为一个页面，也就是说 一个目录下的.wxml .wxss .js文件各自构成一个包含框架 样式 即js操作所组成的一个页面。在这种区分下，开发一个小程序就变得简单许多

页面跳转时如何携带参数

在搭建完一个界面后想到的一个问题：后续的登录界面进行跳转后,如果要在新的页面获取登录的id，该如何获取?
微信小程序有多种跳转形式，而且都非常易写(对比QT界面跳转需要绑定按钮事件，设置界面隐藏和显示，小程序做的非常简洁)比如tabBar导航或者直接 wx.navigateTo(）但是直接调用 wx.navigateTo(，则无法做出参数传递。方法如下

tz: function (e) {
    console.log(e)
    wx.navigateTo({
      url: "../jy/jy?id= " + e.currentTarget.dataset.id + "&name=" + e.currentTarget.dataset.name,//传递多个变量
　　　　//url: "../jy/jy?id= " + e.currentTarget.dataset.id//传递单个变量
　　　　//url: "../jy/jy?id=333"//直接传递数据
　　}) 
}

onLoad: function (options) {
　　//options则里就是你传递过来的变量
　　console.log(options)
}

options即为传递的变量

小程序中的箭头函数和普通形式的函数踩坑

js学了也才两三天，当时看视频学习时那个讲师推荐用ES6的箭头函数代替普通形式的函数，经过适应后，我在小程序中大多也采用了箭头函数的形式，但是在传值时却遇到了问题，定位了很久才侥幸通过修改函数形式解决，故在此记录
在小程序中，data值和函数均需通过this.的形式访问，如this.data.person_di this.setData({person🆔12});等，如果在函数中再次调用函数 如：

loadMovie: function () {
    let  page = this;//记下this
    wx.request({
      url: 'https://douban.uieee.com/v2/movie/in_theaters',
      data: {},
      success: function (res) {
        page.processSubjects(result);
        page.setData({
        });
}

上述代码 processSubjects()为一个自己封装的函数，在此调用需this.processSubjects()形式，由于this指向的改变，此函数外层函数需使用let page = this来实现，在这种用到形如let page = this；来记录this指针时，使用箭头函数，即 res=>{ } 则会发生this后面的对象获取失败的问题，该问题出现的原因现在还没在网上找到答案，但是解决方法就是：不要使用箭头函数！

小程序中的云开发和数据库

小程序允许用户进行云开发，而不需要自己搭建自己的服务器
说实话，刚开始接触云开发时也是花了不少时间搞懂云函数这个东西的(其实只是为了使用云数据库)，但是当时网上很多教程都是在介绍云开发，而且代码冗长无比，一开始我以为云数据库需要通过云函数操作，了解后得出结论:云函数和云数据库根本就是独立的两个东西！如果只是想用微信的云数据库的话，完全可以抛弃云函数。
经过几个demo的实验，云函数可以实现用户创建一个云函数，将其上传到云函数后，可以在其他小程序中同步下来并调用，云函数由云服务器运算并给出结果，可以进行云调试。所以问题就只有云数据库了。云数据库不需要用户搭建自己的数据库，这样给小程序的开发带来了很大的遍历(之前qt链接数据库写了一下午的代码)

doAdd:function(e){
    console.log(e);
    var name = e.name;
  //  console.log(name);
    const db = wx.cloud.database();   //链接数据库
    var myDate=new Date();
    db.collection('work_done').add({   /对数据库“work_done”进行添加操作
      data:{
        name:e.name,
        date:e.date
      },complete: res=>{
        console.log("comp");
      },
      success: function() {
        console.log("success");
      },
      fail: function() {
        console.log("fail");
      }
    })
  },

是的，仅需要一行代码 “const db = wx.cloud.database(); ” 此db就可以被认为是数据库的句柄，通过它来对数据库进行操作。但是云数据库存在日访问次数限制，个人用用的花免费的就足够了。

onload函数，仅在程序第一次加载时调用

今天在写完数据库后端操作后，发现了一个bug，在一个界面新增数据后，切回数据显示界面，为什么数据不更新，而且不管切多少次都不行，需要重新打开小程序。后通过百度找到了问题所在，即小程序的页面的生命周期，onload仅在小程序第一次打开时调用，解决办法，图简单的话自然就是在切页面的函数中调用onliad函数就行了，当然，处于性能考虑，后期将会对这些函数进行区分

input组件，输入完毕自动清空

今天为实现一个效果查询了很多帖子，即 input组件输入完毕后就将内容清空，避免重复提交的情况，同样在查询中看到了很多上百行代码的解决方法，有自己设置展示效果的，有调用form组件的reset方法的，但是调用reset需要一个reset按钮，跟我需要实现的效果存在出入。最后找出一个及其简单的方法记录如下

 <input placeholder="*输入地点，如:塞北101" value='{{NULL}}' type="text" name='area' ></input>

即只需要在submit()函数结束后将NULL(NULL为变量，并非0，为了醒目)置为空字符串即可。自己没想到这个方法可能也是因为对input组件的特性不了解造成的吧。
自己接触小程序前后也才不到一周时间，对它的认识还需加深，先作出如上总结。