零基础麻将小程序搭建教程：2026年不用写一行代码？手把手带你3小时做出番型计算器

上次麻将小程序教程发出去之后，后台私信直接炸了。大概有一半的朋友都在问同一件事：“B哥，我是真的一行代码都没写过，连开发工具长什么样都不知道，你说的那些我能搞吗？”

能搞，太能搞了，说实话，2026年做小程序跟几年前的难度已经不是一个级别了。以前不会代码基本等于直接劝退，现在工具顺手了、AI能帮忙了、各种现成的模板满天飞，零基础这件事本身，早就不是门槛了。

今天这篇文章，我就专门为“真·零基础”的朋友们写一份教程。我们不搞记分系统那种需要多端同步的功能，换个更轻量、更实用、而且新手一个人就能独立完成的案例——做一个麻将番型计算器。你选牌型，它告诉你几番，就这么简单。全程不需要写复杂的逻辑，跟着走，一个下午就能做出一个能跑起来的小程序。

你可能会问：做番型计算器有啥用？

先花一分钟把这个讲清楚，因为很多新手做项目最容易死在“不知道做什么”这一步。番型计算器这个小东西，实用性比你想的要高：

• 线下打牌遇到争议番型，拿出来查一下，比翻纸质规则书快。

• 新手学麻将，用它可以边打边认番，相当于随身带了个教练。

• 各地规则不一样（广东麻将、川麻、国标、长沙麻将），做成工具之后，切换规则就能用。

关键是它功能清晰，不碰对战、不碰充值、不碰任何敏感红线，审核通过率极高，最适合拿来练手。做完了放到朋友圈或者本地麻将群里，用的人还不少——我认识一个做长沙麻将番型查询的，纯工具类，没花一分钱推广，靠社群转发攒了三千多用户。

第一步：把“户口”办好，注册小程序账号

零基础的千万别一上来就去搜“小程序怎么开发”，你会被各种名词直接砸晕。正确的起点只有一个：先去微信公众平台注册一个账号，拿到AppID。

打开 mp.weixin.qq.com，点“立即注册”，选“小程序”。用你平时用微信的那个手机号去注册就行，身份证实名认证一下。个人主体选“个人”，几分钟就能搞定。

唯一会卡人的地方是邮箱——必须用一个从来没在微信公众平台注册过任何东西的全新邮箱。我有个朋友连换了三个邮箱都被提示“已注册”，最后拿他老婆的工作邮箱才搞定。如果遇到这种情况别慌，去注册一个全新的163或者QQ邮箱就行。

审核通过后，进后台找“开发管理”→“开发设置”，把AppID那一长串wx开头的字符串复制下来，存到一个随手能找到的地方。这个东西贯穿开发全程，丢不了但找起来麻烦。

第二步：装工具、建项目，先看一眼开发工具长什么样

去微信官方文档网站（developers.weixin.qq.com）下载“微信开发者工具”，认准这个域名，别点进什么下载站的广告链接。装好之后打开，用你刚才注册小程序的那个微信扫码登录。

登录后的界面大概是这样：左边是模拟器，模拟手机屏幕的效果；中间是代码编辑区，写代码的地方；右边是调试器，和浏览器的开发者工具差不多。新手一开始不用全看懂，你只需要知道左边是“你看效果的地方”，中间是“你改东西的地方”，就够了。

接下来新建项目：点“新建小程序项目”，随便取个项目名，目录选一个空文件夹，把刚才复制的AppID粘贴进去。重点来了——开发模式一定要勾选“微信云开发”。

为什么一定要勾云开发？因为零基础的人最怕听到“服务器”“数据库”“域名备案”这些词。勾上云开发之后，这些东西微信全帮你包了——有现成的数据库、现成的文件存储，你直接在小程序里用几行代码就能读写数据。等于把最难的那块骨头直接剔掉了。

项目创建成功后，模拟器里会显示一个空白页面，中间可能有一句“Hello World”。到这，你的开发环境就算搭好了。前后不超过二十分钟。

第三步：搭页面——让这个计算器先“长”出来

零基础做页面，最容易上手的方式是：先在纸上画个草稿，然后对着草稿一块一块拼组件。 我们的番型计算器页面需要啥？

• 顶上一个大标题，比如“麻将番型计算器”。

• 中间一个选择框，让用户选“广东麻将”“四川麻将”“国标麻将”等规则。

• 下面是一个牌型输入区域，可以用勾选框让用户勾选自己手上有哪些刻子、顺子、对子、杠，或者简单一点——用几个下拉框选“胡牌方式”（自摸、点炮、抢杠等）和“特殊牌型”（清一色、碰碰胡、七对等）。

• 最底下是一个计算按钮和一个显示番数的大数字。

把这个草稿翻译成wxml代码，结构非常简单。我把框架写出来给你看：

<view class="container">
  <text class="title">麻将番型计算器</text>

  <view class="rule-picker">
    <text>选择规则：</text>
    <picker bindchange="onRuleChange" value="{{ruleIndex}}" range="{{rules}}">
      <view class="picker-text">{{rules[ruleIndex]}}</view>
    </picker>
  </view>

  <view class="options">
    <text>胡牌方式：</text>
    <radio-group bindchange="onWinTypeChange">
      <label><radio value="self" checked/>自摸</label>
      <label><radio value="discard"/>点炮</radio>
    </radio-group>

    <text>特殊牌型（可多选）：</text>
    <checkbox-group bindchange="onSpecialChange">
      <label><checkbox value="qing"/>清一色</label>
      <label><checkbox value="peng"/>碰碰胡</label>
      <label><checkbox value="seven"/>七对</label>
      <label><checkbox value="kong"/>杠上开花</label>
    </checkbox-group>
  </view>

  <button type="primary" bindtap="calculate">计算番数</button>

  <view class="result" wx:if="{{showResult}}">
    <text class="fan-number">{{totalFan}}</text>
    <text class="fan-unit">番</text>
  </view>
</view>

你不用逐行看懂每个标签是什么意思，跟着写就行。<picker> 是下拉选择器，<radio-group> 是单选，<checkbox-group> 是多选，<button> 是按钮。这些东西都是微信给你准备好的“积木”，你只需要把它们拼在一起。

第四步：让它能算——写一点最基础的逻辑

页面长出来了，现在要让它“活”。点“计算番数”按钮之后，怎么算出番数？这是零基础最害怕的一步，但番型计算的逻辑其实特别适合用“对照表”来解决。

我们在js文件里先建一个番型对照表。比如广东麻将的简易规则（仅举例用）：

// 番型基础对照表（简化版）
const fanRules = {
  guangdong: {
    self: 1,      // 自摸基础1番
    discard: 1,   // 点炮也1番，但其他玩家付分不同（这里只算番数）
    special: {
      qing: 4,    // 清一色加4番
      peng: 2,    // 碰碰胡加2番
      seven: 4,   // 七对加4番
      kong: 1     // 杠上开花加1番
    }
  },
  // 更多地区规则可以继续加...
}

然后点按钮的时候，js做一个简单的累加：

calculate() {
  const rule = this.data.rules[this.data.ruleIndex]; // 当前选择的规则
  const winType = this.data.winType; // 自摸还是点炮
  const specials = this.data.selectedSpecials; // 勾选的特殊牌型，数组

  let totalFan = 0;
  const ruleData = fanRules[rule];

  // 基础番
  totalFan += ruleData[winType];

  // 特殊牌型累加
  specials.forEach(item => {
    totalFan += ruleData.special[item] || 0;
  });

  // 更新页面显示
  this.setData({
    totalFan: totalFan,
    showResult: true
  });
}

这十几行代码就是这个计算器的全部逻辑了。说白了就是“查表累加”，没有任何复杂算法。你不需要学循环、闭包、递归这些名词，照猫画虎改改数字就能跑。不同地区的番型规则不同，你只要把 fanRules 对象里的数字按本地规则改掉就行，其他代码完全不用动。

第五步：想把历史记录存下来？试试云开发“一键存取”

做到这一步，你的番型计算器已经能用了。但如果你想让用户看到自己之前算过的记录，就要用到数据存储。

别怕，2026年的云开发已经把这件事简化到了离谱的程度。简单来说就三步：

① 在开发者工具顶部菜单点“云开发”，进入控制台，创建一个数据库集合，叫 calc_history。

② 在计算按钮的js函数里，算完之后顺便把记录存进去：

// 存一条计算记录
const db = wx.cloud.database();
db.collection('calc_history').add({
  data: {
    rule: this.data.rules[this.data.ruleIndex],
    winType: this.data.winType,
    specials: this.data.selectedSpecials,
    totalFan: totalFan,
    createTime: new Date()
  }
}).then(() => {
  console.log('记录保存成功');
});

③ 在页面里新增一个“历史记录”区域，每次打开页面时从数据库读取最近十条记录，用列表展示出来。读取代码就一行：

db.collection('calc_history').orderBy('createTime', 'desc').limit(10).get().then(res => {
  this.setData({ historyList: res.data });
});

零基础写到这可能还是有点懵，但没关系——这几行代码是可以直接复制粘贴的，你只需要改一下集合名称和数据字段，别的都不用动。云开发的数据库API就是专门为前端开发者设计的，它的语法和操作逻辑非常直白，看英文单词基本都能猜出意思。

第六步：预览、调试，然后准备提交审核

在开发者工具里点顶部的“预览”按钮，用手机微信扫一下二维码，你就能在真机上看到自己的小程序了。把所有按钮点一遍，确认计算正确、历史记录能存能读，没问题就可以进入最后一步，提交审核。

提交前一定要检查这三件事：

类目必须选“工具→信息查询”。 这个类目是番型计算器最稳妥的选择，审核人员一看就知道这是个查询类工具，不会往游戏方向去想。

名称千万别带“麻将”两个字。 这是很多新手踩过的大坑——取名“XX麻将计算器”大概率会被打回来要求改名。改成“番型助手”“牌型计算器”“桌边小算盘”之类，既表达了功能又不踩红线。我见过最会取名的，叫“几番”，两个字，干净利落，一次过审。

功能一定要完整。 审核人员会真点真用，你那些计算按钮不能点下去没反应，历史记录页不能空白。如果功能只做了一半，先把没做完的隐藏掉，保证展示出来的都是可用的。

提交之后等1到7个工作日，审核结果会通过微信通知你。如果被驳回，别慌，根据驳回原因改一下再提交就行。我第一次帮人做工具类小程序，也打回来改过一次类目描述，改完当天就过了。

这篇“零基础麻将小程序搭建教程”，从注册账号到真机预览，每一步都不需要你提前懂代码——你只需要打开电脑，跟着走。

我经常跟来找我咨询的朋友说一句话：做小程序的秘密不是“学会所有知识再开始”，而是“先做一个能跑的东西出来，剩下的边用边学”。 麻将番型计算器这个小东西，功能不复杂，但它能让你真真切切地走完“注册→开发→上线”的完整闭环。这个闭环跑通一次，后面你做什么都心里有底了。

如果你在搭建过程中卡住了，或者不想从零开始一点点敲代码，我这边有现成的麻将类工具小程序源码和详细的零基础搭建文档，拿来改巴改巴就能直接用自己的。需要的话，直接扫下面的二维码加我微信就行，备注“零基础麻将”，我把资料发给你，看到消息都会回。

扫描下方二维码，发送“零基础麻将”即可领取源码和配套教程。