Python中如何开发在微信中浏览的网页？

我需要开发一个企业内部用的 web 服务，因为用的人少，功能也简单，就一个数据实时显示页面，后端就用 flask 了。但是需要注意的是，我需要把这个页面的链接用微信消息发给用户，用户点击消息中的链接，等于是用微信内置浏览器来浏览。

我平时很少接触前端，我想请教一下，这种情况下开发前端应该注意什么，flask 渲染前端是用的 jinjia2 模板，pc 端我就做过，但是移动端应该怎么搞呢，是需要用到 html5、移动端适配、weui 等知识？搜索了一圈，还是有点迷糊，求有经验的同学指点一下大概是需要怎么做，我再去找对应的知识点学习。
Python中如何开发在微信中浏览的网页？

1 回复

要在微信中开发网页，核心就是做响应式Web开发，并处理好微信内置浏览器的特性。直接用Flask或Django这类框架起后端服务，前端注意兼容性就行。

给你个最直接的Flask例子，展示基本结构和微信适配要点：

from flask import Flask, render_template, request
import time

app = Flask(__name__)

# 微信浏览器检测和页面渲染
@app.route('/wechat_page')
def wechat_page():
    user_agent = request.headers.get('User-Agent', '').lower()
    is_wechat = 'micromessenger' in user_agent
    
    # 示例：获取微信分享的推荐人（需配合JS-SDK）
    referrer = request.args.get('from', 'direct')
    
    return render_template('wechat_page.html',
                         is_wechat=is_wechat,
                         timestamp=int(time.time()),
                         referrer=referrer)

# 微信JS-SDK配置接口（需要微信公众号后台配置）
@app.route('/wx_config')
def wx_config():
    import hashlib
    import random
    
    # 这里需要你的公众号配置
    app_id = 'YOUR_APP_ID'
    nonce_str = ''.join(random.sample('abcdefghijklmnopqrstuvwxyz', 16))
    timestamp = str(int(time.time()))
    
    # 实际开发中需要按微信规则生成签名
    # 此处为示例结构
    config = {
        'appId': app_id,
        'timestamp': timestamp,
        'nonceStr': nonce_str,
        'signature': 'CALCULATED_SIGNATURE'  # 需实际计算
    }
    return config

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0', port=5000)

对应的HTML模板（templates/wechat_page.html）关键部分：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>微信页面</title>
    <style>
        /* 微信浏览器专用样式调整 */
        body {
            -webkit-overflow-scrolling: touch; /* 平滑滚动 */
            font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
        }
        /* 防止长按弹出菜单 */
        .no-menu {
            -webkit-touch-callout: none;
            user-select: none;
        }
    </style>
</head>
<body>
    {% if is_wechat %}
    <div class="wechat-only">
        <h1>欢迎在微信中浏览</h1>
        <p>页面已针对微信优化</p>
    </div>
    {% endif %}
    
    <!-- 微信JS-SDK初始化 -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script>
        // 配置微信分享等功能
        wx.config({
            debug: false,
            appId: '{{ config.appId }}',
            timestamp: {{ config.timestamp }},
            nonceStr: '{{ config.nonceStr }}',
            signature: '{{ config.signature }}',
            jsApiList: ['updateAppMessageShareData', 'chooseImage']
        });
    </script>
</body>
</html>

关键点：

  1. 响应式设计：用viewport控制移动端显示，CSS用flexbox/grid布局
  2. 微信UA检测：通过User-Agent判断是否在微信内打开
  3. JS-SDK集成：需要分享、拍照等高级功能时才用，得在公众号后台配置安全域名
  4. 样式适配：注意iOS/Android的差异，特别是滚动和点击效果

部署注意：

  • 服务器需要HTTPS（微信要求）
  • 公众号后台配置网页授权域名和JS接口安全域名
  • 避免使用Flash和自动播放视频

一句话建议： 就当普通移动端网页开发，额外处理好微信的JS-SDK和分享功能就行。

回到顶部