FA CMS 手册 第四部分 小程序进阶使用

CMS插件已包含了基本的小程序数据接口，控制器放在 /addons/cms/controller/wxapp 目录下，您可以根据需要自行添加新的控制器（数据接口）。

例如，我们在ColorUI模版添加一个 home/home.vue 页面，希望将一些区块数据调取出来，这时，我们只需要复制现有的Index.php控制器，重命名为Home.php（注意首字母大写），然后编辑这个文件

<?php

......

/**
 * 首页
 */
class Home extends Base // 将Index改为Home 注意首字母大写 
{
    ......

    /**
     * 将来的接口就是
     * https://host/addons/cms/wxapp.home/index 这里的home默认可以是小写
     */
    public function index()
    {
        $indexfocusList = [];
        // 获取indexfocus区块数据，限制3条，asc排序
        $list = Block::getBlockList(['name' => 'indexfocus', 'row' => 3, 'orderway' => 'asc']); 
        // 遍历$list数组，取值拼接新的数组
        foreach ($list as $index => $item) { 
            $indexfocusList[] = ['image' => cdnurl($item['image'], true), 'url' => $item['url'], 'title' => $item['title'], 'content' => $item['content']];
        }

        $archivesList = [];
        // 获取channel_id为['2','3','4','5','6']的内容列表
        $list = Archives::where('status', 'normal')
            ->where('channel_id', 'in', ['2','3','4','5','6'])
            ->order('weigh desc,id desc')
            ->cache(false)
            ->select();
        // 遍历$list数组，取值拼接新的数组
        foreach ($list as $index => $item) {
            $archivesList[] = ['id' => $item['id'], 
                'channel_id' => $item['channel_id'], 
                'model_id' => $item['model_id'], 
                'title' => $item['title'], 
                'diyname' => $item['diyname'], 
                'description' => $item['description'], 
                'image' => $item['image'], 
                'tags' => $item['tags'], 
                'views' => $item['views'], 
                'likes' => $item['likes'], 
                'comments' => $item['comments'], 
                'url' => $item['url']
            ];
        }
        // 组合数据并返回
        $data = [
            'indexfocusList' => $indexfocusList,
            'archivesList' => $archivesList,
        ];
        $this->success('', $data);
    }
}

// 注意没有php结束标签

在工程根目录添加以下两个文件，其中https.js为通用请求模块，api.js为接口地址，后面将挂到Vue上，便于随时调用。

/utils/https.js 通用请求

module.exports = (param) =>{
    let url = param.url;
    let method = param.method;
    let header = param.header || {};
    let data = param.data || {};
    
    if(method){
        method = method.toUpperCase();
        if(method == "POST"){
            header = {"Content-Type": "application/x-www-form-urlencoded"}
        }
    }
    
    if(!param.hideLoading){
        uni.showLoading({
            title:"加载中..."
        })
    }
    
    uni.request({
        url: url,
        method: method || "GET",
        header: header,
        data: data,
        success: res => {
            if(res.statusCode && res.statusCode != 200){
                uni.showModal({
                    content: res.msg
                });
                return;
            }
            typeof param.success == "function" && param.success(res.data);
        },
        fail: (e) => {
            uni.showModal({
                content: e.msg
            });
            typeof param.fail == "function" && param.fail(e.data);
        },
        complete: () => {
            console.log("request complete.")
            uni.hideLoading();
            typeof param.complete == "function" && param.complete();
            return;
        }
    })
}

/utils/api.js 接口地址

const host = "https://host/"
const apiPath = "addons/cms/wxapp."
const api = {
    getHomeData: host + apiPath + 'home/index',
    getCasesData: host + apiPath + 'cases/index'
}

module.exports = api;

<template name="home">
    <scroll-view scroll-y class="page">
        <swiper class="screen-swiper" :class="dotStyle?'square-dot':'round-dot'" :indicator-dots="true" :circular="true"
         :autoplay="true" interval="5000" duration="500">
            <swiper-item v-for="(item,index) in indexfocusList" :key="index">
                <image :src="item.image" mode="aspectFill"></image>
                <view class="swiper-item-box">
                    <text class="item-title text-bold">{{item.title}}</text>
                    <text class="item-content">{{item.content}}</text>
                </view>
            </swiper-item>
        </swiper>
        ......
        <view class="cu-tabbar-height"></view>
    </scroll-view>
</template>

<script>
......
</script>

<style>
......
</style>

在 import App from './App' 下方添加下面的代码

import https from './utils/https.js'
Vue.prototype.request = https

import api from './utils/api.js'
Vue.prototype.api = api

添加之后的结构大概如下：

import Vue from 'vue'
import App from './App'

import https from './utils/https.js'
Vue.prototype.request = https

import api from './utils/api.js'
Vue.prototype.api = api

......

const app = new Vue({
    ...App
})
app.$mount()

GetHomeData() {
    this.request({
        url: this.api.getHomeData,
        success: res => {
            console.log(res);
        }
    });
}