HBuilder 快速启动小程序

下载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"
	// 	 }
	//    ]
	//  }
	
}