我使用mpvue的时候main.js下面的config无效,所以我们每次新增页面的时候要手动的去进行修改。可能是我下载的版本问题,以前的版本就可以,期待后续版本的更新解决。
本次demo采用的是 flyio发起网络请求
Npm安装:npm install flyio
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly
如果您的微信小程序项目没有使用npm
来管理依赖,您可以直接下载源码到您的小程序工程,下载链接wx.js 或 wx.umd.min.js .下载任意一个,保存到本地工程目录,假设在“lib”目录,接下来引入:
var Fly=require("../lib/wx") //wx.js为您下载的源码文件
var fly=new Fly; //创建fly实例
在mpvue 中您也可以将fly实例挂在vue原型上,这样就可以在任何组件中通过this
方便的调用:
var Fly=require("flyio/dist/npm/wx")
var fly=new Fly
... //添加全局配置、拦截器等
Vue.prototype.$http=fly //将fly实例挂在vue原型上
在组件中您可以方便的使用:
this.$http.get("/test",{xx:6}).then((d)=>{
//输出响应数据
console.log(d.data)
//输出响应头
console.log(d.header)
}).catch(err=>{
console.log(err.status,err.message)
})
1.登陆操作
template:
<form class="form-container" @submit="testSubmit">
<input type="text" class="form-control" name="usr_id" />
<input type="text" class="form-control" name="type"/>
<button formType="submit" class="weui-btn" type="primary">登录</button>
</form>
script:
methods: {
testSubmit (e) {
console.log(e)
this.$http.post("ChauffeurMgmt/enquiryCarrier",e.mp.detail.value).then((d)=>{
if(d.data.success==false){
wx.showModal({
content: d.data.result.msg,
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}else{
const url = '../transfer/main'
wx.navigateTo({ url })
}
}).catch(err=>{
console.log(err.status,err.message)
})
}
}
style:
//可能有些样式没有用到,我懒得删除了。
<style scoped>
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 150px;
}
.form-control {
display: block;
padding: 0 12px;
margin-bottom: 5px;
border: 1px solid #ccc;
}
#users{
width: 100%;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
box-sizing: border-box;
}
ul{
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
li{
flex-grow: 1;
flex-basis: 300px;
text-align: center;
padding: 30px;
border: 1px solid #222;
margin: 10px;
}
</style>
template:
<form class="form-container" @submit="testSubmit">
手机号码:<input type="text" class="form-control" name="usr_id" />
请求方式:<input type="text" class="form-control" name="type"/>
<button formType="submit" class="weui-btn" type="primary">查询</button>
</form>
<div id="users" v-if="users!=''">
<h2 >com_nm:{{users.com_nm}}</h2>
<h2>usr_id:{{users.usr_id}}</h2>
<h2>corp_nm:{{users.corp_nm}}</h2>
<h2>reg_cd:{{users.reg_cd}}</h2>
</div>
script :
<script>
export default {
data () {
return {
users:''
}
},
methods: {
testSubmit (e) {
console.log(e)
this.$http.post("ChauffeurMgmt/enquiryCarrier",e.mp.detail.value).then((d)=>{
this.users=d.data.result
}).catch(err=>{
console.log(err.status,err.message)
})
}
}
}
</script>
style:
<style scoped>
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.form-control {
display: block;
padding: 0 12px;
margin-bottom: 5px;
border: 1px solid #ccc;
}
</style>
template:
<template>
<div class="page">
<div class="page__hd">
<div class="page__title">Dialog</div>
<div class="page__desc">对话框,采用小程序原生的modal</div>
</div>
<div class="page__bd">
<div class="weui-btn-area">
<button class="weui-btn" type="default" @click="openConfirm">Confirm Dialog</button>
<button class="weui-btn" type="default" @click="openAlert">Alert Dialog</button>
</div>
</div>
</div>
</template>
script:
<script>
import { formatTime } from '@/utils/index'
export default {
data () {
return {
logs: []
}
},
methods:{
openConfirm() {
wx.showModal({
title: '弹窗标题',
content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
confirmText: "主操作",
cancelText: "辅助操作",
success: function (res) {
console.log(res);
if (res.confirm) {
console.log('用户点击主操作')
} else {
console.log('用户点击辅助操作')
}
}
})
},
openAlert() {
wx.showModal({
content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内',
showCancel: false,
success: function (res) {
if (res.confirm) {
console.log('用户点击确定')
}
}
})
}
},
created () {
const logs = (wx.getStorageSync('logs') || [])
this.logs = logs.map(log => formatTime(new Date(log)))
},
mounted () {
this.id = this.$root.$mp.query.id//获取参数
console.log(this.id)
}
}
</script>
style:
<style>
.log-list {
display: flex;
flex-direction: column;
padding: 40rpx;
}
.log-item {
margin: 10rpx;
}
</style>
import { formatTime } from '@/utils/index'
function formatNumber (n) {
const str = n.toString()
return str[1] ? str : `0${str}`
}
export function formatTime (date) {
const year = date.getFullYear()
const month = date.getMonth() + 1
const day = date.getDate()
const hour = date.getHours()
const minute = date.getMinutes()
const second = date.getSeconds()
const t1 = [year, month, day].map(formatNumber).join('/')
const t2 = [hour, minute, second].map(formatNumber).join(':')
return `${t1} ${t2}`
}
template:
<template>
<div>
<div class="navbar">
<block v-for="(item,index) in tabs" :key="index">
<div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
<div class="navbar_title">{{item.name}}</div>
</div>
</block>
<div class="navbar_slider" :class="navbarSliderClass"></div>
</div>
<swiper class="content" :duration="50" :style="'height:'+contentHeight" @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
<swiper-item v-for="(item,index) in tabs" :key="index" class="swclas"> <!--控制滑动 -->
<div v-for="(item,lisindeax) in lis" :key="lisindeax" >
<ul>
<li><p class="pstly">{{item.line_nm}} </p><p class="psaffilt">{{item.delv_stat}}</p></li>
<li>社会信用代码:{{item.delv_id}}</li>
<li>法人信名:{{item.ldr_tm}}</li>
<li><p class="pstly">联系承运商:{{item.frgt_wgt}}</p></li>
</ul>
<p class="hrs"></p>
</div>
</swiper-item>
</swiper>
</div>
</template>
script:
<script>
export default {
data() {
return {
tabs: [
{
name: "代挂靠",
type: "1",
checked: true
},
{
name: "已挂靠",
type: "2",
checked: true
},
{
name: "以失败",
type: "3",
checked: true
}
],
activeIndex: 0,
currentTab: 0,
winWidth: 0,
winHeight: 0,
lis:null,
};
},
computed: {
navbarSliderClass() {
if (this.activeIndex == 0) {
return "navbar_slider_0";
}
if (this.activeIndex == 1) {
return "navbar_slider_1";
}
if (this.activeIndex == 2) {
return "navbar_slider_2";
}
},
contentHeight() {
return this.winHeight + "px";
}
},
methods: {
tabClick(e) {
this.activeIndex = e.currentTarget.id;
this.currentTab =this.activeIndex;
},
swiperChange(e) {
this.currentTab = e.mp.detail.current;
this.activeIndex = this.currentTab;
console.log(this.activeIndex)
this.requestList()
},
onAnimationfinish() {
console.log("滑动完成.....")
},
requestList() {
this.$http.post("/enquiryList",{usr_id:'18055811376'}).then((d)=>{
this.lis=d.data.result.data
console.log( this.lis)
}).catch(err=>{
console.log(err.status,err.message)
})
}
},
onLoad(options) {
var res = wx.getSystemInfoSync();
this.winWidth = res.windowWidth;
this.winHeight = res.windowHeight;
this.requestList()
}
};
</script>
style:
<style scoped>
.content {
box-sizing: border-box;
height: 100%;
padding-top: 50px;
/* overflow: auto; */
-webkit-overflow-scrolling: touch;
}
.swiper-item {
height: 100%;
text-align: center;
}
.swclas {
overflow:scroll;
}
.navbar {
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: fixed;
z-index: 500;
top: 0;
height: 50px;
width: 100%;
background-color: #298de5;
border-bottom: 1rpx solid #ccc;
}
.navbar_item {
position: relative;
display: block;
-webkit-box-flex: 1;
-webkit-flex: 1;
flex: 1;
padding: 13px 0;
text-align: center;
font-size: 0;
}
.navbar_item .navbar_item_on {
color: white;
}
.navbar_title {
color: white;
font-weight: 500;
display: inline-block;
font-size: 15px;
max-width: 8em;
width: auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
word-wrap: normal;
}
.navbar_slider {
position: absolute;
content: " ";
left: 0;
bottom: 0;
width: 6em;
height: 3px;
background-color: white;
-webkit-transition: -webkit-transform 0.1s;
transition: -webkit-transform 0.1s;
transition: transform 0.1s;
transition: transform 0.1s, -webkit-transform 0.1s;
}
.navbar_slider_0 {
left: 29rpx;
transform: translateX(0);
}
.navbar_slider_1 {
left: 29rpx;
transform: translateX(250rpx);
}
.navbar_slider_2 {
left: 29rpx;
transform: translateX(500rpx);
}
.controls {
display: -webkit-box;
display: -webkit-flex;
display: flex;
position: fixed;
z-index: 8888;
top: 80;
height: 50px;
width: 100%;
background-color: #298de5;
}
.pstly {
font-size: 40rpx;
font-weight: bold;
}
.psaffilt {
font-size: 10px;
color: #298de5;
margin-left: 88%;
margin-top: -5%;
}
ul {
margin-left: 5%;
}
li {
font-size: 14px;
}
.hrs {
height:1px;
width:100%;
background:#00CCFF;
overflow:hidden;
}
</style>