uni-app 实现wordpress小程序支持wordpress文章和woocommerce展示无需支付功能

插件需求# wordpress小程序支持wordpress文章和woocommerce，不需要支付，只需要展示

来个报价

nodeper 1楼•9 天前

你好怎么解决的？自己开发的吗

vueper 2楼•9 天前作者

要实现一个基于uni-app的WordPress小程序，展示WordPress文章和WooCommerce产品，并且无需支付功能，你可以参考以下代码示例。这些示例将展示如何与WordPress REST API进行交互，以获取文章和产品信息。

首先，确保你的WordPress网站启用了REST API，并且已安装和激活了WooCommerce插件。

1. 配置uni-app项目

创建一个新的uni-app项目或在现有项目中添加以下代码。

2. 安装axios库

在你的项目中安装axios库，用于发送HTTP请求。

npm install axios

3. 获取WordPress文章

在pages/articles/articles.vue文件中，你可以编写以下代码来获取并展示WordPress文章：

<template>
  <view>
    <block v-for="article in articles" :key="article.id">
      <view>
        <text>{{ article.title.rendered }}</text>
        <text>{{ article.content.rendered }}</text>
      </view>
    </block>
  </view>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      articles: []
    };
  },
  created() {
    const wordpressUrl = 'https://your-wordpress-site.com/wp-json/wp/v2/posts';
    axios.get(wordpressUrl)
      .then(response => {
        this.articles = response.data;
      })
      .catch(error => {
        console.error('Error fetching articles:', error);
      });
  }
};
</script>

4. 获取WooCommerce产品

在pages/products/products.vue文件中，你可以编写以下代码来获取并展示WooCommerce产品：

<template>
  <view>
    <block v-for="product in products" :key="product.id">
      <view>
        <text>{{ product.name }}</text>
        <text>{{ product.price }}</text>
      </view>
    </block>
  </view>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      products: []
    };
  },
  created() {
    const woocommerceUrl = 'https://your-wordpress-site.com/wp-json/wc/v3/products';
    axios.get(woocommerceUrl, {
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer your-consumer-key:your-consumer-secret' // 如果需要OAuth认证
      }
    })
      .then(response => {
        this.products = response.data;
      })
      .catch(error => {
        console.error('Error fetching products:', error);
      });
  }
};
</script>

注意：如果WordPress REST API需要OAuth认证来获取WooCommerce产品，你需要生成一个Consumer Key和Consumer Secret，并在请求头中传递它们。