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

      微信小程序出來有一段時間了，之前沒看好小程序（覺得小程序體驗不咋好，內心對新事物有抵觸心里，請原諒我的膚淺[捂臉][捂臉]），不過后來偶然之間玩過小程序的游戲（跳一跳、球球大作戰、猜畫小歌 等），頓悟原來小程序的體驗還可以做到這樣 幾乎可以媲美原生啦，此后內心一直有躍躍欲試的騷動，然並卵無奈沒有時間。好在公司新版本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動畫，沒有找到合適的軟件，園友們忍忍吧

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