微信小程序踩坑之前端问题处理篇

近期完成了一个小程序，自己做的前后端开发、真是惨哭我了o(╥﹏╥)o，下面几点希望大家可以避雷。

首先，想先介绍一下我遇到问题的解决思路：

　　1、先在postman调试接口，看数据获取是否正常，
　　2、在微信开发者工具，考虑是不是语法不对，
　　3、看看是不是组件的问题，有些组件是禁用一些点击事件的。

1.数据更新

　　想改变data数据，并不是简单的data:{ }就可以的，因为视图层和逻辑层的数据更新不一致，所以需要使用API：this.setData({ }) 进行改变。

 1.1 补充，如何用setData修改数组或对象中的一个属性值

　　需求：改变lists[0]中的Sname

Page({
   data:{
        lists:[
         {
          Sno:"001",
          Sname:"梨花"
        },
        {
          Sno:"002",
          Sname:"黛玉"
       }  
     ]
    } 
})

法一：直接修改

onLoad:function () {
       var that = this;
       that.setData({
           'lists[0].Sname' : '小花'
      })
   }

法二：①定义一个变量 把(lists[0].Sname)用字符串拼接起来 ②修改变量

onLoad:function () {
       var that = this;
       var s = "lists[" + 0 + "].Sname"; 
       that.setData({
         [s] : '小花'
      })
   }

 

2.this指向

　　当函数定义的时候，会使用API，此时this指向会改变。但想在函数中使用全局上下文的this，我们选择利用that进行this指向的改变。

　　在一个新函数中，定义一个that变量等于this，即选择用that进行备份。

onLoad:function () {
       var that = this;  
}

 

3.存储全局变量

　　①首先在app.js中，定义全局变量globalData，可以原来存储登录状态的信息

globalData: {
    user:{},
    Status:{}
}

　　② 在其他js文件调用的时候，注意要先定义一个变量，然后再使用

onLoad: function (options) {
    var app = getApp();
    wx.request({
      data: {
        Sno: app.globalData.user.username,
      }
  )}  
}

 

4.调用后端接口

　　首先，注意后端返回的数据，格式可能不够统一。所以不能惯性思维，比如我当时 res.data.code ==> 应该是 res.data.error_code 。

 

5.图片处理问题

　　当使用的图片资源过大，会导致包过大，而无法打包。
解决方案：
　　①将图片上传至QQ相册等，然后微信小程序在图片链接使用线上地址。
　　②使用BASE64进行图片转换。
　　但是！当真机调试时，IOS系统无法展现图片，查找原因是因为图片没有配置服务器域名之类的问题，但后期配置了也没有效果。

　　所以简单粗暴的，我选择把图片截图，不使用高清原图了，是的打包成功了。。。但后期还是要改善的，还是要保证用户体验感的！

 

后续还有填坑分享的，喜欢帮忙顶个文吧！