Create a uniapp project

preparation: Download and install HBuilderX

1, Create project

Select uni app

Select the default template

  The directory structure is automatically generated

2, hello world

Run to browser for debugging

 

  The compilation process is shown below

  The pop-up browser page indicates successful operation

  Start writing code

1. Create a new page

Directly create a new page through the editor under pages.

Check register in pages.json and it will be automatically generated in the configuration file

  This automatically helps us configure the page in the pages.json file (similar to adding routes in Vue router)

  Next, we'll put our page in tabbar

2. tabbar configuration

For the field description of tabbar configuration, please refer to Official documents

"@ / pages.json" file

"tabBar": {
	    "color": "#7A7E83",
	    "selectedColor": "#3cc51f",
	    "borderStyle": "black",
	    "backgroundColor": "#ffffff",
	    "list": [{
	        "pagePath": "pages/index/index",
	        "iconPath": "static/logo.png",
	        "selectedIconPath": "static/logo.png",
	        "text": "assembly"
	    },
		{
		    "pagePath": "pages/demo/demo",
		    "iconPath": "static/logo.png",
		    "selectedIconPath": "static/logo.png",
		    "text": "demonstration"
		}]
	}

  3. Use the wiper component of uniapp

Use components directly in the page file according to the document

There are two points to pay attention to

1. Using the onLoad life cycle hook, call the getList method to obtain data from the background

2. The AIP uni.request is used to send network requests. The specific usage method is as follows: uni.request

<!-- @/pages/demo/demo.vue -->
<template>
	<view>
		<swiper style="height: 320rpx;" @change="changeCurrent" @click="clickBtn()" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item  v-for="(item,index) in bannerList" :key="index">
				<image class="swiper-img" :src="item.img_url" mode="scaleToFill" ></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerList:[],
				currentId:0
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList(pageNum=1,pageSize=10){
				let data = {
					page:pageNum
				}
				uni.request({
				    url: 'https://api.shop.eduwork.cn/api/index ', / / this is only an example, not a real interface address.
				    data: data,
				    success: (res) => {
				        console.log(res.data);
						this.bannerList = res.data.slides
				    }
				});
			},
			changeCurrent(e){
				this.currentId = e.detail.current
			},
			clickBtn(){
				console.log(this.currentId)
			},
		}
	}
</script>

<style>
	.swiper-img{
		width: 100%;
		height: 100%;
	}
</style>

4. Encapsulate the z-wiper component (click to obtain the current rotation chart data)

4-1. Create the components folder under the root directory. Note that if the path of easycom is not specified in the configuration file, it must be under the components folder of the root directory and comply with the components / component name / component name. vue directory structure.

  4-2. Create a component, directly create a new component in the components folder, select the default template and check create directory with the same name, and the editor will automatically generate files.

 

4-3, component related codes  

<!-- Self encapsulated swiper assembly -->
<template>
	<view  :style="{height:height + 'rpx'}" @click.stop="click">
		<swiper @change="changeCurrent" :indicator-dots="true" :autoplay="autoplay" :interval="3000" :duration="1000" :circular="true">
			<swiper-item  v-for="(item,index) in list" :key="index">
				<image class="swiper-img" :src="item[name] || item" mode="scaleToFill" ></image>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	/**
	 * @swiper Carousel chart component
	 * @property {list} Array of rotations
	 * @property {Boolean} autoplay Auto play
	 * @property {Number String} height Component height 
	 * @property {String} name list Picture fields in array
	 * @event {Function()} click Event triggered by clicking 
	 */
	export default {
		name:"z-swiper",
		props:{
			list:{
				type:Array,
				default(){
					return []
				}
			},
			autoplay:{
				type:Boolean,
				default:true
			},
			height:{
				type:[Number, String],
				default:320
			},
			name:{
				type:String,
				default:'image'
			},
		},
		data() {
			return {
				zCurrentId:0,
				zCurrent:{}
			};
		},
		methods:{
			changeCurrent(e){
				// console.log(e)
				this.zCurrentId = e.detail.current
				this.zCurrent = this.list[e.detail.current]
			},
			click(){
				this.$emit('click', {detail:this.zCurrent,index:this.zCurrentId});
			}
		}
	}
</script>

<style scoped>
 .swiper-img{
	 width: 100%;
 }
</style>

There are no complex functions encapsulated here, just as a demonstration to expose several properties and a click event.

/**
	 * @swiper Carousel chart component
	 * @property {list} Array of rotations
	 * @property {Boolean} autoplay Auto play
	 * @property {Number String} height Component height 
	 * @property {String} name list Picture fields in array
	 * @event {Function()} click Event triggered by clicking 
	 */

4-4, using custom components

You can use components directly where you need them, without import ing them

<z-swiper :list="bannerList" name="img_url" @click="clickSwiper"></z-swiper>

Here, only the data of the rotation chart and the field name of the defined picture url are passed in. Other familiar components use the default and handle a click event.