mpvue（没朋友开发）测试demo

我使用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>

链接: https://pan.baidu.com/s/1dfA6KWpwzgwko-3LugyBPQ 密码: 3wwa