创建移动端页面

创建

你只需要在后台打开页面管理 左上角创建接口页面
如下

创建后就能看见你创建的页面了

编辑是可以编辑里面的代码，这个页面就相当于是一个数据接口 页面采用div内部样式来布局【需要有html基础布局可以直接修改】

原型

完整的原型如下次

<?php 
namespace view\app\layout;
use think\facade\Db;
use think\facade\Request;
// +----------------------------------------------------------------------
// | 模板自定义扩展方法
// | Author @梦雨 QQ50361804
// +----------------------------------------------------------------------
class demo
{
    public $info = array(
        'open'=>1,
        'name'=>'示例页面',//页面描述
        'url'=>'/pages/mi/index?id=demo',//所有的url格式都是/pages/mi/index后面是参数
    );
    // 获取布局数据
    public function layout()
    {
        $data = array(
            'zhuti'=>'#00b0ff',//主题的背景样式不可以是白色背景或者留空
            'title'=>'示例页面',//头部标题
            'style'=>'padding: 20px;',//页面的容器配置
            'dataStyle'=>'',//页面的模块通用配置
            'dataModel'=>array(),
            'data'=>array(
                // 轮播图
                array(
                    'type'=>'swiper',
                    'style'=>'margin: 0 15px;',
                    'listStyle'=>'height: 130px; border-radius: 8px; overflow: hidden;',
                    'list'=>$this->swiper(),
                ),
                array(
                    'type'=>'html',//类型
                    'style'=>'font-size: 18px;',//当前框架的样式
                    'listsStyle'=>'margin-bottom: 10px;',//是在当前lists的父框架样式但是低于上面的style
                    'lists'=>array(
                        array(
                            'style' =>'',//当前模块的样式
                            'url'=>'/pages/mi/index?id=index',//跳转url
                            'type'=>'navigateTo',//跳转类型
                            'content' => '<div style="color: red;">我是一个模块我只能用div包裹</div>'
                        ),
                        array(
                            'style' =>'',//当前模块的样式
                            'url'=>'/pages/mi/index?id=index',//跳转url
                            'type'=>'navigateTo',//跳转类型
                            'content' => '<div style="color: #00b0ff;">我是一个模块我只能用div包裹</div>'
                        ),
                        array(
                            'style' =>'border: 1px solid red;',//当前整个模块的父样式
                            'content' => '<div style="color: #00b0ff;">我下面有子模块只能用div包裹</div>',
                            'listsStyle'=>'border: 1px solid #9e4848;',//子模块父样式
                            'lists'=>array(
                                array(
                                    'url'=>'/pages/mi/index?id=index',//跳转url
                                    'type'=>'navigateTo',//跳转类型
                                    'style' =>'',//控制当前content模块的父样式
                                    'content'=> '<div style="color: #00b0ff;">我是一个子模块我只能用div包裹</div>',
                                ),
                                array(
                                    'url'=>'/pages/mi/index?id=index',//跳转url
                                    'type'=>'navigateTo',//跳转类型
                                    'style' =>'font-size: 30px;',//控制当前content模块的父样式
                                    'content'=> '<div style="color: red;">我是一个子模块我只能用div包裹</div>',
                                ),
                            )
                        ),
                    )
                ),
                array(
                    'type'=>'html',//类型
                    'style'=>'',//当前框架的样式
                    'listsStyle'=>'',
                    'lists'=>$this->lists(),
                )
            ),
        );
        return json(array('code' => 1, 'msg' => '加载成功', 'data' => $data, 'scroll'=>0.01));
    }
    // 获取轮播图数据
    private function swiper()
    {
        $swiperData = array(
            array(
                'url'=>'/pages/mi/index?id=index',
                'pic'=>'/api/placeholder?w=600&h=300',
                'type'=>'navigateTo',
            ),
            array(
                'url'=>'/pages/mi/index?id=index',
                'pic'=>'/api/placeholder?w=600&h=300',
                'type'=>'navigateTo',
            ),
        );
        $swiper = [];
        foreach($swiperData as $x=>$vo){
            $swiper[$x] = array(
                'style'=>'width:100%; height:100%; border-radius:20rpx',
                'url'=>$vo['url'],//跳转url
                'type'=>$vo['type'],//跳转url
                'mode'=>'aspectFill',
                'pic'=> CheckUrl($vo['pic']),//图片链接一定要用CheckUrl()函数
            );
        }
        return $swiper;
    }
    // 模拟数据
    private function lists()
    {
        $listsData = array(
            array(
                'content'=>'我是一个新的大模块我只能用div包裹',
            ),
            array(
                'content'=>'我是一个新的大模块我只能用div包裹',
            ),
        );
        $lists = [];
        foreach($listsData as $x=>$vo){
            $lists[$x] = array(
                'style' =>'',//当前模块的样式
                'url'=>'/pages/mi/index?id=index',//跳转url
                'type'=>'navigateTo',//跳转类型
                'content' => '<div style="color: red;">'.$vo['content'].'</div>'
            );
        }
        return $lists;
    }
}