首页 › 移动端 › 微信小程序教程

发布流程

微信小程序教程 · 第 8 章 · 7 次浏览

小程序开发完要上传、提交审核、发布。同时做一个实战：简易购物车页面，把列表、交互、请求串起来。

发布流程

  1. 开发者工具"上传"填版本号
  2. 后台 mp.weixin.qq.com 提交审核
  3. 审核通过后"发布"（个人主体类目受限）
  4. 线上问题用"版本回退"

实战：购物车

列表渲染商品 + 加减数量 + 合计金额。数量变化触发 setData，金额实时重算。

代码示例

// 购物车数据
Page({
  data: {
    cart: [
      { id: 1, name: "苹果", price: 5.5, qty: 2 },
      { id: 2, name: "香蕉", price: 3.2, qty: 1 }
    ]
  },

  // 加数量
  add(e) {
    const id = e.currentTarget.dataset.id;
    const cart = this.data.cart.map(item =>
      item.id === id ? { ...item, qty: item.qty + 1 } : item
    );
    this.setData({ cart });
  },

  // 减数量
  minus(e) {
    const id = e.currentTarget.dataset.id;
    const cart = this.data.cart
      .map(item => item.id === id ? { ...item, qty: Math.max(0, item.qty - 1) } : item)
      .filter(item => item.qty > 0);
    this.setData({ cart });
  },

  // 合计
  get total() {
    return this.data.cart
      .reduce((sum, i) => sum + i.price * i.qty, 0)
      .toFixed(2);
  }
})
📚 JavaScript 语法速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
写法 / 语法作用
let x = 1;声明变量（可重新赋值）
const y = 2;声明常量（不可重新赋值）
var 已过时旧式变量声明，建议用 let/const
if (条件) { } else { }条件判断
for (let i = 0; i < n; i++) { }循环
while (条件) { }条件循环
function fn(a, b) { return a + b; }函数声明
const fn = (a) => a + 1;箭头函数
array.push(x) / pop()数组尾部添加 / 删除
array.map(fn) / filter(fn)数组映射 / 过滤
obj.key / obj["key"]访问对象属性
JSON.stringify(obj)对象转 JSON 字符串
JSON.parse(str)JSON 字符串转对象
document.getElementById("id")按 id 取元素
document.querySelector("选择器")按选择器取第一个元素
element.textContent读写元素文本
element.innerHTML读写元素 HTML（慎用，防 XSS）
element.addEventListener("click", fn)绑定事件
console.log(x)控制台输出（调试）
setTimeout(fn, 1000)延迟执行（毫秒）
window.location.href当前页面地址（可赋值跳转）
localStorage.setItem("k", v)本地存储写入
localStorage.getItem("k")本地存储读取
new Promise((resolve, reject) => {})Promise 异步处理
async / await异步函数语法糖
📖 延伸阅读