uniapp項目

uniapp介紹

uniapp官網

uni-app 是一個使用 Vue.js 開發所有前端應用的架構，開發者編寫一套代碼，可釋出到iOS、Android、Web（響應式）、以及各種小程式（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應用等多個平台。

DCloud公司擁有800萬開發者使用者，幾十萬應用案例、12億手機端月活使用者，數千款uni-app插件、70+微信/qq群。阿裡小程式工具官方内置uni-app（詳見），騰訊課堂官方為uni-app錄制教育訓練課程（詳見），開發者可以放心選擇。

uni-app在手，做啥都不愁。即使不跨端，uni-app也是更好的小程式開發架構（詳見）、更好的App跨平台架構、更友善的H5開發架構。不管上司安排什麼樣的項目，你都可以快速傳遞，不需要轉換開發思維、不需要更改開發習慣。

HBuilderX

HBuilderX：官方IDE下載下傳位址

打開HBuilderX建立項目

項目目錄

運作到浏覽器即可

元件選擇

我們在插件市場選擇下載下傳量大，文檔清晰的元件使用

網址

安裝 uView

使用

參考文檔使用元件即可

使用 uView 元件中Tabbar 底部導航欄

我們想要底部導航欄有凸起效果，可以使用uView 元件中Tabbar 底部導航欄

結合教程，我們去使用vuex即可

安裝vuex

NPM

npm install vuex --save

#Yarn

yarn add vuex

建立store目錄

定義資料

/**
 *  存放 tabbar資料
 * **/
import * as types from '../mutation-type';
const state = {
	name: "",
	tabbarList: [{
			iconPath: "home",
			selectedIconPath: "home-fill",
			text: '首頁',
			count: 1,
			isDot: true,
			pagePath: "/pages/home/index"
		},
		{
			iconPath: "/static/uview/example/component.png",
			selectedIconPath: "/static/uview/example/component_select.png",
			text: '元件',
			count: 2,
			isDot: true,
			pagePath: "/pages/index/index"
		},
		{
			iconPath: "/static/uview/example/js.png",
			selectedIconPath: "/static/uview/example/js_select.png",
			text: '工具',
			midButton: true,
			pagePath: "/pages/js/index"
		},
		{
			iconPath: "/static/uview/example/template.png",
			selectedIconPath: "/static/uview/example/template_select.png",
			text: '模闆',
			pagePath: "/pages/template/index"
		},
		{
			iconPath: "/static/uview/example/template.png",
			selectedIconPath: "/static/uview/example/template_select.png",
			text: '個人中心',
			pagePath: "/pages/template/index"
		},
	]
}
// getters
const getters = {
	userInfo(state) {
		return state.name;
	},
};

// actions
// 異步方法用actions
// actions不能直接修改全局變量，需要調用commit方法來觸發mutation中的方法
const actions = {
	login(context, payload) {
		context.commit('login', payload);
	},

};

// mutations
const mutations = {};

export default {
	namespaced: true,
	state,
	getters,
	actions,
	mutations,
};

           

入口檔案使用store

import Vue from 'vue'
import App from './App'
import store from './store/index.js'
Vue.config.productionTip = false

App.mpType = 'app'

// 引入全局uView
import uView from 'uview-ui';
Vue.use(uView);

/* const app = new Vue({
    ...App
}) */
const app = new Vue({
	store,
	render:h => h(App)
})
app.$mount()

           

元件中使用tabbar

<template>
	<view class="content">
		<image class="logo" src="/static/uview/common/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<u-tabbar :list="tabbar" :mid-button="true"></u-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '工具',
				tabbar: ''
			}
		},
		onLoad() {
			this.tabbar = this.$store.getters.tabbarList;}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

           

tabbar效果