下载HBuilder X
创建项目
配置appid
配置小程序
新建uniapp页面
1.创建目录
2.目录下创建同名vue文件
首页内容 及应用组件 加点击事件 跳转案例
<template>
<view>
<image class="my" @click="toOrderList" src="/static/111.png" lazy-load>
</image>
<view class="root-a1" >
<view class="root-a1-b1"></view>
<view class="root-a1-b2">
<view>张三</view>
<view>18866666667</view>
</view>
</view>
<view>
</view>
<tabbar class="tabbar">
</tabbar>
</view>
</template>
<script>
import tabbar from '../../components/tabbar.vue';
export default {
components:{
tabbar
},
data() {
return {
tabbar
}
},
onLoad() {
uni.hideHomeButton();
},
methods: {
toOrderList(){
uni.navigateTo({
url:"/pages/user/order/my-order"
})
}
}
}
</script>
<style>
.tabbar .c4 {
color: #00C176;
}
.root-a1{
display: flex;
background-color: #00C176 ;
width: 750rpx;
height: 160rpx;
}
.root-a1-b1{
margin-left: 60rpx;
margin-top: 30rpx;
width: 84rpx;
height: 84rpx;
border-radius: 42rpx;
background-color: #ffffff;
}
.root-a1-b2{
margin-left: 30rpx;
margin-top: 30rpx;
color: #ffffff;
}
</style>
pages.js简单设置
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页",
"navigationBarTextStyle":"black"
}
}
,{
"path" : "pages/index2fenli/index2fenli",
"style" :
{
"navigationBarTitleText": "分类",
"navigationBarBackgroundColor": "#F2FFF8",
"navigationBarTextStyle":"black"
}
}
,{
"path" : "pages/index3car/index3car",
"style" :
{
"navigationBarTitleText": "购物车",
"enablePullDownRefresh": false,
"navigationBarTextStyle":"black"
}
}
,{
"path" : "pages/index4wode/index4wode",
"style" :
{
"navigationBarTitleText": "",
"navigationBarBackgroundColor":"#00C176"
}
}
// ,{
// "path" : "pages/index/components/d1"
// }
],
"globalStyle": {
"navigationBarTextStyle":"white",
// "navigationStyle": "custom",
"navigationBarBackgroundColor": "#ffffff",
"backgroundColor": "#ffffff"
}
// "tabBar": {
// "color": "#BAB9B9",
// "selectedColor": "#00C176",
// "borderStyle": "white",
// "backgroundColor": "#fff",
// "iconWidth":"10px",
// "list": [
// {
// "pagePath": "pages/index/index",
// // "pagePath": "pages/text/text",
// "text": "首页",
// "iconPath": "/static/imgs/tabbar/index.png",
// "selectedIconPath": "/static/imgs/tabbar/index2.png"
// },
// {
// "pagePath": "pages/index2fenli/index2fenli",
// "text": "分类",
// "iconPath": "/static/imgs/tabbar/fenlei.png",
// "selectedIconPath": "/static/imgs/tabbar/fenlei2.png"
// },
// {
// "pagePath": "pages/index3car/index3car",
// "text": "购物车",
// "iconPath": "/static/imgs/tabbar/car.png",
// "selectedIconPath": "/static/imgs/tabbar/car2.png"
// },
// {
// "pagePath": "pages/index4wode/index4wode",
// "text": "我的",
// "iconPath": "/static/imgs/tabbar/wode.png",
// "selectedIconPath": "/static/imgs/tabbar/wode2.png"
// }
// ]
// }
}