onc-virn

【笔记】实战mpvue2.0多端小程序框架——首页开发（中）

文章目录

一、Banner组件
二、图书推荐组件

1.准备工作
2.const.js
3.HomeBook.vue

要点说明

4.在index.vue中调用
5.实现效果

三、首页mock数据

1.截取格式化版
2.完整版

首页开发 | 「小慕读书」官网

一、Banner组件

展示用户信息、签到、书架图书和书架入口

组件名称	属性	参数	用途	默认值
Banner	props	img	banner图片	(空)
		title	标题	(空)
		subTitle	副标题	(空)
	method	onClick	banner点击事件	-

新建src\components\home\HomeBannner.vue：

<template>
  <div class="home-banner" @click="onClick">
    <div
      class="bg-img"
      :style="{backgroundImage: bgImage}"
    >
      <div class="title">{{title}}div>
      <div class="sub-title">{{subTitle}}div>
    div>
  div>
template>

<script>
export default {
  props: {
    title: String,
    subTitle: String,
    img: String
  },
  computed: {
    bgImage() {
      return 'url(' + this.img + ')'
    }
  },
  methods: {
    onClick() {
      this.$emit('onClick')
    }
  }
}
script>

<style lang="scss" scoped>
  .home-banner {
    margin-top: 20px;
    padding: 0 20px;

    .bg-img {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 125px;
      border-radius: 10px;
      background-size: 100% 100%;
      background-repeat: no-repeat;

      .title {
        font-size: 18px;
        font-weight: 500;
        color: #FFF;
      }

      .sub-title {
        padding: 5px 15px;
        background: #4585FF;
        border: 1px solid #CCC;
        border-radius: 50px;
        margin-top: 10px;
        font-size: 14px;
        color: #FFF;
      }
    }
  }
style>

要点：

在:style中少用字符串连接（其中的变量会报undefined），可将包含变量的字符串连接放到computed定义的方法返回值中：

<div
  class="bg-img"
  :style="{backgroundImage: bgImage}"
>

computed: {
  bgImage() {
    return 'url(' + this.img + ')'
  }
},

预览效果：

测试背景图片地址：http://www.youbaobao.xyz/book/res/bg.jpg

二、图书推荐组件

适配多场景的图书推荐组件

1.准备工作

组件名称	属性	参数	用途	默认值
HomeBook	props	title	标题栏	(空)
		data	图书列表	[]
		btnText	按钮文本	(空)
		row	行数	0
		col	列数	1
		mode	显示模式，row - 按行显示，col - 按列显示，category - 分类显示	row
		showTitle	是否显示标题	true
		showBtn	是否显示按钮	true
		linearBg	是否显示背景	false
	method	onMoreClick	点击更多按钮事件	-
	method	onBookClick	图书点击事件	-

2.const.js

新建src\utils\const.js，用来存放枚举值

export const HOME_BOOK_MODE = {
  ROW: 'row',
  COL: 'col',
  CATEGORY: 'category'
}
// 分类英文名称和中文的映射
export const CATEGORY = {
  computerscience: '计算机科学',
  socialsciences: '社会科学',
  economics: '经济学',
  education: '教育学',
  engineering: '工程学',
  environment: '环境学',
  geography: '地理学',
  history: '历史学',
  laws: '法学',
  lifesciences: '生命科学',
  literature: '文学',
  biomedicine: '生物医学',
  businessandmanagement: '工商管理',
  earthsciences: '地球科学',
  materialsscience: '材料科学',
  mathematics: '数学',
  medicineandpublichealth: '公共卫生',
  philosophy: '哲学',
  physics: '物理',
  politicalscienceandinternationalrelations: '国际关系',
  psychology: '心理学',
  statistics: '统计学'
}

3.HomeBook.vue

新建：src\components\home\HomeBook.vue

<template>
  <div class="home-book">
    <div class="home-book-header">{{title}}div>
    <div class="home-book-content">
      <div class="home-book-row" v-for="(item, index) in bookData" :key="index">
        <div
          class="home-book-col"
          v-for="(book, bookIndex) in item"
          :key="bookIndex"
          :style="{flex: '0 0 ' + (100/col) + '%'}">
          <div class="book-wrapper"
               :style="{flexDirection: mode === HOME_BOOK_MODE.COL ? 'column' : 'row'}"
               @click="onBookClick"
               v-if="mode === HOME_BOOK_MODE.COL || mode === HOME_BOOK_MODE.ROW">
            <ImageView :src="book.cover"/>
            <div class="book-title-wrapper book-title-col" v-if="mode === HOME_BOOK_MODE.COL">
              <div class="book-title">{{book.title}}div>
            div>
            <div class="book-title-wrapper book-title-row" v-else>
              <div class="book-title">{{book.title}}div>
              <div class="book-title-author-wrapper">
                <div class="book-title book-author">{{book.author}}div>
                <div class="book-title book-author">{{book.categoryText}}div>
              div>
            div>
          div>
          <div class="category-wrapper" v-else>
            <div class="category-text">{{book.text}}div>
            <div class="category-num">{{book.num}}本书div>
            <div class="category-img-wrapper">
              <div class="category-img1">
                <ImageView :src="book.cover">ImageView>
              div>
              <div class="category-img2">
                <ImageView :src="book.cover2">ImageView>
              div>
            div>
          div>
        div>
      div>
    div>
    <div class="home-book-footer" @click="onMoreClick">
      <van-button round custom-class="home-book-btn">
        {{btnText}}
      van-button>
    div>
  div>
template>

<script>
import {HOME_BOOK_MODE, CATEGORY} from '@/utils/const'
import ImageView from '../base/ImageView'

export default {
  components: {ImageView},
  mounted() {
    console.log(this.bookData)
  },
  props: {
    title: String,
    data: {
      type: Array,
      default: []
    },
    btnText: String,
    row: {
      type: Number,
      default: 0
    },
    col: {
      type: Number,
      default: 1
    },
    mode: {
      type: String,
      default: HOME_BOOK_MODE.ROW
    },
    showTitle: {
      type: Boolean,
      default: true
    },
    showBtn: {
      type: Boolean,
      default: true
    },
    linearBg: {
      type: Boolean,
      default: false
    }
  },
  // 复用核心
  computed: {
    // 由于在渲染层中无法直接拿到枚举数据，因此需要在计算属性中做处理
    HOME_BOOK_MODE() {
      return HOME_BOOK_MODE
    },
    // 通过计算属性来动态确定数组的数据结构：一维/二维数组,进行缓存，提高渲染效率
    bookData() {
      // 解构获取
      const {data, row, col} = this
      if (data && data.length > 0) {
        data.forEach(book => {
          book.text = CATEGORY[book.categoryText.toLowerCase()]
        })
        const number = row * col
        // 数据截取
        const _bookData = data.slice(0, number)
        const _bookDataRow = []
        let _row = 0
        while (_row < row) { // 将数据截取为对应格式的数组
          // 0 * 2 = 0, 0 * 2 +2 = 2
          // 1 * 2 = 0, 1 * 2 +2 = 4
          _bookDataRow.push(_bookData.slice(_row * col, _row * col + col))
          _row++
        }
        return _bookDataRow
      } else {
        return []
      }
    }
  },
  methods: {
    onMoreClick() {
      this.$emit('onMoreClick')
    },
    onBookClick() {
      this.$emit('onBookClick')
    }
  }
}
script>

<style lang="scss" scoped>
  .home-book {
    .home-book-header {
      padding: 13px 0 0 20.5px;
    }

    .home-book-content {
      padding: 0 12px;
      margin-top: 10.5px;

      .home-book-row {
        display: flex;
        flex-flow: row nowrap; /*水平排列，且不换行*/
        margin-top: 12px;

        .home-book-col {
          padding: 0 8px;
          box-sizing: border-box;

          .book-wrapper {
            display: flex;

            .book-title-wrapper {
              &.book-title-col {
                .book-title {
                  font-size: 12px;
                  color: #212731;
                  line-height: 16.5px;
                  max-height: 33px;
                  font-weight: 500;
                  overflow: hidden;
                  word-break: break-word;
                }
              }

              &.book-title-row {
                flex: 0 0 50%;
                padding: 10px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .book-title {
                  font-size: 14px;
                  color: #1F1F1F;
                  line-height: 18px;
                  max-height: 36px;
                  overflow: hidden;
                  word-break: break-word;
                }

                .book-author {
                  font-size: 12px;
                  color: #868686;
                  line-height: 14px;
                  max-height: 14px;
                }
              }
            }
          }

          .category-wrapper {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background: #F8F9FB;
            border-radius: 10px;
            height: 96px;
            padding: 13px 0 14.5px 16px;
            box-sizing: border-box;

            .category-text {
              width: 150px;
              overflow: hidden;
              text-overflow: ellipsis;
              color: #212832;
              font-size: 16px;
              line-height: 22.5px;
            }

            .category-num {
              color: #868686;
              font-size: 12px;
              line-height: 16.5px;
            }

            .category-img-wrapper {
              position: absolute;
              right: 0;
              bottom: 0;

              .category-img1 {
                position: absolute;
                right: 0;
                bottom: -5px;
                z-index: 100;
                width: 48px;
              }

              .category-img2 {
                position: absolute;
                right: 30px;
                bottom: -5px;
                z-index: 90;
                width: 36px;
              }
            }
          }
        }
      }
    }

    .home-book-footer {
      padding: 12px 20px 20px;
    }
  }
style>
<style lang="scss">
  .category-img1 {
    .image {
      border-radius: 0 0 10px 0;
    }
  }

  .home-book-footer {
    .home-book-btn {
      width: 100%;
      font-size: 14px;
      color: #3696EF;
      border: 1px solid #EDEEEE;
    }
  }
style>

要点说明

由于在渲染层中无法直接拿到枚举数据，因此需要在计算属性中做处理：

HOME_BOOK_MODE() {
  return HOME_BOOK_MODE
},

多层v-for嵌套需要index不同

<div v-for="(item, index) in bookData>
	(book, bookIndex) in item">
	....

控制每本书之间相对父容器水平平分

<div class="home-book-col" :style="{flex: '0 0 ' + (100/col) + '%'}">

需要兼容两种布局：
- 图片与文字垂直（图+title）
- 图片与文字水平（图+title+作者+出版社）
  (1) .book-wrapper 需要设置 display: flex;
  (2) flex-direction需要动态根据mode来决定：

<div class="book-wrapper"
  :style="{flexDirection: mode === HOME_BOOK_MODE.COL ? 'column' : 'row'}">

(3)两种样式各定义一个div，里面具体的样式需要靠v-if+v-else来动态选择：

<div class="book-wrapper">
  <ImageView/>
  <div class="book-title-wrapper book-title-col" v-if="mode === HOME_BOOK_MODE.COL">
  ....
  </div>
  <div class="book-title-wrapper book-title-row" v-else>
  ....
  </div>
</div>

在修改组件库中控件的样式时，需要在全局状态下，即放在不含 scoped 的style标签下：

<style lang="scss">
  .home-book-footer {
    .home-book-btn {
      width: 100%;
    }
  }
style>

同时这个组件要兼容图书推荐和图书分类两个模块，与上面类似，添加v-if规则：

<div class="book-wrapper" v-if="mode === HOME_BOOK_MODE.COL || mode === HOME_BOOK_MODE.ROW">
<div v-else>div>

由于mpvue在小程序中不支持过滤器，因此需要在计算属性中加到data的处理之前：然后在渲染层中通过book.text来引用

if (data && data.length > 0) {
  data.forEach(book => {
    book.text = CATEGORY[book.categoryText.toLowerCase()]
  })
  ....

4.在index.vue中调用

<div :style="{marginTop: '23px'}">
   <HomeBook
     title="为你推荐"
     :row="1"
     :col="3"
     :data="data"
     mode="col"
     btn-text="换一批"
     @onMoreClick="onBookMoreClick"
     @onBookClick="onHomeBookClick"/>   
   <HomeBook
     title="为你推荐"
     :row="2"
     :col="2"
     :data="data"
     mode="row"
     btn-text="换一批"
     @onMoreClick="onBookMoreClick"
     @onBookClick="onHomeBookClick"/>
  <HomeBook
    title="图书分类"
    :row="2"
    :col="2"
    :data="category"
    mode="category"
    btn-text="更多"
    @onMoreClick="onBookMoreClick"
    @onBookClick="onHomeBookClick"/>
div>

5.实现效果

三、首页mock数据

1.截取格式化版

	[
        {
          'id': 34,
          'fileName': '2018_Book_GeographiesOfTheUniversity',
          'cover': 'https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-75593-9_CoverFigure.jpg',
          'title': 'Geographies of the University',
          'author': 'Peter Meusburger',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_GeographiesOfTheUniversity',
          'category': 7,
          'categoryText': 'Geography',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        },
        {
          'id': 59,
          'fileName': '2018_Book_DrinkingInVictorianAndEdwardia',
          'cover': 'https://www.youbaobao.xyz/book/res/img/History/978-3-319-92964-4_CoverFigure.jpg',
          'title': 'Drinking in Victorian and Edwardian Britain',
          'author': 'Thora Hands',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_DrinkingInVictorianAndEdwardia',
          'category': 8,
          'categoryText': 'History',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        },
        {
          'id': 60,
          'fileName': '2018_Book_HarnessingThePowerOfTheCrimina',
          'cover': 'https://www.youbaobao.xyz/book/res/img/History/978-3-319-77908-9_CoverFigure.jpg',
          'title': 'Harnessing the Power of the Criminal Corpse',
          'author': 'Sarah Tarlow',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_HarnessingThePowerOfTheCrimina',
          'category': 8,
          'categoryText': 'History',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        },
        {
          'id': 75,
          'fileName': '2018_Book_TheEuropeanBloodAndMarrowTrans',
          'cover': 'https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-50026-3_CoverFigure.jpg',
          'title': 'The European Blood and Marrow Transplantation Textbook for Nurses',
          'author': 'Michelle Kenyon',
          'publisher': 'Springer International Publishing',
          'bookId': '2018_Book_TheEuropeanBloodAndMarrowTrans',
          'category': 17,
          'categoryText': 'MedicineAndPublicHealth',
          'language': 'en',
          'rootFile': 'OEBPS/package.opf'
        }
      ]

[
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Biomedicine/978-3-319-25474-6_CoverFigure.jpg',
                'category':12,
                'categoryText':'Biomedicine',
                'num':14,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Biomedicine/978-3-319-72790-5_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-33515-5_CoverFigure.jpg',
                'category':13,
                'categoryText':'BusinessandManagement',
                'num':16,
                'cover2':'https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-95261-1_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-90415-3_CoverFigure.jpg',
                'category':1,
                'categoryText':'ComputerScience',
                'num':56,
                'cover2':'https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-96142-2_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/EarthSciences/978-981-10-3713-9_CoverFigure.jpg',
                'category':14,
                'categoryText':'EarthSciences',
                'num':16,
                'cover2':'https://www.youbaobao.xyz/book/res/img/EarthSciences/978-3-319-65633-5_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Economics/978-3-319-69772-7_CoverFigure.jpg',
                'category':3,
                'categoryText':'Economics',
                'num':30,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Economics/978-3-319-91400-8_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Education/978-3-319-39450-3_CoverFigure.jpg',
                'category':4,
                'categoryText':'Education',
                'num':60,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Education/978-3-319-52980-6_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Engineering/978-3-319-91707-8_CoverFigure.jpg',
                'category':5,
                'categoryText':'Engineering',
                'num':23,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Engineering/978-3-319-64816-3_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Environment/978-3-319-29671-5_CoverFigure.jpg',
                'category':6,
                'categoryText':'Environment',
                'num':42,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Environment/978-4-431-54895-9_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-75593-9_CoverFigure.jpg',
                'category':7,
                'categoryText':'Geography',
                'num':7,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-92813-5_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/History/978-3-319-64337-3_CoverFigure.jpg',
                'category':8,
                'categoryText':'History',
                'num':18,
                'cover2':'https://www.youbaobao.xyz/book/res/img/History/978-3-319-92964-4_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Laws/978-3-319-71087-7_CoverFigure.jpg',
                'category':9,
                'categoryText':'Laws',
                'num':13,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Laws/978-981-13-1232-8_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/LifeSciences/978-3-319-68152-8_CoverFigure.jpg',
                'category':10,
                'categoryText':'LifeSciences',
                'num':24,
                'cover2':'https://www.youbaobao.xyz/book/res/img/LifeSciences/978-3-319-69539-6_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Literature/2010_Book_CyborgsInLatinAmerica.jpeg',
                'category':11,
                'categoryText':'Literature',
                'num':6,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Literature/2010_Book_HistoryAndCulturalMemoryInNeo-.jpeg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/MaterialsScience/978-981-10-7617-6_CoverFigure.jpg',
                'category':15,
                'categoryText':'MaterialsScience',
                'num':2,
                'cover2':'https://www.youbaobao.xyz/book/res/img/MaterialsScience/2018_Book_ProceedingsOfTheScientific-Pra.jpeg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Mathematics/978-3-319-29439-1_CoverFigure.jpg',
                'category':16,
                'categoryText':'Mathematics',
                'num':9,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Mathematics/2015_Book_InnovationsInQuantitativeRiskM.jpeg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-28624-2_CoverFigure.jpg',
                'category':17,
                'categoryText':'MedicineAndPublicHealth',
                'num':20,
                'cover2':'https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-75019-4_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Philosophy/978-3-319-26300-7_CoverFigure.jpg',
                'category':18,
                'categoryText':'Philosophy',
                'num':16,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Philosophy/978-3-319-94610-8_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Physics/978-3-319-42424-8_CoverFigure.jpg',
                'category':19,
                'categoryText':'Physics',
                'num':10,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Physics/978-3-662-57366-2_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/PoliticalScienceAndInternationalRelations/978-3-319-69929-5_CoverFigure.jpg',
                'category':20,
                'categoryText':'PoliticalScienceAndInternationalRelations',
                'num':26,
                'cover2':'https://www.youbaobao.xyz/book/res/img/PoliticalScienceAndInternationalRelations/978-981-10-7182-9_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Psychology/978-3-319-78160-0_CoverFigure.jpg',
                'category':21,
                'categoryText':'Psychology',
                'num':3,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Psychology/2015_Book_PromotingSocialDialogueInEurop.jpeg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-72356-3_CoverFigure.jpg',
                'category':2,
                'categoryText':'SocialSciences',
                'num':51,
                'cover2':'https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-77991-1_CoverFigure.jpg'
            },
            {
                'cover':'https://www.youbaobao.xyz/book/res/img/Statistics/2013_Book_ShipAndOffshoreStructureDesign.jpeg',
                'category':22,
                'categoryText':'Statistics',
                'num':1,
                'cover2':'https://www.youbaobao.xyz/book/res/img/Statistics/2013_Book_ShipAndOffshoreStructureDesign.jpeg'
            }
        ]

2.完整版

{
    "error_code":0,
    "msg":"查询成功",
    "data":{
        "hotSearch":{
            "num":22,
            "keyword":"Computer"
        },
        "shelf":[
            {
                "id":67,
                "fileName":"2018_Book_Nanoinformatics",
                "cover":"https://www.youbaobao.xyz/book/res/img/MaterialsScience/978-981-10-7617-6_CoverFigure.jpg",
                "title":"Nanoinformatics",
                "author":"Isao Tanaka",
                "publisher":"Springer Singapore",
                "bookId":"2018_Book_Nanoinformatics",
                "category":15,
                "categoryText":"MaterialsScience",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":38,
                "fileName":"2018_Book_DesigningSustainableTechnologi",
                "cover":"https://www.youbaobao.xyz/book/res/img/Environment/978-3-319-66981-6_CoverFigure.jpg",
                "title":"Designing Sustainable Technologies, Products and Policies",
                "author":"Enrico Benetto",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_DesigningSustainableTechnologi",
                "category":6,
                "categoryText":"Environment",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":12,
                "fileName":"2018_Book_RESTARTSustainableBusinessMode",
                "cover":"https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-91971-3_CoverFigure.jpg",
                "title":"RESTART Sustainable Business Model Innovation",
                "author":"Sveinung Jørgensen",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_RESTARTSustainableBusinessMode",
                "category":13,
                "categoryText":"BusinessandManagement",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            }
        ],
        "recommend":[
            {
                "id":225,
                "fileName":"2016_Book_MicrofinanceEUStructuralFundsA",
                "cover":"https://www.youbaobao.xyz/book/res/img/Economics/2016_Book_MicrofinanceEUStructuralFundsA.jpeg",
                "title":"Microfinance, EU Structural Funds and Capacity Building for Managing Authorities",
                "author":"Giovanni Nicola Pes",
                "publisher":"Palgrave Macmillan",
                "bookId":"2016_Book_MicrofinanceEUStructuralFundsA",
                "category":3,
                "categoryText":"Economics",
                "language":"en",
                "rootFile":"OEBPS/9781137536013.opf"
            },
            {
                "id":88,
                "fileName":"2018_Book_BetweenMobilityAndMigration",
                "cover":"https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-77991-1_CoverFigure.jpg",
                "title":"Between Mobility and Migration",
                "author":"Peter Scholten",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_BetweenMobilityAndMigration",
                "category":2,
                "categoryText":"SocialSciences",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":24,
                "fileName":"2018_Book_SecurityInComputerAndInformati",
                "cover":"https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-95189-8_CoverFigure.jpg",
                "title":"Security in Computer and Information Sciences",
                "author":"Erol Gelenbe",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_SecurityInComputerAndInformati",
                "category":1,
                "categoryText":"ComputerScience",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            }
        ],
        "freeRead":[
            {
                "id":34,
                "fileName":"2018_Book_GeographiesOfTheUniversity",
                "cover":"https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-75593-9_CoverFigure.jpg",
                "title":"Geographies of the University",
                "author":"Peter Meusburger",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_GeographiesOfTheUniversity",
                "category":7,
                "categoryText":"Geography",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":59,
                "fileName":"2018_Book_DrinkingInVictorianAndEdwardia",
                "cover":"https://www.youbaobao.xyz/book/res/img/History/978-3-319-92964-4_CoverFigure.jpg",
                "title":"Drinking in Victorian and Edwardian Britain",
                "author":"Thora Hands",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_DrinkingInVictorianAndEdwardia",
                "category":8,
                "categoryText":"History",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":60,
                "fileName":"2018_Book_HarnessingThePowerOfTheCrimina",
                "cover":"https://www.youbaobao.xyz/book/res/img/History/978-3-319-77908-9_CoverFigure.jpg",
                "title":"Harnessing the Power of the Criminal Corpse",
                "author":"Sarah Tarlow",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_HarnessingThePowerOfTheCrimina",
                "category":8,
                "categoryText":"History",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":75,
                "fileName":"2018_Book_TheEuropeanBloodAndMarrowTrans",
                "cover":"https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-50026-3_CoverFigure.jpg",
                "title":"The European Blood and Marrow Transplantation Textbook for Nurses",
                "author":"Michelle Kenyon",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_TheEuropeanBloodAndMarrowTrans",
                "category":17,
                "categoryText":"MedicineAndPublicHealth",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            }
        ],
        "hotBook":[
            {
                "id":89,
                "fileName":"2018_Book_ContemporaryPerspectivesOnAgei",
                "cover":"https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-73820-8_CoverFigure.jpg",
                "title":"Contemporary Perspectives on Ageism",
                "author":"Liat Ayalon",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_ContemporaryPerspectivesOnAgei",
                "category":2,
                "categoryText":"SocialSciences",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":218,
                "fileName":"2015_Book_PovertyReductionPoliciesAndPra",
                "cover":"https://www.youbaobao.xyz/book/res/img/Economics/2015_Book_PovertyReductionPoliciesAndPra.jpeg",
                "title":"Poverty Reduction Policies and Practices in Developing Asia",
                "author":"Almas Heshmati, Esfandiar Maasoumi and Guanghua Wan",
                "publisher":"Springer Singapore, Singapore",
                "bookId":"2015_Book_PovertyReductionPoliciesAndPra",
                "category":3,
                "categoryText":"Economics",
                "language":"en",
                "rootFile":"OEBPS/content.opf"
            },
            {
                "id":6,
                "fileName":"2018_Book_DronesAndTheCreativeIndustry",
                "cover":"https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-95261-1_CoverFigure.jpg",
                "title":"Drones and the Creative Industry",
                "author":"Virginia Santamarina-Campos",
                "publisher":"Springer International Publishing",
                "bookId":"2018_Book_DronesAndTheCreativeIndustry",
                "category":13,
                "categoryText":"BusinessandManagement",
                "language":"en",
                "rootFile":"OEBPS/package.opf"
            },
            {
                "id":139,
                "fileName":"2018_Book_EvolutionMonitoringAndPredicti",
                "cover":"https://www.youbaobao.xyz/book/res/img/EarthSciences/2018_Book_EvolutionMonitoringAndPredicti.jpeg",
                "title":"Evolution, Monitoring and Predicting Models of Rockburst",
                "author":"Chunlai Wang",
                "publisher":"Springer Singapore, Singapore",
                "bookId":"2018_Book_EvolutionMonitoringAndPredicti",
                "category":14,
                "categoryText":"EarthSciences",
                "language":"en",
                "rootFile":"OEBPS/content.opf"
            }
        ],
        "category":[
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Biomedicine/978-3-319-25474-6_CoverFigure.jpg",
                "category":12,
                "categoryText":"Biomedicine",
                "num":14,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Biomedicine/978-3-319-72790-5_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-33515-5_CoverFigure.jpg",
                "category":13,
                "categoryText":"BusinessandManagement",
                "num":16,
                "cover2":"https://www.youbaobao.xyz/book/res/img/BusinessandManagement/978-3-319-95261-1_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-90415-3_CoverFigure.jpg",
                "category":1,
                "categoryText":"ComputerScience",
                "num":56,
                "cover2":"https://www.youbaobao.xyz/book/res/img/ComputerScience/978-3-319-96142-2_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/EarthSciences/978-981-10-3713-9_CoverFigure.jpg",
                "category":14,
                "categoryText":"EarthSciences",
                "num":16,
                "cover2":"https://www.youbaobao.xyz/book/res/img/EarthSciences/978-3-319-65633-5_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Economics/978-3-319-69772-7_CoverFigure.jpg",
                "category":3,
                "categoryText":"Economics",
                "num":30,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Economics/978-3-319-91400-8_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Education/978-3-319-39450-3_CoverFigure.jpg",
                "category":4,
                "categoryText":"Education",
                "num":60,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Education/978-3-319-52980-6_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Engineering/978-3-319-91707-8_CoverFigure.jpg",
                "category":5,
                "categoryText":"Engineering",
                "num":23,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Engineering/978-3-319-64816-3_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Environment/978-3-319-29671-5_CoverFigure.jpg",
                "category":6,
                "categoryText":"Environment",
                "num":42,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Environment/978-4-431-54895-9_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-75593-9_CoverFigure.jpg",
                "category":7,
                "categoryText":"Geography",
                "num":7,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Geography/978-3-319-92813-5_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/History/978-3-319-64337-3_CoverFigure.jpg",
                "category":8,
                "categoryText":"History",
                "num":18,
                "cover2":"https://www.youbaobao.xyz/book/res/img/History/978-3-319-92964-4_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Laws/978-3-319-71087-7_CoverFigure.jpg",
                "category":9,
                "categoryText":"Laws",
                "num":13,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Laws/978-981-13-1232-8_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/LifeSciences/978-3-319-68152-8_CoverFigure.jpg",
                "category":10,
                "categoryText":"LifeSciences",
                "num":24,
                "cover2":"https://www.youbaobao.xyz/book/res/img/LifeSciences/978-3-319-69539-6_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Literature/2010_Book_CyborgsInLatinAmerica.jpeg",
                "category":11,
                "categoryText":"Literature",
                "num":6,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Literature/2010_Book_HistoryAndCulturalMemoryInNeo-.jpeg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/MaterialsScience/978-981-10-7617-6_CoverFigure.jpg",
                "category":15,
                "categoryText":"MaterialsScience",
                "num":2,
                "cover2":"https://www.youbaobao.xyz/book/res/img/MaterialsScience/2018_Book_ProceedingsOfTheScientific-Pra.jpeg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Mathematics/978-3-319-29439-1_CoverFigure.jpg",
                "category":16,
                "categoryText":"Mathematics",
                "num":9,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Mathematics/2015_Book_InnovationsInQuantitativeRiskM.jpeg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-28624-2_CoverFigure.jpg",
                "category":17,
                "categoryText":"MedicineAndPublicHealth",
                "num":20,
                "cover2":"https://www.youbaobao.xyz/book/res/img/MedicineAndPublicHealth/978-3-319-75019-4_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Philosophy/978-3-319-26300-7_CoverFigure.jpg",
                "category":18,
                "categoryText":"Philosophy",
                "num":16,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Philosophy/978-3-319-94610-8_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Physics/978-3-319-42424-8_CoverFigure.jpg",
                "category":19,
                "categoryText":"Physics",
                "num":10,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Physics/978-3-662-57366-2_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/PoliticalScienceAndInternationalRelations/978-3-319-69929-5_CoverFigure.jpg",
                "category":20,
                "categoryText":"PoliticalScienceAndInternationalRelations",
                "num":26,
                "cover2":"https://www.youbaobao.xyz/book/res/img/PoliticalScienceAndInternationalRelations/978-981-10-7182-9_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Psychology/978-3-319-78160-0_CoverFigure.jpg",
                "category":21,
                "categoryText":"Psychology",
                "num":3,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Psychology/2015_Book_PromotingSocialDialogueInEurop.jpeg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-72356-3_CoverFigure.jpg",
                "category":2,
                "categoryText":"SocialSciences",
                "num":51,
                "cover2":"https://www.youbaobao.xyz/book/res/img/SocialSciences/978-3-319-77991-1_CoverFigure.jpg"
            },
            {
                "cover":"https://www.youbaobao.xyz/book/res/img/Statistics/2013_Book_ShipAndOffshoreStructureDesign.jpeg",
                "category":22,
                "categoryText":"Statistics",
                "num":1,
                "cover2":"https://www.youbaobao.xyz/book/res/img/Statistics/2013_Book_ShipAndOffshoreStructureDesign.jpeg"
            }
        ],
        "banner":{
            "img":"https://www.youbaobao.xyz/book/res/bg.jpg",
            "title":"mpvue2.0多端小程序课程重磅上线",
            "subTitle":"马上学习",
            "url":"https://www.youbaobao.xyz/book/#/book-store/shelf"
        },
        "shelfCount":0
    }
}

你可能感兴趣的:(mpvue)

Uniapp小程序分包周bro uni-app 小程序
注：只拿uniap开发的小程序举例，mpvue略有差异1.首先在pages文件目录下创建pagesA文件（这里拿order页面举例），正常的order文件在pages文件下2.现在分包的话，就在pagesA文件下创建一个order文件，再把pages文件下的oeder页面剪切到pagesA的order文件下3.开始配置分包：配置mainfest.json文件(开启分包的功能)，找到源码视图“mp-
初探Mpvue的组件、样式机制 weixin_33912246 javascript 前端 ViewUI
序言实现了一个简单的demo之后呢，Eknow君这一节会通过小程序API来实现几个小功能。主要从mpvue的组件、语法以及小程序的相关API完善。mpvue的组件上一节，我们可以了解到mpvue基本支持vue组件的所有特性，不遵守这些特性并不会错误，我们只是了能够开发良好的代码，编写高质量的代码可以说是程序员的一道分水岭吧。回到正题哈，mpvue在很大程度上都支持vue组件与小程序的原生组件的,但
计算机毕业设计之springboot+mpvue招聘网站招聘信息分享平台招聘信息分享小程序计算机毕业设计大全
介绍小程序端，使用美团小程序框架mpvue+有赞UI组件库Vant+蚂蚁金服数据可视化方案AntV等。后端基于SpringBoot+MyBatis+Redis+Mysql。具备数据可视化、前后端分离、多角色登录、多端等特色/创新点。适合招聘类计算机毕业设计课题，尤其是springboot招聘。功能计算机毕业设计计算机毕业设计计算机毕业设计计算机毕业设计流程分析计算机毕业设计计算机毕业设计计算机毕业
如何将 h5 页面快速转换成微信小程序小程序
Hello各位朋友们大家新的一月好呀！我是咕噜铁蛋！我知道在小程序开发中，有时候需要将H5页面转换成微信小程序页面。这样可以将原本的网页内容适配到小程序中，让用户能够更方便地访问和使用。在本文中，我将分享如何快速将H5页面转换成微信小程序页面的方法。使用第三方工具第三方工具是将H5页面转换成微信小程序页面的最简单、最快捷的方法之一。可以使用现有的工具，例如Mpvue、Taro等，它们提供了一些插件
微信小程序mpvue+Vant Weapp初始化回到唐朝做IT
准备工作：1.安装Node.jsnodejs官网//可查看node版本$node-v$npm-v2.安装淘宝镜像cnpm$npminstall-gcnpm--registry=https://registry.npm.taobao.org3.安装vue-cli脚手架构建工具$cnpminstall-gvue-cli第一步、创建一个基于mpvue-quickstart模板的新项目可参考mpvue官网
mpvue小程序启动报错:TypeError: Cannot read property 'platform' of undefined 小马将过河
错误：$yarndevyarnrunv1.19.1$nodebuild/dev-server.js/Users/mahaiqiang/git/redcreation/customplatform/customApplet/node_modules/mpvue-template-compiler/build.js:5812switch(fileExt.platform){^TypeError:Can
如何将 h5 页面快速转换成微信小程序咕噜签名-铁蛋微信小程序小程序
Hello各位朋友们大家新的一月好呀！我是咕噜铁蛋！我知道在小程序开发中，有时候需要将H5页面转换成微信小程序页面。这样可以将原本的网页内容适配到小程序中，让用户能够更方便地访问和使用。在本文中，我将分享如何快速将H5页面转换成微信小程序页面的方法。1.使用第三方工具第三方工具是将H5页面转换成微信小程序页面的最简单、最快捷的方法之一。可以使用现有的工具，例如Mpvue、Taro等，它们提供了一些
mpvue小程序《校友来了》成长记 | 给2018画下圆满句号小K前端
1、前言很久没有进行更新文章了，2018已经结束，2019已经开启，为了给2018画下圆满的句号，决定在新年来临前写一篇总结。如果有看过我文章的朋友或许知道还有一个小程序《校友足迹》，而《校友来了》正是《校友足迹》的升级版，我在原有的基础上添加了校友圈子功能，通过《校友来了》不仅能看到校友的分布情况，同时还可以与同城校友交流，查看校友名片等。让《校友来了》不仅仅是一个工具，更是一个同城校友发现与交
mpvue微信小程序获取用户信息(wx.getUserInfo)调整 zackxizi
一、问题描述这两天学习使用mpvue开发微信小程序遇到一个版本问题，之前老版本可以通过wx.getUserInfo就可以获取到用户信息了，但是在4月15号的时候，微信以提升用户体验，更改了获取用户信息的方式，使用的是button获取用户信息，而且使用mpvue开发时获取用户信息比较麻烦，下面是我个人学习的配置步骤。我先抛出一个令我看不太懂的一个连接小程序与小游戏获取用户信息接口调整，请开发者注意升
vs code开发微信小程序插件小明同学喜欢熊
起因使用微信开发者工具开发小程序有点鸡肋，时常黑屏，并且bug不断，因此想使用强大的vscode开发小程序，而使用微信开发者工具辅助预览vscode插件minapp支持微信小程序标签、属性的智能补全，并且提示中包含文档内容（同时支持原生小程序、mpvue和wepy框架，并提供snippets）。minappwechat-snippet这个插件主要的功能就是代码辅助，代码片段自动完成（函数的智能补全
学习mpvue笔记——koa入门从小就很瘦
koa是什么？koa基于Nodejs平台的下一代web开发框架（上一代是express）。Express原班人马打造，更精简。Async+await处理异步洋葱圈型的中间件机制。用法很简单：mkdirkoa-demonpminitnpminstallkoa--save文件夹中新建一个server.jsconstKoa=require('koa')constapp=newKoa()app.use(a
mpVue记录2——写一个小demo 汀上
1.删掉src文件夹下，components&pages&utils下的所有文件，在pages下创建index文件夹，添加index.vue&main.js文件，目录结构如下捕获.PNG2.在src下的app.json中写入(配置小程序的app.json){"pages":["pages/index/main"],"window":{"backgroundTextStyle":"light","n
mpvue中，fly请求拦截token 苏本的书柜
constFly=require("flyio/dist/npm/wx")constfly=newFlyVue.prototype.$http=fly;fly.interceptors.request.use((request)=>{//给所有请求添加自定义headerif(api.Get('token')){request.timeout=30000,request.headers={"cont
mpvue + ColorUI 使用文档-1 基础库 Neyo_凉
首先在根目录的app.js引入样式。然后就可以直接使用样式了因为还没有官方文档，自己就根据demo，研究下怎么使用：div内引用样式文字大小样式text-xsltext-sltext-xxltext-xltext-lgtext-dftext-smtext-xstext-lefttext-centertext-right文字截断text-cut文字格式化处理text-pricetext-Abctex
mpvue zxhnext
http://mpvue.com/mpvue/搭建本地测试环境在server的config文件中CONF中开头加安装wafer2npminstallwafer2-client-sdk-SserverHost:'localhost',tunnelServerUrl:'',tunnelSignatureKey:'27fb7d1c161b7ca52d73cce0f1d833f9f5b5ec89',//腾
在小程序框架 wepy 中使用 iconfont 图标字体 solocoder
新的小程序项目准备踩坑Wepy啦！纠结过原生、Wepy、mpvue到底用哪个。原生：之前的项目用的就是原生，开发起来有点太原始，想换换口味。把原生作为托底方案，假如另外两个遇到踩不过去的坑就转用原生做。wepy：star数量有16k，看了看官方文档，感觉开发方式还不错。毕竟算是腾讯亲生儿子，感觉靠谱些。mpvue：star数跟wepy不相上下，也是16k，一套代码多端通用很有吸引力。mpvue跟w
uni-app原理分析 Jack おう
历史分析最开始的小程序没有组件化和npm支持，wepy就诞生了，但wepy没有完全实现vue的规范，后面又出了mpvue（实现了更完整的vue开发体系）。18年末uni-app开源，其他框架也陆续出现，每家大厂都有自己的框架自己的实现。uni介绍因为vue只有.vue文件而小程序有四个文件，那么就需要拆分。小程序不是双向数据绑定，所以通过uni的runtime实现双向绑定性能优化其实是native
mpVue 微信小程序用户授权及wx.getUserProfile代替wx.getUserInfo获取用户信息及判断用户是否已经授权；不弹出微信授权窗口；只能使用头像、昵称填写能力 wocwin mpvue 微信小程序组件封装微信小程序 mpvue wx.getUserInfo getUserProfile 小程序用户授权授权
一、前言2021年4月15日整改：为优化用户的使用体验，平台将进行以下调整：1，2021年2月23日起，若小程序已在微信开放平台进行绑定，则通过wx.login接口获取的登录凭证可直接换取unionID2，2021年4月13日后发布的小程序新版本，无法通过wx.getUserInfo与获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData
微信小程序mpvue入坑(5)之组件封装---新增源码地址 wocwin vue 小程序组件化 mpvue 微信小程序 vant-weapp 组件封装
微信小程序mpvue入坑(1)之技术对比选型微信小程序mpvue入坑(2)之初始化及引入vantUI微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api微信小程序mpvue入坑(4)之vuex使用整体项目结构├──src//源文件|├──api//接口目录||└──apiPath//具体接口地址||└──index.js//接口路径封装│├──components//
微信小程序mpvue入坑(1)之技术对比选型——新增源码地址 wocwin 小程序 vue 微信小程序 mpvue vant-weapp
微信小程序mpvue入坑(2)之初始化及引入vantUI微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api微信小程序mpvue入坑(4)之vuex使用微信小程序mpvue入坑(5)之组件封装小程序技术栈对比WepympVue/uni-appTaro原生语法风格类Vue规范Vue规范React规范,支持JSX小程序开发规范多端复用H5、微信、支付宝H5、小程序(uni
微信小程序mpvue入坑(2)之初始化及引入vant-weappUI——新增源码地址 wocwin vue 小程序微信小程序 mpvue vant-weapp
微信小程序mpvue入坑(1)之技术对比选型微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api微信小程序mpvue入坑(4)之vuex使用微信小程序mpvue入坑(5)之组件封装初始化项目首先先构建一个项目#全局安装vue-cli$npminstall--globalvue-cli#创建一个基于mpvue-quickstart模板的新项目$vueinitmpvue/
微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api----新增源码地址 wocwin vue 小程序微信小程序 mpvue promise 封装api vant-weapp
微信小程序mpvue入坑(1)之技术对比选型微信小程序mpvue入坑(2)之初始化及引入vantUI微信小程序mpvue入坑(4)之vuex使用微信小程序mpvue入坑(5)之组件封装1、在src下utils新建一个promiseRequest.js文件（用es6-promise封装wx.request）代码如下：importstorefrom'@/store'import{Toast}from'
微信小程序mpvue入坑(4)之vuex使用---新增源码地址 wocwin 小程序微信小程序 mpvue vuex vant-weapp persistedstate
微信小程序mpvue入坑(4)之vuex使用微信小程序mpvue入坑(1)之技术对比选型微信小程序mpvue入坑(2)之初始化及引入vantUI微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api微信小程序mpvue入坑(5)之组件封装1、首先安装vuexnpminstallvuex-S2、在src下新建一个store文件夹新建index.js文件代码如下import
记一次使用mpvue开发微信小程序动画播放播放完成再播放下一个动画，实现动画队列的实战操作小和尚敲代码微信小程序微信小程序小程序
微信小程序wxss支持Css的keyframes动画，我们想通过事件监听，在动画开始、动画播放阶段、动画播放结束的时候进行下一步动作。如下图，有一个从右飘入，然后从左侧出去的动画，我们希望的是，前一个出去后，后一个再进入，即上一个播放完成后，再出来下一个这个时候，解决问题的关键问题在于，监听上一个动画播放完成，这个时候，我们需要用到微信小程序的动画播放完成后的事件，为此，我们将流程逻辑描述如下：数
mpvue实现对苹果X安全区域的适配 bayi_lzp
mpvue实现对苹果X安全区域的设配一、业务背景最近在利用mpvue+ts开发小程序的过程中，由于苹果X等手机会出现底部的按钮，会遮盖掉需要操作的按钮。由于在小程序开发，微信爸爸已经做了对机型的检查，相对与H5的处理来说方便很多了。下面就稍微罗列一下解决方案。二、实现思路判断机型方法注入全局组件mixin加入全局安全距离css页面上进行class类处理三、实现过程1、判断机型方法小程序的官方文档提
微信小程序开发五大技术框架虎克技术hukejishu 微信小程序小程序
现如今，微信小程序的应用非常广泛，各个行业、各个店铺几乎都抛去了以往复杂的移动APP，而选择了简单快捷的微信小程序来扩展自己的业务。微信小程序的开发方式微信小程序的开发方式主要分为原生开发和框架开发但是框架开发又有很多，文章主要是谈wepy、mpvue、taro、uni-app开发框架。1原生开发小程序原生开发框架是微信官网首次推出的，目的是为了让开发者在微信中开发具有原生APP的体验尽可能简洁高
小程序有哪些框架 oneCat
1、Tina.js轻盈小巧，极易上手保留MINA(微信小程序官方框架)的大部分API设计；无论你有无小程序开发经验，都可以轻松过渡上手。渐进增强，状态管理器(比如Redux)、Immutable.js、路由增强等扩展，当然你也可以自己编写一个新的插件。2、mpvue美团开源，mpvue（github地址请参见）是一个使用Vue.js开发小程序的前端框架。框架基于Vue.js核心，mpvue修改了V
Vue入门(学习笔记) Azмat javaScript javascript vue.js css html json
文章目录一、前端核心分析1.1、概述1.2、前端三要素1.3、表现层（CSS）1.4、行为层（JavaScript）二、前端发展史2.1、UI框架2.2、JavaScript构建工具2.3、三端同一2.4、后端技术2.5、主流前端框架ICEVantUIAtUICubeUlFlutterlonicmpvueWeUI三、了解前后分离的演变史3.1、后端为主的MVC时代3.2、基于AJAX带来的SPA时
MPVUE 开发微信小程序 textarea v-model 绑定不了数据凱歌小程序
1.原html代码2.js代码exportdefault{data(){return{userinfo:{},//用户信息bookid:'',//图书idinfo:{},//图书信息comment:'',//评论内容location:'',//地理位置phone:''//手机型号}},methods:{asyncaddComment(){//评论内容手机型号地理位置图书id用户的openidcon
uni-app入门 Alice_web
uni-app是一个使用Vue.js开发跨平台应用的前端框架，官网https://uniapp.dcloud.io/：特征1、跨平台更多真正做到“一套代码、多端发行”！条件编译：优雅的在一个项目里调用不同平台的特色功能！2、运行体验更好组件、api与微信小程序一致兼容weex原生渲染3、通用技术栈，学习成本更低vue的语法、微信小程序的api内嵌mpvue4、开放生态，组件更丰富支持通过npm安装
JAVA中的Enum 周凡杨 java enum 枚举
Enum是计算机编程语言中的一种数据类型---枚举类型。在实际问题中，有些变量的取值被限定在一个有限的范围内。例如，一个星期内只有七天我们通常这样实现上面的定义： public String monday; public String tuesday; public String wensday; public String thursday
赶集网mysql开发36条军规 Bill_chen mysql 业务架构设计 mysql调优 mysql性能优化
(一)核心军规 (1)不在数据库做运算 cpu计算务必移至业务层； (2)控制单表数据量 int型不超过1000w，含char则不超过500w；合理分表；限制单库表数量在300以内； (3)控制列数量字段少而精，字段数建议在20以内
Shell test命令 daizj shell 字符串 test 数字文件比较
Shell test命令 Shell中的 test 命令用于检查某个条件是否成立，它可以进行数值、字符和文件三个方面的测试。数值测试参数说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大于等于则为真 -lt 小于则为真 -le 小于等于则为真实例演示： num1=100 num2=100if test $[num1]
XFire框架实现WebService(二) 周凡杨 java webservice
有了XFire框架实现WebService(一)，就可以继续开发WebService的简单应用。 Webservice的服务端(WEB工程)：两个java bean类： Course.java package cn.com.bean; public class Course { private
重绘之画图板朱辉辉33 画图板
上次博客讲的五子棋重绘比较简单，因为只要在重写系统重绘方法paint（）时加入棋盘和棋子的绘制。这次我想说说画图板的重绘。画图板重绘难在需要重绘的类型很多，比如说里面有矩形，园，直线之类的，所以我们要想办法将里面的图形加入一个队列中，这样在重绘时就
Java的IO流西蜀石兰 java
刚学Java的IO流时，被各种inputStream流弄的很迷糊，看老罗视频时说想象成插在文件上的一根管道，当初听时觉得自己很明白，可到自己用时，有不知道怎么代码了。。。每当遇到这种问题时，我习惯性的从头开始理逻辑，会问自己一些很简单的问题，把这些简单的问题想明白了，再看代码时才不会迷糊。 IO流作用是什么？答：实现对文件的读写，这里的文件是广义的； Java如何实现程序到文件
No matching PlatformTransactionManager bean found for qualifier 'add' - neither 林鹤霄
java.lang.IllegalStateException: No matching PlatformTransactionManager bean found for qualifier 'add' - neither qualifier match nor bean name match! 网上找了好多的资料没能解决，后来发现：项目中使用的是xml配置的方式配置事务，但是
Row size too large (> 8126). Changing some columns to TEXT or BLOB aigo column
原文：http://stackoverflow.com/questions/15585602/change-limit-for-mysql-row-size-too-large 异常信息： Row size too large (> 8126). Changing some columns to TEXT or BLOB or using ROW_FORMAT=DYNAM
JS 格式化时间 alxw4616 JavaScript
/** * 格式化时间 2013/6/13 by 半仙 [email protected] * 需要 pad 函数 * 接收可用的时间值. * 返回替换时间占位符后的字符串 * * 时间占位符:年 Y 月 M 日 D 小时 h 分 m 秒 s 重复次数表示占位数 * 如 YYYY 4占4位 YY 占2位<p></p> * MM DD hh mm
队列中数据的移除问题百合不是茶队列移除
队列的移除一般都是使用的remov();都可以移除的,但是在昨天做线程移除的时候出现了点问题,没有将遍历出来的全部移除, 代码如下; // package com.Thread0715.com; import java.util.ArrayList; public class Threa
Runnable接口使用实例 bijian1013 java thread Runnable java多线程
Runnable接口 a. 该接口只有一个方法：public void run(); b. 实现该接口的类必须覆盖该run方法 c. 实现了Runnable接口的类并不具有任何天
oracle里的extend详解 bijian1013 oracle 数据库 extend
扩展已知的数组空间，例： DECLARE TYPE CourseList IS TABLE OF VARCHAR2(10); courses CourseList; BEGIN -- 初始化数组元素，大小为3 courses := CourseList('Biol 4412 ', 'Psyc 3112 ', 'Anth 3001 '); --
【httpclient】httpclient发送表单POST请求 bit1129 httpclient
浏览器Form Post请求浏览器可以通过提交表单的方式向服务器发起POST请求，这种形式的POST请求不同于一般的POST请求 1. 一般的POST请求，将请求数据放置于请求体中，服务器端以二进制流的方式读取数据，HttpServletRequest.getInputStream()。这种方式的请求可以处理任意数据形式的POST请求，比如请求数据是字符串或者是二进制数据 2. Form
【Hive十三】Hive读写Avro格式的数据 bit1129 hive
1. 原始数据 hive> select * from word; OK 1 MSN 10 QQ 100 Gtalk 1000 Skype 2. 创建avro格式的数据表 hive> CREATE TABLE avro_table(age INT, name STRING)STORE
nginx+lua+redis自动识别封解禁频繁访问IP ronin47
在站点遇到攻击且无明显攻击特征，造成站点访问慢，nginx不断返回502等错误时，可利用nginx+lua+redis实现在指定的时间段内，若单IP的请求量达到指定的数量后对该IP进行封禁，nginx返回403禁止访问。利用redis的expire命令设置封禁IP的过期时间达到在指定的封禁时间后实行自动解封的目的。一、安装环境： CentOS x64 release 6.4(Fin
java-二叉树的遍历-先序、中序、后序（递归和非递归）、层次遍历 bylijinnan java
import java.util.LinkedList; import java.util.List; import java.util.Stack; public class BinTreeTraverse { //private int[] array={ 1, 2, 3, 4, 5, 6, 7, 8, 9 }; private int[] array={ 10,6,
Spring源码学习-XML 配置方式的IoC容器启动过程分析 bylijinnan java spring IOC
以FileSystemXmlApplicationContext为例，把Spring IoC容器的初始化流程走一遍： ApplicationContext context = new FileSystemXmlApplicationContext ("C:/Users/ZARA/workspace/HelloSpring/src/Beans.xml&q
[科研与项目]民营企业请慎重参与军事科技工程 comsci 企业
军事科研工程和项目并非要用最先进，最时髦的技术，而是要做到“万无一失” 而民营科技企业在搞科技创新工程的时候，往往考虑的是技术的先进性，而对先进技术带来的风险考虑得不够，在今天提倡军民融合发展的大环境下，这种“万无一失”和“时髦性”的矛盾会日益凸显。。。。。。所以请大家在参与任何重大的军事和政府项目之前，对
spring 定时器-两种方式 cuityang spring quartz 定时器
方式一：间隔一定时间运行 <bean id="updateSessionIdTask" class="com.yang.iprms.common.UpdateSessionTask" autowire="byName" /> <bean id="updateSessionIdSchedule
简述一下关于BroadView站点的相关设计 damoqiongqiu view
终于弄上线了，累趴，戳这里http://www.broadview.com.cn 简述一下相关的技术点前端：jQuery+BootStrap3.2+HandleBars，全站Ajax（貌似对SEO的影响很大啊！怎么破？），用Grunt对全部JS做了压缩处理，对部分JS和CSS做了合并（模块间存在很多依赖，全部合并比较繁琐，待完善）。后端：U
运维 PHP问题汇总 dcj3sjt126com windows2003
1、Dede(织梦)发表文章时,内容自动添加关键字显示空白页解决方法：后台>系统>系统基本参数>核心设置>关键字替换（是/否），这里选择“是”。后台>系统>系统基本参数>其他选项>自动提取关键字，这里选择“是”。 2、解决PHP168超级管理员上传图片提示你的空间不足网站是用PHP168做的，反映使用管理员在后台无法
mac 下安装php扩展 - mcrypt dcj3sjt126com PHP
MCrypt是一个功能强大的加密算法扩展库，它包括有22种算法，phpMyAdmin依赖这个PHP扩展，具体如下：下载并解压libmcrypt-2.5.8.tar.gz。在终端执行如下命令： tar zxvf libmcrypt-2.5.8.tar.gz cd libmcrypt-2.5.8/ ./configure --disable-posix-threads --
MongoDB更新文档 [四] eksliang mongodb Mongodb更新文档
MongoDB更新文档转载请出自出处：http://eksliang.iteye.com/blog/2174104 MongoDB对文档的CURD，前面的博客简单介绍了，但是对文档更新篇幅比较大，所以这里单独拿出来。语法结构如下： db.collection.update( criteria, objNew, upsert, multi) 参数含义参数
Linux下的解压，移除，复制，查看tomcat命令 y806839048 tomcat
重复myeclipse生成webservice有问题删除以前的，干净 1、先切换到：cd usr/local/tomcat5/logs 2、tail -f catalina.out 3、这样运行时就可以实时查看运行日志了 Ctrl+c 是退出tail命令。有问题不明的先注掉 cp /opt/tomcat-6.0.44/webapps/g
Spring之使用事务缘由(3-XML实现) ihuning spring
用事务通知声明式地管理事务事务管理是一种横切关注点。为了在 Spring 2.x 中启用声明式事务管理，可以通过 tx Schema 中定义的 <tx:advice> 元素声明事务通知，为此必须事先将这个 Schema 定义添加到 <beans> 根元素中去。声明了事务通知后，就需要将它与切入点关联起来。由于事务通知是在 <aop:
GCD使用经验与技巧浅谈啸笑天 GC
前言 GCD(Grand Central Dispatch)可以说是Mac、iOS开发中的一大“利器”，本文就总结一些有关使用GCD的经验与技巧。 dispatch_once_t必须是全局或static变量这一条算是“老生常谈”了，但我认为还是有必要强调一次，毕竟非全局或非static的dispatch_once_t变量在使用时会导致非常不好排查的bug，正确的如下： 1
linux（Ubuntu）下常用命令备忘录1 macroli linux 工作 ubuntu
在使用下面的命令是可以通过--help来获取更多的信息1,查询当前目录文件列表：ls ls命令默认状态下将按首字母升序列出你当前文件夹下面的所有内容，但这样直接运行所得到的信息也是比较少的，通常它可以结合以下这些参数运行以查询更多的信息： ls / 显示/.下的所有文件和目录 ls -l 给出文件或者文件夹的详细信息 ls -a 显示所有文件，包括隐藏文
nodejs同步操作mysql qiaolevip 学习永无止境每天进步一点点 mysql nodejs
// db-util.js var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit : 10, host: 'localhost', user: 'root', password: '', database: 'test', port: 3306 });
一起学Hive系列文章 superlxw1234 hive Hive入门
[一起学Hive]系列文章目录贴，入门Hive，持续更新中。 [一起学Hive]之一—Hive概述，Hive是什么 [一起学Hive]之二—Hive函数大全-完整版 [一起学Hive]之三—Hive中的数据库(Database)和表(Table) [一起学Hive]之四-Hive的安装配置 [一起学Hive]之五-Hive的视图和分区 [一起学Hive
Spring开发利器：Spring Tool Suite 3.7.0 发布 wiselyman spring
Spring Tool Suite(简称STS)是基于Eclipse，专门针对Spring开发者提供大量的便捷功能的优秀开发工具。在3.7.0版本主要做了如下的更新：将eclipse版本更新至Eclipse Mars 4.5 GA Spring Boot(JavaEE开发的颠覆者集大成者，推荐大家学习)的配置语言YAML编辑器的支持(包含自动提示，