Now read it roughly on the official website to understand some of its concepts and grammatical rules.
Then let's create a uniapp project. The development software we need is Hbuilder and wechat developer tools
Double click Hbuilder to open and create a uni app project
This is the default project structure after creation
pages.json is a page routing configuration. Almost all pages need to be declared in this file
The page folder stores pages (. vue files, standard front end)
App.vue that has learned java can be regarded as the startup class in springboot
Other files and folders are left aside for the time being
Next, learn to run a uni app project (wechat applet)
After running successfully, the wechat developer tool will be automatically called out
The above figure is the wechat developer tool automatically called out
We need to review some of the things we saw on the official website and have an impression in our mind
uni-app Components are basic constituent units. Each component has a start tag, an end tag, content, attributes and attribute values
The root node of each. vue file must be < template >, and there must be and only one < View > node under < template >
Next, understand what the colon before the attribute name means. The identification attribute value is not a string, but js. Digest it and we'll use it later
When the attribute value is js, add a colon in front of the attribute. For example: disable="false"
In the uni app, each component has these attributes: id ref class style hidden data-* @*
data-* Custom properties
@*Component events with event handlers
Well, you can start to create a new page. It is no longer an html page. Create it under the pages file and experience the colon syntax and the basic format of the. vue file. After learning the basic use of vue, it will be very easy to get started.
So if you read this article and haven't used vue, you'd better use and learn vue first
Components in uni app are divided into basic components and extension components. Extension components need to be imported before they can be used
The basic components are: View Scroll view scrolls the view container swiper slider view container (Carousel) text rich-text progress button checkbox editor form input lable picker pop up list selector navigator audio camera image video map ad
The components supported by uni app are divided into vue components and applet custom components
Here's a little bit of knowledge, because I'm a back-end programmer. I still don't understand ES6 when I touch the front-end. In fact, according to my boss, ES6 can be regarded as js. As long as it's clear that ES6 adds a let command to declare variables, the usage is similar to var, which is only valid in the code block where the let command is located
How to judge whether you are using es5 or es6? Let's start with whether there is a let command
Next, we advanced because the boss asked to make such a page (in fact, there are more than one, many, but don't worry, listen to me)
First, the first page
How do you start? To get started quickly, you should learn to learn from (copy) and imitate (attack)
You must have a question about how this page comes out. We can open pages.json and configure it
{
"pages": [ //The first item in the pages array represents the application startup page. Refer to: https://uniapp.dcloud.io/collocation/pages
{
"path" : "pages/order/order",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/loginWX/loginWX",
"style": {
"navigationBarTitleText": "uni-app"
}
},
{
"path" : "pages/test1/test1",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
},
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
,{
"path" : "pages/itooktheorder/itooktheorder",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
,{
"path" : "pages/detail/detail",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
},
"tabBar": {
"color": "#C0C4CC",
"selectedColor": "#b25858",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [{
"pagePath": "pages/order/order",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png",
"text": "I'm the receptionist"
},
{
"pagePath": "pages/test1/test1",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png",
"text": "I'm the sender"
}
]
}
}
Don't be afraid of such a large code block. In fact, the key section is in the screenshot. Needless to say, the page is the test1.vue file under test1 under pages.
<template>
<view class="content">
<view class="navbar">
<view
v-for="(item, index) in navList" :key="index"
class="nav-item"
:class="{current: tabCurrentIndex === index}"
@click="tabClick(index)"
>
{{item.text}}
</view>
</view>
<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
<view v-for="(item,index) in tabItem.orderList" :key="index" class="order-item">
<view class="i-top b-b">
<text class="time">{{item.toCreateData}}</text>
<text class="state" :style="{color: item.stateTipColor}">{{item.stateTip}}</text>
<text v-if="item.toStatus===0" class="del-btn yticon icon-iconfontshanchu1" @click="deleteOrder(index)"></text>
</view>
<view class="order_title">
{{item.toTitle}}
</view>
<view class="price-box">
{{orderstatusMap[item.toStatus]}}
<text class="price">{{item.toPrice}}</text>
</view>
<view class="action-box b-t" v-if="item.state != 9">
<button class="action-btn" @click="cancelOrder(item)" >cancellation of order</button>
<button class="action-btn recom" v-show="item.toStatus===80001||item.toStatus===80002">Immediate payment</button>
</view>
</view>
</scroll-view>
</swiper-item>
</swiper>
</view>
</template>
<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from "@/components/empty";
import Json from '@/Json';
export default {
components: {
uniLoadMore,
empty
},
data() {
return {
orderstatusMap:{
0:"Waiting list",
1:"have in hand",
2:"Completed",
3:"Cancelled",
4:"Received order",
6:"To be paid",
80001:"",},
tabCurrentIndex: 0,
navList: [{
state: 0,
text: 'whole',
loadingType: 'nomore',
orderList: []
},
{
state: 9,
text: 'Waiting list',
loadingType: 'nomore',
orderList: []
},
{
state: 8,
text: 'To be paid',
loadingType: 'nomore',
orderList: []
},
{
state: 1,
text: 'have in hand',
loadingType: 'more',
orderList: []
},
{
state: 2,
text: 'Completed',
loadingType: 'nomore',
orderList: []
},
{
state: 3,
text: 'Cancelled',
loadingType: 'nomore',
orderList: []
}
],
};
},
onLoad(options){
/**
* Fix the problem that the app endpoint does not load data when clicking the button except all orders
* Replace the code under onLoad
*/
this.tabCurrentIndex = +options.state;
// #ifndef MP
this.loadData()
// #endif
// #ifdef MP
if(options.state == 0){
this.loadData()
}
// #endif
},
mounted(){
console.log(this.orderstatusMap["5"])
},
methods: {
//Get order list
loadData(source){
//Here is to attach the order to the tab list
let index = this.tabCurrentIndex;
let navItem = this.navList[index];
let state = navItem.state;
// if(source === 'tabChange' && navItem.loaded === true){
// //The tab switch only needs to load data for the first time
// return;
// }
// if(navItem.loadingType === 'loading'){
// //Prevent repeated loading
// return;
// }
navItem.loadingType = 'loading';
navItem.orderList = [],
setTimeout(()=>{
let orderList
//Get order list get all data
uni.request({
url:"http://192.168.1.108:8088/getWorkOrderByF",
data:{
token:uni.getStorageSync('userToken'),
status:state
},method:"GET",
success: (res) => {
console.log(1111)
console.log(res);
orderList = res.data.data
console.log("Get list of")
console.log(orderList)
orderList.forEach(item=>{
navItem.orderList.push(item);
})
//The new loaded field is used to indicate that the data has been loaded. If it is empty, a blank page can be displayed
this.$set(navItem, 'loaded', true);
//Judge whether there is any data. Change it to more and not to noMore
navItem.loadingType = 'nomore';
}
})
}, 600);
},
//swiper switching
changeTab(e){
this.tabCurrentIndex = e.target.current;
this.loadData('tabChange');
},
//Click the top tab
tabClick(index){
this.tabCurrentIndex = index;
},
//Delete order
deleteOrder(index){
uni.showLoading({
title: 'Please wait'
})
setTimeout(()=>{
this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
uni.hideLoading();
}, 600)
},
//cancellation of order
cancelOrder(item){
uni.showModal({
title: 'Tips',
content: 'Are you sure to cancel?',
success: function (res) {
if (res.confirm) {
console.log('The user clicks OK');
console.log(3333)
console.log(item.toOrderNumber)
setTimeout(()=>{
uni.request({
url:"http://192.168.1.108:8088/wo/updateStatusOwner",
data:{
token:uni.getStorageSync('userToken'),
toOrderNumber:item.toOrderNumber
},
method:"POST",
header: {
'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
},
success: (res) => {
console.log(1111)
console.log(res);
console.log("Get list of")
// orderList.forEach(item=>{
// navItem.orderList.push(item);
// })
// //The new loaded field is used to indicate that the data has been loaded. If it is empty, a blank page can be displayed
// this.$set(navItem, 'loaded', true);
// //Judge whether there is any data. Change it to more and not to noMore
// navItem.loadingType = 'nomore';
uni.showToast({
title: 'Cancellation succeeded',
duration: 2000
});
}
})
}, 600)
} else if (res.cancel) {
console.log('The user clicks cancel');
}
}
});
},
//Order status text and color
orderStateExp(state){
let stateTip = '',
stateTipColor = '#fa436a';
switch(+state){
case 1:
stateTip = 'Pending payment'; break;
case 2:
stateTip = 'To be shipped'; break;
case 9:
stateTip = 'Order closed';
stateTipColor = '#909399';
break;
//More customization
}
return {stateTip, stateTipColor};
}
},
}
</script>
<style lang="scss">
page, .content{
background: $page-color-base;
height: 100%;
}
.swiper-box{
height: calc(100% - 40px);
}
.list-scroll-content{
height: 100%;
}
.navbar{
display: flex;
height: 40px;
padding: 0 5px;
background: #fff;
box-shadow: 0 1px 5px rgba(0,0,0,.06);
position: relative;
z-index: 10;
.nav-item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 15px;
color: $font-color-dark;
position: relative;
&.current{
color: $base-color;
&:after{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 44px;
height: 0;
border-bottom: 2px solid $base-color;
}
}
}
}
.uni-swiper-item{
height: auto;
}
.order-item{
display: flex;
flex-direction: column;
padding-left: 30upx;
background: #fff;
margin-top: 16upx;
.i-top{
display: flex;
align-items: center;
height: 80upx;
padding-right:30upx;
font-size: $font-base;
color: $font-color-dark;
position: relative;
.time{
flex: 1;
}
.state{
color: $base-color;
}
.del-btn{
padding: 10upx 0 10upx 36upx;
font-size: $font-lg;
color: $font-color-light;
position: relative;
&:after{
content: '';
width: 0;
height: 30upx;
border-left: 1px solid $border-color-dark;
position: absolute;
left: 20upx;
top: 50%;
transform: translateY(-50%);
}
}
}
/* Multiple items */
.goods-box{
height: 160upx;
padding: 20upx 0;
white-space: nowrap;
.goods-item{
width: 120upx;
height: 120upx;
display: inline-block;
margin-right: 24upx;
}
.goods-img{
display: block;
width: 100%;
height: 100%;
}
}
/* Single commodity */
.goods-box-single{
display: flex;
padding: 20upx 0;
.goods-img{
display: block;
width: 120upx;
height: 120upx;
}
.right{
flex: 1;
display: flex;
flex-direction: column;
padding: 0 30upx 0 24upx;
overflow: hidden;
.title{
font-size: $font-base + 2upx;
color: $font-color-dark;
line-height: 1;
}
.attr-box{
font-size: $font-sm + 2upx;
color: $font-color-light;
padding: 10upx 12upx;
}
.price{
font-size: $font-base + 2upx;
color: $font-color-dark;
&:before{
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
}
.price-box{
display: flex;
justify-content: flex-end;
align-items: baseline;
padding: 20upx 30upx;
font-size: $font-sm + 2upx;
color: $font-color-light;
.num{
margin: 0 8upx;
color: $font-color-dark;
}
.price{
font-size: $font-lg;
color: $font-color-dark;
&:before{
content: '￥';
font-size: $font-sm;
margin: 0 2upx 0 8upx;
}
}
}
.action-box{
display: flex;
justify-content: flex-end;
align-items: center;
height: 100upx;
position: relative;
padding-right: 30upx;
}
.action-btn{
width: 160upx;
height: 60upx;
margin: 0;
margin-left: 24upx;
padding: 0;
text-align: center;
line-height: 60upx;
font-size: $font-sm + 2upx;
color: $font-color-dark;
background: #fff;
border-radius: 100px;
&:after{
border-radius: 100px;
}
&.recom{
background: #fff9f9;
color: $base-color;
&:after{
border-color: #f7bcc8;
}
}
}
}
/* load-more */
.uni-load-more {
display: flex;
flex-direction: row;
height: 80upx;
align-items: center;
justify-content: center
}
.uni-load-more__text {
font-size: 28upx;
color: #999
}
.uni-load-more__img {
height: 24px;
width: 24px;
margin-right: 10px
}
.uni-load-more__img>view {
position: absolute
}
.uni-load-more__img>view view {
width: 6px;
height: 2px;
border-top-left-radius: 1px;
border-bottom-left-radius: 1px;
background: #999;
position: absolute;
opacity: .2;
transform-origin: 50%;
animation: load 1.56s ease infinite
}
.uni-load-more__img>view view:nth-child(1) {
transform: rotate(90deg);
top: 2px;
left: 9px
}
.uni-load-more__img>view view:nth-child(2) {
transform: rotate(180deg);
top: 11px;
right: 0
}
.uni-load-more__img>view view:nth-child(3) {
transform: rotate(270deg);
bottom: 2px;
left: 9px
}
.uni-load-more__img>view view:nth-child(4) {
top: 11px;
left: 0
}
.load1,
.load2,
.load3 {
height: 24px;
width: 24px
}
.load2 {
transform: rotate(30deg)
}
.load3 {
transform: rotate(60deg)
}
.load1 view:nth-child(1) {
animation-delay: 0s
}
.load2 view:nth-child(1) {
animation-delay: .13s
}
.load3 view:nth-child(1) {
animation-delay: .26s
}
.load1 view:nth-child(2) {
animation-delay: .39s
}
.load2 view:nth-child(2) {
animation-delay: .52s
}
.load3 view:nth-child(2) {
animation-delay: .65s
}
.load1 view:nth-child(3) {
animation-delay: .78s
}
.load2 view:nth-child(3) {
animation-delay: .91s
}
.load3 view:nth-child(3) {
animation-delay: 1.04s
}
.load1 view:nth-child(4) {
animation-delay: 1.17s
}
.load2 view:nth-child(4) {
animation-delay: 1.3s
}
.load3 view:nth-child(4) {
animation-delay: 1.43s
}
@-webkit-keyframes load {
0% {
opacity: 1
}
100% {
opacity: .2
}
}
</style>
Experience the variable relations and method calls inside by yourself. There's no more nonsense. I'll see you next time.