环境：
本人使用HBuiled X进行开发。下载地址：https://www.dcloud.io/hbuilderx.html
使用微信开发者工具进行调试。下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
项目搭建：
新建项目
选择模板——>填写项目名称
完成
项目目录简介：
在工具菜单下找到插件安装安装所需插件:
使用微信开发者工具需要设置开启服务端口：(下图)
真机调试：
真机测试需要调整手机端开启开发者模式下的USB调试。设置—》系统—》关于手机—》三连击版本号开启开发者模式；
在手机设置下搜索开发者选项，进去之后开启USB调试。
封装的ajax请求：
const baseUrl = '后端地址';
const httpRequest = (opts, data) => {
let httpDefaultOpts = {
url: baseUrl+opts.url,
data: data,
method: opts.method,
header: opts.method == 'get' ? {
'X-Requested-With': 'XMLHttpRequest',
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
} : {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
dataType: 'json',
}
let promise = new Promise(function(resolve, reject) {
uni.request(httpDefaultOpts).then(
(res) => {
resolve(res[1])
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
};
//带Token请求
const httpTokenRequest = (opts, data) => {
debugger;
let token = uni.getStorageSync('storage_key');
//此token是登录成功后后台返回保存在storage中的
let httpDefaultOpts = {
url: baseUrl+opts.url,
data: data,
method: opts.method,
header: opts.method == 'get' ? {
'Token': token,
'X-Requested-With': 'XMLHttpRequest',
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8"
} : {
'Token': token,
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
},
dataType: 'json',
}
let promise = new Promise(function(resolve, reject) {
uni.request(httpDefaultOpts).then(
(res) => {
resolve(res[1])
}
).catch(
(response) => {
reject(response)
}
)
})
return promise
};
export default {
baseUrl,
httpRequest,
httpTokenRequest
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
main.js中定义全局http:
方法中使用请求:
var opts={
url: '接口地址',
method: 'post'
};
var param={
userName:_self.account,
password:_self.password
};
this.$http.httpRequest(opts, param).then(res => {
var msg = res.data.msg;
var token = res.data.token;
if(res.data.code == "200"){
//保存后台返回的token
uni.setStorageSync('storage_key', token);
//跳转页面
uni.switchTab({
url:'../tabbar/home/home'
});
}else{
uni.showToast({
title: msg,
duration: 2000,
icon:"none"
})
}
},error => {console.log(error);})
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
在原有的tabbar下模拟一个新的tabbar：
新建文件如下
pages文件下的是你的页面内容。
index下代码是模拟tabbar的代码：代码如下
<template>
<view class="content">
<homePage v-if="page_code=='home'"></homePage>
<infoPage v-if="page_code=='info'"></infoPage>
<newsPage v-if="page_code=='news'"></newsPage>
<myPage v-if="page_code=='my'"></myPage>
<footerNav></footerNav>
</view>
</template>
<script>
import homePage from "./pages/home_page.vue";
import infoPage from "./pages/info_page.vue";
import newsPage from "./pages/news_page.vue";
import myPage from "./pages/my_page.vue";
import footerNav from "../../components/footer/footer_nav.vue";
export default {
data() {
return {}
},
components: {
homePage,
infoPage,
newsPage,
myPage,
footerNav
},
computed: {
page_code() {
return this.$store.state.footer_store.footer_nav[this.$store.state.footer_store.now_page_index].name_code;
}
},
onLoad() {
this.$store.dispatch('get_data')
},
methods: {
open_loading() {
this.$loading()
}
}
}
</script>
<style>
.content {
text-align: center;
padding-bottom: 400upx;
}
.logo {
height: 200upx;
width: 200upx;
margin-top: 200upx;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style>
---------------------------------------------------------------------
实现组件：
代码如下：
<template>
<view>
<view class="footer">
<view :class="'footer_item ' + (item.size=='big'?'big_item':'') " :style="'width:'+item_width" @click="change_nav(index)" v-for="(item,index) in footer_nav" :key="index">
<image :src="index==now_index?item.select_icon:item.icon" mode=""></image>
<view>{
{item.name}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods:{
change_nav(index){
this.$store.commit("change_page",index)
}
},
computed:{
item_width(){
let length = this.$store.state.footer_store.footer_nav.length;
switch (length){
case 1:
return '100%'
break;
case 2:
return '50%'
break;
case 3:
return '33.3%'
break;
case 4:
return '25%'
break;
case 5:
return '20%'
break;
default:
break;
}
},
footer_nav(){
return this.$store.state.footer_store.footer_nav
},
now_index(){
return this.$store.state.footer_store.now_page_index;
}
}
}
</script>
<style>
.footer{
height: 120upx;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #E0E0E0;
color: #fff;
}
.footer_item{
float: left;
width: 33.3%;
text-align: center;
font-size: 28upx;
height: 120upx;
}
.footer_item image{
width: 60upx;
height: 60upx;
}
.footer_item.big_item{
position: relative;
top: -40upx;
}
.footer_item.big_item image{
width: 100upx;
height: 100upx;
}
</style>
----------------------------------------------------------------------------------------
pages.json 配置地址
现在就可以了。
后续会有其他的更新。