uniapp小程序

前端Mu偶人
493 阅读2分钟

uniapp创建项目

HbuilderX 安装配置完毕后，我们就可以开始开发了，首先我们需要创建一个项目，我们点击ide左上角 文件-> 新建 ->项目 ，然后我们选择 uniapp 项目 ，模板选择 默认模板

创建完成后，我们可以看到左侧文件树中新增了一个以项目名命名的文件，其中是hbuilder为我们内置的项目模板

以下是uniapp给我们的项目框架介绍

┌─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
├─packone               业务页面文件存放的目录(分包)
│  ├─goods
│  │  └─goods.vue       goods页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意： 静态资源只能存放于此
├─node_modules          存放[uni_module](/uni_modules)规范的插件。
├─wxcomponents          存放小程序组件的目录，详见
├─utils                 存放小程序工具  
   └─request.js         封装api请求                             
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
└─uni.scss              这里是uni-app内置的常用样式变量
    
复制代码

在pages中依照业务功能来创建功能分类文件夹，最常见的是按照首页的tabbar来区分功能模块，每一个文件夹中存放该功能涉及的所有页面，且每一个功能文件夹中还有一个单独的components文件夹用于放置该仅功能文件夹中的页面依赖的组件。

配置 pages.json

  1. pages配置

    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "主页"
            }
        },{
            "path": "pages/sort/sort",
            "style": {
                "navigationBarTitleText": "分类"
            }
        },{
            "path": "pages/shop/shop",
            "style": {
                "navigationBarTitleText": "购物车"
            }
        },{
            "path": "pages/mind/mind",
            "style": {
                "navigationBarTitleText": "我的"
            }
        }
    ],

  2. tabBar配置

"tabBar": {
            "color": "#2c2c2c",
            "selectedColor": "#d81e06",
            "list": [
                {
                    "pagePath": "pages/index/index",
                    "iconPath": "/static/tabbar/index.png",
                    "selectedIconPath": "/static/tabbar/index_cur.png",
                    "text": "主页"
                },
                {
                    "pagePath": "pages/sort/sort",
                    "iconPath": "/static/tabbar/order.png",
                    "selectedIconPath": "/static/tabbar/order_cur.png",
                    "text": "分类"
                },
                {
                    "pagePath": "pages/shop/shop",
                    "iconPath": "/static/tabbar/shop.png",
                    "selectedIconPath": "/static/tabbar/shop_cur.png",
                    "text": "购物车"
                },
                {
                    "pagePath": "pages/mind/mind",
                    "iconPath": "/static/tabbar/me.png",
                    "selectedIconPath": "/static/tabbar/me_cur.png",
                    "text": "我的"
                }
            ]
        },
  1. 分包 packone/goods/goods
    // 分包
    "subPackages": [
        {
          // 子包的根目录
          "root": "packone",
          // 子包由哪些页面组成
          "pages": [
            {
              "path": "goods/goods",
              "style": {
                "navigationBarTitleText": "详情"
              }
            }
          ]
        }
      ],

\

封装请求

/utils/request.js

const BASE_URL ='http://192.168.1.120:8084/api'
​
export const myRequest=(option)=>{
    return new Promise((resolve,reject)=>{
        uni.request({
            url:BASE_URL+option.url,
            method:option.method || 'GET',
            data:option.data || {},
            success:(res)=>{
                if(res.data.meta.status !==200){
                    return uni.showToast({
                        title:'获取数据失败！'
                    })
                }
                resolve(res)
            },
            fail: (err) => {
                return uni.showToast({
                    title:'获取接口失败'
                })
                reject(err);
            }
        })
    })
}

main.js引入

import {myRequest} from '@/utils/request.js'
Vue.prototype.$myRequest=myRequest

使用uview-ui

1. npm install uview-ui

2. main.js 引入

import uView from 'uview-ui'
Vue.use(uView)
// 调用setConfig方法，方法内部会进行对象属性深度合并，可以放心嵌套配置
// 需要在Vue.use(uView)之后执行
uni.$u.setConfig({
    // 修改$u.config对象的属性
    config: {
        // 修改默认单位为rpx，相当于执行 uni.$u.config.unit = 'rpx'
        unit: 'rpx'
    },
    // 修改$u.props对象的属性
    props: {
        // 修改radio组件的size参数的默认值，相当于执行 uni.$u.props.radio.size = 30
        radio: {
            size: 15
        }
        // 其他组件属性配置
        // ......
    }
})

3 在uni.scss 引入样式

@import "uview-ui/theme.scss";

4 在app.vue 引入

<style lang="scss">
    /*每个页面公共css */
    @import "uview-ui/index.scss";
</style>

5 pages.json 配置

"easycom": {
            // 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"
            // "^u-(.*)": "@/uview-ui/components/u-$1/u-$1.vue"
            // npm安装方式
            "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
        }
​
avatar
文章
阅读
粉丝