微信小程式初探（一、簡單的資料請求）

微信小程式出來有一段時間了，之前沒看好小程式（覺得小程式體驗不咋好，内心對新事物有抵觸心裡，請原諒我的膚淺[捂臉][捂臉]），不過後來偶然之間玩過小程式的遊戲（跳一跳、球球大作戰、猜畫小歌等），頓悟原來小程式的體驗還可以做到這樣幾乎可以媲美原生啦，此後内心一直有躍躍欲試的騷動，然并卵無奈沒有時間。好在公司新版本App上線後終于有時間來搞一搞了，花了兩天的時間寫了一個簡單的伺服器請求把趟過坑記錄一下友善自己查詢也為後來的小夥伴少走些彎路，閑言少叙下面開始進入正題

1、小程式對開發人員的要求

做小程式開發需要有一些前端開發的基礎，比如會一些JavaScript、CSS、HTML，然後如果你有野心想做全棧工程師小程式提供了Node.js來寫背景也需要有一些Node.js的基礎，好了小夥伴們不要被這些吓到，其實這些沒啥，下面有一些連結文檔自己照着看一片就差不多了

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

2、小程式環境配置

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

安裝完之後會自動生成前後端Demo代碼

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

3、小程式踩過的坑

①、對于服務端代碼寫完之後一定要上傳測試代碼（就是上傳到騰訊雲開發環境上）這樣服務端的資料才會生效，切記，切記

2、寫服務端代碼的時候，要用這段代碼通路資料庫，使用騰訊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
        

  }

下面是自己踩過的坑，貼出代碼來

3、在前端請求資料的時候看清資料結構避免出錯

采坑複盤如下

1、服務端傳回的資料如下

2、前段展示代碼

此代碼一直提示錯誤資訊

仔細分析錯誤資訊，‘Setting data field “productList” to undefined is invalid’，這句話的中文意思大緻是這樣，給productList字段指派為undefined是無效得。納尼，無效的，就是res.data.msg是undefined，明明列印出來的msg有資訊嗎，仔細斟酌，原來少了一層data，

代碼改成如下，效果立馬顯現，完美哈哈哈

運作之後效果出來啦，下面就是見證奇迹的時刻[大笑]，本想制作個gif動畫，沒有找到合适的軟體，園友們忍忍吧

好了采坑結束，如有問題請留言适時回複