Day006 UniApp 开发 商品分类 列表页和设置页。

1. 创建分包和引入页面

1. 新增目录pages_goods
2. 在pages.json添加

    "subPackages": [ // 分包
        {
            "root": "pages_goods",
            "pages": []
        }
    ],

3. 新建页面

图片.png

2. 开发列表页

2.1 页面开发

1. 开发导航栏

在 category/list/list.vue

效果图

图片.png

2. 接入接口

在api下新建 goods 文件夹，在goods新建index.js和category.js
在 index.js 中：

import category from 'category.js'

export default {
    category
}

在 category.js 中：

import request from "@/util/request.js"

const app = 'goods'

// 详情 商品分类
function detail_goods_category(param){
    param.api = '/'+app+'/detail_goods_category'
    param.app = app
    param.name = '详情 商品分类'
    request.post_json_request(param)
}

// 查询 商品分类
function search_goods_category(param){
    param.api = '/'+app+'/search_goods_category'
    param.app = app
    param.name = '查询 商品分类'
    request.post_json_request(param)
}

// 保存 商品分类
function save_goods_category(param){
    param.api = '/'+app+'/save_goods_category'
    param.app = app
    param.name = '保存 商品分类'
    request.post_json_request(param)
}

export default {
    detail_goods_category,
    save_goods_category,
    search_goods_category
}

在pages_goods/category/list.vue中接入接口

将 env/index.js 中的默认环境改为dev

let env = env_dev // 默认是 生产环境

function setup_app_env() {
    let envType = uni.getStorageSync(app_define.ENV_TYPE)
    if (envType == undefined) {
        之前没有设置过
        this.main_host = env_dev.main_host
        this.cen_host = env_dev.cen_host
    }
}

查询商品分类的接口已经请求成功:

请求成功.png

3. 联调数据

在 list.vue 中：

效果图：

图片.png

4. 添加功能按钮

页面脚部功能按钮

列表项功能按钮

4. 开发设置页

5. 联调接口

6. 提交体验版