第一个uni-app

通过HBuilder X创建

pages.json 

配置tabBar，至少两个

	"tabBar": {
		"selectedColor": "#1bac9d",
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页",
				"iconPath": "static/tabs/home_default.png",
				"selectedIconPath": "static/tabs/home_selected.png"
			},
			{
				"pagePath": "pages/mine/mine",
				"text": "我的",
				"iconPath": "static/tabs/user_default.png",
				"selectedIconPath": "static/tabs/user_selected.png"
			}
		]
	},

配置路由，标题

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path" : "pages/mine/mine",
			"style" : 
			{
				"navigationBarTitleText" : "我的"
			}
		}
	],

窗口默认表现

"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#1bac9d",
		"backgroundColor": "#F8F8F8"
	},

第一个页面，轮播图效果

  <swiper class="banner" indicator-dots circular :autoplay="false">
  		<swiper-item v-for="item in pictures" :key="item.id">
  			<image @tap="onPreviewImage(item.url)" :src="item.url"></image>
  		</swiper-item>
  	</swiper>

		pictures: [
						{ id: '1', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg" },
						{ id: '2', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_2.jpg" },
						{ id: '3', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_3.jpg" },
						{ id: '4', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_4.jpg" },
						{ id: '5', url: "https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_5.jpg" },
					]

		methods: {
          onPreviewImage(url){
			  wx.previewImage({
			  urls:this.pictures.map(v=>v.url),
			  current:url//大图浏览
			  })
		  }
		}

 

 通过命令行创建

D:\uni-app>npx degit dcloudio/uni-preset-vue#vite-ts uni-app-vue3-ts

npm i

npm run dev:mp-weixin

导入微信开发者工具

用vscode开发uni-app项目

配置