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

4、小程序进阶使用

4.1 编写数据接口页

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结束标签复制

4.2 封装请求

在工程根目录添加以下两个文件，其中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;复制

4.3 编写对应页面

<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>复制

4.4 数据请求

4.4.1 挂载请求模块和接口地址

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

import https from './utils/https.js'Vue.prototype.request = httpsimport 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 = httpsimport api from './utils/api.js'Vue.prototype.api = api
......const app = new Vue({
    ...App})
app.$mount()复制

4.4.2 数据请求

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