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.