小程序项目 (使用uniapp) 创建主要的组件

首页:

        表示最外层的盒子 ,在盒子里面使用不同的组件,要在最外层调用获取数据的方法,然后再传给子组件,子组件用 props 进行接收并使用,获取数据的方法必须在 onLoad() {} 中调用

       使用子组件必须将子组件放在根文件夹中的 components 中,如果项目中没有需要自己添加一个,在文件夹中存放不同的组件文件夹,在各自的组件文件夹中创建同名的vue文件,创建好后在各自组件的vue文件中写 name 属性,值为组件名(标签名),最后在父组件中使用即可 

       各个组件的样式要放在自己的组件之中,, 并且要使用scoped 表示只是作用于本文件(本组件),在别的文件中如果有同样的类名不会被影响到

封装方法 uni.$showMsg()

在main.js 文件中添加

import App from './App'
import Vue from 'vue'
import uView from '@/uni_modules/uview-ui'
Vue.use(uView);
// 导入网络请求的包
import {
	$http
} from '@escook/request-miniprogram'
uni.$http = $http
// 请求的根路径
$http.baseUrl = 'https://www.uinav.com'
// 请求拦截器
$http.beforeRequest = function(options) {
	uni.showLoading({
		title: '数据加载中'
	})
}
// 响应拦截器
$http.afterRequest = function() {
	uni.hideLoading()
}
//-----------------------------------------------------------------------------------------------------------------------------
// 封装自定义弹框的方法, 获取失败显示,title表示提示文本,duration表示在1500毫秒后自动隐藏,icon表示图标,在这里不需要图标,所以直接写none
uni.$showMsg = function(title = '数据加载失败!', duration = 1500) {
	uni.showToast({
		title,
		duration,
		icon: 'none ',
	})
}
//-------------------------------------------------------------------------------------------------------------------------------
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})
app.$mount()
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	return {
		app
	}
}

 子组件使用 props 接收参数

        子组件使用 props 接收参数时可以写成数组样式(props: ['swiperList']) 例如轮播图组件方法一

        子组件使用 props 接收参数时也可以写成对象形式,属性就是接收的数据,值为一个对象,值中可以存放数据类型,默认值,是否必传(需要哪个写哪个),例如轮播图组件方法二

props: {
            swiperList: {
                type: Array,     //数据类型
                default: [],       //默认值
                required:true  //必传属性,可选值:false
            },
        },

 轮播图组件,方法一

        使用 uniapp 原生的标签,我试了下,在最外层不写 view 外盒子,但是据大佬们说还是加上好,之后使用过程可能会有bug,所以我就加上了

 轮播图组件,方法二

使用 uview 组件库中的的标签,在使用前需要安装插件,安装方法可以参照如下链接

uni app 使用uview_QiQi613的博客-CSDN博客

分类导航组件

 楼层组件