微信小程序初探（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动画，没有找到合适的软件，园友们忍忍吧

好了采坑结束，若有问题请留言 适时回复