微信小程式使用uni-app開發小程式及部分功能實現詳解

"tabBar":{
	"selectedColor":"#C00000",
	"list":[
		{
			"pagePath":"pages/home/home",
			"text":"首頁",
			"iconPath":"static/c1.png",
			"selectedIconPath":"static/c2.png"
		},
		{
			"pagePath":"pages/cate/cate",
			"text":"分類",
			"iconPath":"static/c3.png",
			"selectedIconPath":"static/c4.png"
		},
		{
			"pagePath":"pages/cart/cart",
			"text":"購物車",
			"iconPath":"static/c5.png",
			"selectedIconPath":"static/c6.png"
		},
		{
			"pagePath":"pages/my/my",
			"text":"我的",
			"iconPath":"static/c7.png",
			"selectedIconPath":"static/c8.png"
		}
	]
}

//引入網路請求
import { $http } from '@escook/request-miniprogram';
uni.$http = $http;
//全域性baseUrl
$http.baseURL = "https://www.uinav.com";
//請求攔截器
$http.beforeRequest = function (options) {
  uni.showLoading({
  	title:"資料載入中..."
  })
}
//相應攔截器
$http.afterRequest = function () {
  uni.hideLoading()
}

//home
data() {
	return {
		swiperList:[]
	};
},
onLoad() {
	this.getSwiperList();
},
methods:{
	async getSwiperList(){
		let { data:res } = await uni.$http.get('介面地址')
		if(res.meta.status !== 200){
			return uni.showToast({
				title:"資料請求失敗",
				duration:1500,
				icon:"none"
			})
		}
		this.swiperList = res.message;
	}
}

"subPackages":[
	{
		"root":"subpackage",
		"pages":[]
	}
]

"subPackages":[
		{
			"root":"subpackage",
			"pages":[{
                    "path" : "goods_detail/goods_detail",
                    "style" :{
	                    "navigationBarTitleText": "",
	                    "enablePullDownRefresh": false
	                }
                }
            ]
		}
	]

uni.$showMsg = function(titie="請求失敗",duration=1000){
	uni.showToast({
		title,
		duration,
		icon:"none"
	})
}

//自定義元件
<template>
	<view class="my-search-container" :style="{'background-color':bgColor}">
		<view class="my-search-box" :style="{'border-radius':radius}">
			<uni-icons type="search" size="18"></uni-icons>
			<text class="placeholder">搜尋</text>
		</view>
	</view>
</template>
<script>
	export default {
		name:"my-search",
		props:{
			bgColor:{
				type:String,
				default:"#c00000"
			},
			radius:{
				type:String,
				default:"18px"
			}
		},
		methods:{
			//通過 $emit 來觸發父元件上繫結的自定義事件
			searchEvent(){
				this.$emit('myclick')
			}
		}
	}
</script>
<style lang="scss">
.my-search-container{
	height: 50px;
	// background-color: #c00000;
	display:flex;
	align-items: center;
	padding: 0 10px;
	.my-search-box{
		height: 36px;
		background-color: #FFF;
		// border-radius: 18px;
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		.placeholder{
			font-size: 15px;
			margin-left: 5px;
		}
	}
}
</style>

//父元件
<template>
	<view>
		<view class="suckTop">
			<my-search @myclick="goSearch" :radius="'0px'" :bgColor="'pink'"></my-search>
		</view>
	</view>
</template>
<script>
	export default {
		methods:{
			goSearch(){
				uni.navigateTo({
					url:"/subpackage/search/search"
				})
			}
		}
	}
</script>
<style lang="scss">
.suckTop{
	position: sticky;
	top: 0;
	z-index: 999;
}
</style>

<template>
	<view>
		<view class="suckTop">
			<uni-search-bar @input="input" :radius="18" :focus="true" cancelButton="none"></uni-search-bar>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				timer:null,
				kw:''
			}
		},
		methods: {
			//輸入框事件
			input(e){
				clearTimeout(this.timer)
				this.timer = setTimeout(_=>{
					this.kw = e.value;
				},500)
			}，
		}
	}
</script>
<style lang="scss">
.suckTop{
	position: sticky;
	top: 0;
	z-index: 999;
	.uni-searchbar {
		background-color: #c00000
	}
}
</style>

//存
uni.setStorageSync('kw',JSON.stringify(this.kw));

//onLoad 宣告週期中 取
let list = JSON.parse(uni.getStorageSync('kw') || '');

//刪除
uni.setStorageSync('kw',[]);

filters:{
	toFixed(num){
		return Number(num).toFixed(2);
	}
}

<view>{{num | toFixed}}</view>

data() {
	return {
		isLoading:false
	};
},
methods:{
	getList(){
		//開啟節流閥
		this.isLoading = true;
		//獲取資料
		let res = .....
		//關閉節流閥
		this.isLoading = false;
	}
},
//監聽上拉事件
onReachBottom() {
	//沒有更多資料
	if(this.pagenum*this.pagesize >= this.total) return uni.$showMsg('沒有更多資料了')
	//限流 防止頻繁請求
	if(this.isLoading) return;
	//頁面自增加一
	this.pagenum++;
	//獲取列表資料的方法
	this.getList();
}

methods:{
	getList(cb){
		//開啟節流閥
		this.isLoading = true;
		//呼叫回撥函數
		cb && cb();
		//獲取資料
		let res = .....
		//關閉節流閥
		this.isLoading = false;
	}
},
onPullDownRefresh() {
	this.total = 0;
	this.pagenum = 1;
	this.list = [];
	this.isLoading = false;
	//傳入回撥函數，停止下拉重新整理效果
	this.getList(()=> uni.stopPullDownRefresh());
}

//store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import cart from '@/store/cart.js'
const store = new Vuex.Store({
	modules:{
		cart
	}
})
export default store;

//main.js
import store from './store/store.js'
const app = new Vue({
    ...App,
    //掛載到vue範例上
	store
})
app.$mount()

//cart.js
export default {
	namespaced:true,
	state:{
		cart:[]
	},
	//修改state 只能通過 mutations 
	mutations:{
		addCart:(state,data)=>{
			state.cartList.push(data)
		}
	},
	getter:{}
}

import { mapState, mapActions, mapMutations } from 'vuex';

computed:{
	...mapState({
		cartList:state=>state.cart.cartList
	})
},
methods: {
	...mapMutations(['addCart']),
	addCartInfo(){
		this.addCart(2)
		// this.$store.commit('addCart',2)
	},
	//輸入框事件
	input(e){
		clearTimeout(this.timer)
		this.timer = setTimeout(_=>{
			this.kw = e.value;
		},500)
	}
	}

<button open-type="getUserInfo" @getuserinfo="getInfo">一鍵登入</button>
methods:{
	//自定義方法
	getInfo(e){
		console.log(e)
	}
}

async getCode(){
	let [err,res] = await uni.login().catch(err=>err)
	console.log(res)
}

$http.beforeRequest = function (options) {
  uni.showLoading({
  	title:"資料載入中..."
  })
  options.header = {
	  Authorization: token
  }
}