微信公众号小程序开发实战：从零到上线全流程解析

用户30788350800
4 阅读1分钟

一、前言

随着微信生态的持续发展，微信公众号和小程序已成为企业数字化营销和服务的重要入口。作为苏州本地的互联网服务商，豆子工作组在多个项目中积累了丰富的实战经验。本文将系统性地分享微信公众号和小程序开发的核心技术和实战要点。

二、技术选型与准备

2.1 开发环境搭建

小程序开发：

  • 微信开发者工具（必须）
  • 代码编辑器：VS Code + 小程序插件
  • 版本管理：Git
  • 后端：PHP + DZ Framework（豆子工作组自研框架）

公众号开发：

  • 公众号测试账号（开发阶段）
  • 服务器：Nginx + PHP
  • 接口调试：Postman / ApiPost

2.2 核心配置项

公众号基本配置示例：

  • AppID: 微信公众平台获取
  • AppSecret: 公众平台获取（注意保密）
  • 服务器地址(URL): 后端回调地址
  • Token: 自定义令牌（用于验证消息来源）
  • EncodingAESKey: 消息加密密钥

三、核心功能实现

3.1 微信授权登录

小程序和公众号都支持微信授权登录，是用户体系的基础。

小程序端（前端）：

// 小程序获取用户登录凭证
wx.login({
  success: (loginRes) => {
    // 获取code后发送到后端
    wx.request({
      url: 'https://0512cs.top/api/wechat/login',
      method: 'POST',
      data: { code: loginRes.code }
    })
  }
})

服务端（PHP/DZ Framework）：

// 微信登录接口实现
class WechatController extends Controller {
    public function actionLogin() {
        $code = $_POST['code'];
        
        // 1. 用code换取openid和session_key
        $url = "https://api.weixin.qq.com/sns/jscode2session";
        $params = [
            'appid'     => self::APPID,
            'secret'    => self::SECRET,
            'js_code'   => $code,
            'grant_type'=> 'authorization_code'
        ];
        
        $result = $this->httpGet($url, $params);
        $data = json_decode($result, true);
        
        if (isset($data['openid'])) {
            // 2. 查找或创建用户
            $user = User::findByOpenid($data['openid']);
            if (!$user) {
                $user = new User();
                $user->openid = $data['openid'];
                $user->created_at = date('Y-m-d H:i:s');
                $user->save();
            }
            
            // 3. 生成自定义登录态
            $token = $this->generateToken($user->id);
            
            return json_encode([
                'code'  => 0,
                'token' => $token,
                'user'  => $user->toArray()
            ]);
        }
        
        return json_encode(['code' => -1, 'msg' => '登录失败']);
    }
}

3.2 微信支付集成

支付是电商类小程序的核心功能。

统一下单接口核心实现：

public function actionCreateOrder() {
    $openid   = $this->getOpenid();
    $totalFee = intval($_POST['total_fee'] * 100); // 单位：分
    
    $params = [
        'appid'            => self::APPID,
        'mch_id'           => self::MCH_ID,
        'nonce_str'        => $this->generateNonceStr(),
        'body'             => $_POST['body'],
        'out_trade_no'     => $this->generateOrderNo(),
        'total_fee'        => $totalFee,
        'spbill_create_ip' => $_SERVER['REMOTE_ADDR'],
        'notify_url'       => 'https://0512cs.top/wechat/pay_notify',
        'trade_type'       => 'JSAPI',
        'openid'           => $openid
    ];
    
    // 生成签名
    $params['sign'] = $this->makeSign($params);
    
    // 调用统一下单API
    $xml  = $this->arrayToXml($params);
    $response = $this->postXmlCurl($xml, 'https://api.mch.weixin.qq.com/pay/unifiedorder');
    $result = $this->xmlToArray($response);
    
    if ($result['return_code'] == 'SUCCESS') {
        // 返回前端支付所需参数
        $payParams = [
            'appId'     => self::APPID,
            'timeStamp' => (string)time(),
            'nonceStr'  => $this->generateNonceStr(),
            'package'   => 'prepay_id=' . $result['prepay_id'],
            'signType'  => 'MD5'
        ];
        $payParams['paySign'] = $this->makeSign($payParams);
        
        return json_encode(['code' => 0, 'data' => $payParams]);
    }
    
    return json_encode(['code' => -1, 'msg' => '下单失败']);
}

3.3 消息推送与订阅消息

// 发送订阅消息
public function sendSubscribeMessage($openid, $templateId, $data) {
    $accessToken = $this->getAccessToken();
    
    $url = "https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token={$accessToken}";
    
    $params = [
        'touser'      => $openid,
        'template_id' => $templateId,
        'page'        => 'pages/index/index',
        'data'        => $data
    ];
    
    $result = $this->httpPost($url, json_encode($params));
    return json_decode($result, true);
}

四、豆子工作组实战案例

案例1：校服预定系统

需求背景： 企业需要在线管理学生校服预定，支持尺码选择、批量下单、订单管理。

技术方案：

  • 前端：微信小程序（方便家长使用）
  • 后端：PHP + DZ Framework + MySQL
  • 支付：微信支付
  • 管理后台：PHP Web管理端

核心功能实现：

  1. 学校/班级管理
  2. 校服款式/尺码管理
  3. 家长端下单（微信授权登录 + 微信支付）
  4. 企业端订单管理（发货、退款）
  5. 数据统计报表

上线效果：

  • 家长下单率提升80%（相比传统线下订单）
  • 企业管理效率提升50%
  • 零纸质化操作

案例2：售后维修服务系统

需求背景： 企业需要管理售后维修工单，追踪维修进度。

技术方案：

  • 前端：微信公众号H5页面
  • 后端：PHP + DZ Framework
  • 消息通知：微信订阅消息

核心功能：

  1. 用户提交维修申请（拍照上传故障）
  2. 工程师接单/派单
  3. 维修进度实时推送
  4. 用户评价系统

五、开发避坑指南

5.1 常见坑点

问题原因解决方案
授权登录失败code只能用一次确保code及时使用，不重复用
支付签名错误参数顺序/编码问题按ASCII码排序，统一UTF-8
订阅消息发送失败用户未订阅引导用户先订阅再发送
小程序审核被拒内容/功能不合规仔细阅读微信审核规范

5.2 性能优化建议

  1. 接口请求优化： 合并接口，减少请求次数
  2. 图片资源优化： 使用WebP格式，CDN加速
  3. 数据库优化： 添加必要索引，避免全表扫描
  4. 缓存策略： 使用Redis缓存热点数据

六、总结

微信公众号和小程序开发虽然门槛不高，但要做到稳定、高效、用户体验好，需要在细节上下功夫。豆子工作组在常熟本地服务了多家企业，积累了丰富的实战经验。

我们的服务包括：

  • 微信公众号开发（菜单、消息、支付、H5）
  • 微信小程序开发（电商、预约、工具类）
  • 系统对接（ERP、CRM、进销存）
  • 运维支持（服务器、域名、备案）

如有开发需求，欢迎联系豆子工作组（dzmvc.com / 0512cs.top）。

avatar
文章
阅读
粉丝