微信小程序踩坑之前端問題處理篇

近期完成了一個小程序，自己做的前后端開發、真是慘哭我了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系統無法展現圖片，查找原因是因為圖片沒有配置服務器域名之類的問題，但后期配置了也沒有效果。

　　所以簡單粗暴的，我選擇把圖片截圖，不使用高清原圖了，是的打包成功了。。。但后期還是要改善的，還是要保證用戶體驗感的！

 

后續還有填坑分享的，喜歡幫忙頂個文吧！