Next.js 开发微信公众号遇到的问题以及解决方案-JavaScript中文网-JavaScript教程资源分享门户

在使用 Next.js 开发微信公众号时，可能会遇到一些问题。本文将介绍一些常见的问题，并提供解决方案。

问题一：微信 JS-SDK 配置

微信公众号使用 JS-SDK 来实现一些功能，比如分享、支付等。在使用 Next.js 开发微信公众号时，需要将 JS-SDK 的配置信息传递给前端页面。但是，由于 Next.js 是一个服务器渲染框架，前端页面的代码是在服务器端运行的，因此需要一些特殊的处理方式。

解决方案：

在 Next.js 的 pages 目录下创建一个 _document.js 文件，该文件是 Next.js 中用于自定义 HTML 文档的组件。在 _document.js 中添加以下代码：

// javascriptcn.com 代码示例
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    const script = `
      wx.config({
        debug: false, // 开启调试模式
        appId: 'YOUR_APP_ID', // 必填，公众号的唯一标识
        timestamp: 'YOUR_TIMESTAMP', // 必填，生成签名的时间戳
        nonceStr: 'YOUR_NONCESTR', // 必填，生成签名的随机串
        signature: 'YOUR_SIGNATURE', // 必填，签名
        jsApiList: [ // 必填，需要使用的 JS 接口列表
          'updateAppMessageShareData',
          'updateTimelineShareData',
          'chooseWXPay'
        ]
      })
    `

    return (
      <Html>
        <Head>
          <script dangerouslySetInnerHTML={{ __html: script }} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

在服务器端生成 JS-SDK 配置信息，并将其传递给前端页面。可以使用 getInitialProps 方法来实现这个功能。具体代码如下：

// javascriptcn.com 代码示例
import axios from 'axios'

function Page({ data }) {
  return (
    <div>
      <p>{data.title}</p>
    </div>
  )
}

Page.getInitialProps = async ({ req }) => {
  const { data } = await axios.get('https://your-api.com/js-sdk')
  const script = `
    wx.config({
      debug: false, // 开启调试模式
      appId: '${data.appId}', // 必填，公众号的唯一标识
      timestamp: '${data.timestamp}', // 必填，生成签名的时间戳
      nonceStr: '${data.nonceStr}', // 必填，生成签名的随机串
      signature: '${data.signature}', // 必填，签名
      jsApiList: [ // 必填，需要使用的 JS 接口列表
        'updateAppMessageShareData',
        'updateTimelineShareData',
        'chooseWXPay'
      ]
    })
  `

  return {
    data,
    script
  }
}

export default Page

在前端页面中使用 dangerouslySetInnerHTML 方法将 JS-SDK 配置信息注入到 HTML 中。具体代码如下：

// javascriptcn.com 代码示例
import Head from 'next/head'

function Page({ data, script }) {
  return (
    <div>
      <Head>
        <script dangerouslySetInnerHTML={{ __html: script }} />
      </Head>
      <p>{data.title}</p>
    </div>
  )
}

Page.getInitialProps = async ({ req }) => {
  const { data } = await axios.get('https://your-api.com/js-sdk')
  const script = `
    wx.config({
      debug: false, // 开启调试模式
      appId: '${data.appId}', // 必填，公众号的唯一标识
      timestamp: '${data.timestamp}', // 必填，生成签名的时间戳
      nonceStr: '${data.nonceStr}', // 必填，生成签名的随机串
      signature: '${data.signature}', // 必填，签名
      jsApiList: [ // 必填，需要使用的 JS 接口列表
        'updateAppMessageShareData',
        'updateTimelineShareData',
        'chooseWXPay'
      ]
    })
  `

  return {
    data,
    script
  }
}

export default Page

问题二：微信支付

微信公众号使用微信支付来实现支付功能。在使用 Next.js 开发微信公众号时，需要将支付信息传递给服务器端进行处理，然后再将支付结果返回给前端页面。但是，由于 Next.js 是一个服务器渲染框架，前端页面的代码是在服务器端运行的，因此需要一些特殊的处理方式。

解决方案：

在服务器端生成支付信息，并将其返回给前端页面。可以使用 getInitialProps 方法来实现这个功能。具体代码如下：

// javascriptcn.com 代码示例
import axios from 'axios'

function Page({ data }) {
  return (
    <div>
      <button onClick={() => handlePay(data)}>支付</button>
    </div>
  )
}

Page.getInitialProps = async ({ req }) => {
  const { data } = await axios.get('https://your-api.com/pay')
  return { data }
}

export default Page

在前端页面中调用微信支付接口。具体代码如下：

// javascriptcn.com 代码示例
import axios from 'axios'

function handlePay(data) {
  axios.post('https://your-api.com/pay', { data })
    .then(res => {
      const { appId, timeStamp, nonceStr, package, signType, paySign } = res.data
      wx.chooseWXPay({
        appId,
        timeStamp,
        nonceStr,
        package,
        signType,
        paySign,
        success: function (res) {
          console.log('支付成功')
        },
        fail: function (res) {
          console.log('支付失败')
        }
      })
    })
    .catch(err => {
      console.log('支付失败')
    })
}

function Page({ data }) {
  return (
    <div>
      <button onClick={() => handlePay(data)}>支付</button>
    </div>
  )
}

Page.getInitialProps = async ({ req }) => {
  const { data } = await axios.get('https://your-api.com/pay')
  return { data }
}

export default Page

总结

在使用 Next.js 开发微信公众号时，需要特别注意服务器渲染的特殊性。本文介绍了一些常见的问题，并提供了相应的解决方案。希望对大家有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655084277d4982a6eb954faf