微信小程序初探（1、簡單的數據請求）

      微信小程序出來有一段時間了，以前沒看好小程序（以爲小程序體驗不咋好，心裏對新事物有抵觸內心，請原諒個人膚淺[捂臉][捂臉]），不事後來偶然之間玩太小程序的遊戲（跳一跳、球球大做戰、猜畫小歌 等），頓悟原來小程序的體驗還能夠作到這樣 幾乎能夠媲美原生啦，此後心裏一直有躍躍欲試的騷動，然並卵無奈沒有時間。好在公司新版本App上線後終於有時間來搞一搞了，花了兩天的時間寫了一個簡單的服務器請求 把趟過坑記錄一下 方便本身查詢 也爲後來的小夥伴少走些彎路，閒言少敘 下面開始進入正題

一、小程序對開發人員的要求

      作小程序開發須要有一些前端開發的基礎，好比會一些JavaScript、CSS、HTML，而後若是你有野心想作全棧工程師 小程序提供了Node.js來寫後臺也須要有一些Node.js的基礎，好了小夥伴們不要被這些嚇到，其實這些沒啥，下面有一些連接文檔本身照着看一片就差很少了

     Js學習  CSS Flex佈局  Node.js學習

二、小程序環境配置

     小程序開發環境配置照着官網一步步來就行，此處不在一一贅述，參考官網文檔便可，本人下載完開發工具後安裝時選擇的是創建騰訊雲Node.js啓動模板，以下圖所示

     

安裝完以後會自動生成先後端Demo代碼

服務端代碼裏面有個README.md文檔建議認真閱讀

 

三、小程序踩過的坑

    ①、對於服務端代碼寫完以後必定要上傳測試代碼（就是上傳到騰訊雲開發環境上）這樣服務端的數據纔會生效，切記，切記

          

二、寫服務端代碼的時候，要用這段代碼訪問數據庫，使用騰訊sdk提供的qcloud來訪問數據庫

const { mysql } = require('../qcloud');

module.exports=async(ctx,next)=>{
var data = await mysql('brandmodeltab').select();
  ctx.state.data = {
            msg: data
          };
  return ctx.state.data
        

  }

下面是本身踩過的坑，貼出代碼來

三、在前端請求數據的時候看清數據結構避免出錯

    採坑覆盤以下

    一、服務端返回的數據以下

     

     二、前段展現代碼

此代碼一直提示錯誤信息

仔細分析錯誤信息，‘Setting data field 「productList」 to undefined is invalid’，這句話的中文意思大體是這樣，給productList字段賦值爲undefined是無效得。納尼，無效的，就是res.data.msg是undefined，明明打印出來的msg有信息嗎，仔細斟酌，原來少了一層data，

代碼改爲以下，效果立馬顯現，完美 哈哈哈

運行以後效果出來啦，下面就是見證奇蹟的時刻[大笑]，本想製做個gif動畫，沒有找到合適的軟件，園友們忍忍吧

好了採坑結束，若有問題請留言 適時回覆