重新学习前端，小程序学得怎么样了？

哈哈，跟你聊聊我这段时间折腾小程序的点滴吧。

说实话，前端老是被我抛在脑后等到想起再捡起来总感觉手生。

不过你懂的，Zui近真的是被项目逼得不行——老板要Zuo个快手版的商城，我只好把微信小程序给掰开揉碎了。

咱就是说刚开始那叫一个懵逼。打开 IDE 那一堆 .json、.wxml、.wxss 的文件结构，我差点以为自己进了外星。

不对不对，我应该先把概念理清楚：小程序就是运行在微信里的轻量级应用，页面用 WXML 写结构，用 WXSS 写样式，用 JS写业务。

于是我先跑了一遍官方文档的「快速入门」章节，边kan边敲代码——一行代码就换一行页面kan到实时预览那种爽感，心里瞬间有点小激动。

装个微信开发者工具，别忘了登录你的公众号账号，否则只Nengkan不Neng调试。

然后在项目根目录随手建个 app.js、app.json、app.wxss，这三个文件是全局入口和配置。

比如在 app.json 里写：

{
  "pages": ,
  "window": {
    "navigationBarTitleText": "我的小店",
    "navigationBarBackgroundColor": "#07C160",
    "navigationBarTextStyle": "white"
  }
}

别担心，这段代码kan起来hen正式，其实就是告诉框架「这两个页面是入口」而Yi。

打开 pages/index/index.wxml，我先写个Zui基础的结构：

  欢迎来到我的小店！
  去详情页

wxss 那边就简单点儿：

.container {
  padding: 30rpx;
}
button {
  margin-top: 20rpx;
}

这时候你会发现页面渲染得挺顺畅——好像回到了当年玩 HTML 那会儿的感觉。

别忘了每次geng新 UI 必须走 setData。刚开始我也犯过「直接改 this.data」的低级错误，结果页面根本不刷新。后来才明白：

// index.js
Page({
  data: {
    goods: 
  },
  onLoad {
    // 模拟请求
    setTimeout => {
      this.setData({
        goods: 
      })
    }, 1000)
  },
  goDetail {
    const idx = e.currentTarget.dataset.idx
    wx.navigateTo
  }
})

这里用 setTimeout 假装从后台拉数据，等到数据回来再 setData，页面立马刷新——真是爽到飞起。

说实话，我之前一直以为必须自己搭后端才Neng存数据。结果发现微信Yi经内置了云函数、云数据库、云存储三大块服务。

只要在 console 开通云开发，然后在项目里 init：

// app.js
App({
  onLaunch {
    wx.cloud.init({
      env: 'my-env-id',
      traceUser:true
    })
    console.log
  }
})

接着写个云函数来获取商品列表：

// cloud-functions/getGoods/index.js
const cloud = require
cloud.init
exports.main = async  => {
   const db = cloud.database
   return await db.collection.get
}

前端调用时只要一行代码：

wx.cloud.callFunction({
   name:'getGoods',
   success{ this.setData }
})

这样省掉了自己写 API 的麻烦，还Neng直接在控制台kan到数据增长情况。嗯，这点真的让我对前端又爱又恨——爱它Neng独立搞定全栈，恨它总有新东西要学。

上线前一定要考虑首屏速度。我把非核心页面dou放进分包：

{
  "subPackages":
    }
  ]
}

还有图片懒加载，用自带属性 data-src 实现：

骨架屏的话，就直接占位一个灰色块，让用户感受到「内容正在加载」而不是空白：

   
   

真实内容

调试时我常用两招：

console.log+断点混合使用：# 微信开发者工具支持 Chrome DevTools，只要打开“调试模式”，随时Ke以给 JS 加断点；但hen多时候直接 console.log Nenggeng快定位问题——尤其是网络请求返回的数据结构变化时一行 log 就Neng让你kan到整个对象。

"debugger"语句强制中断：# 在关键位置写上 debugger；运行到这里自动停住让你检查当前作用域变量值，非常适合排查异步回调中的坑。

"setData频繁导致卡顿"# 我曾经每滚动一次就 setData geng新 scrollTop，结果滑动卡顿。改成节流或防抖后顺畅多了。

"路径大小写错误"# 小程序对路径大小写敏感，一不小心写成 /Pages/Index 而实际是 /pages/index，就会报找不到页面的错。IDE 自动提示hen有帮助，但手敲时还是要多留意。

"未开启 request 合法域名"# 请求外部接口必须在后台配置合法域名，否则 request 会直接报错。调试阶段常常忘记加，于是卡住半天才发现原来是域名问题。

"组件库冲突"# 引入 Vant Weapp 时不小心全局引入导致体积爆炸。后来改成按需引入，只保留用了的组件，体积降了不少。

- 小程序生态真的hen完整，从 UI 到云服务几乎一步到位； - 学习曲线虽陡，但一次上手后你会发现hen多概念跟传统 Web 开发相通，只是实现方式geng轻量； - Zui重要的是保持好奇心和耐心——每遇到一个 bug，dou像解谜一样刺激； - 咱们这些老前端转战小程序的兄弟姐妹们，一起加油吧！以后有机会再一起聊聊跨平台框架，一起玩转多端同构代码！