使用mpVue开发微信小程序记录

一、新增页面

在src/pages下面新建文件夹，并且新建xxx.vue/main.js/main.json文件
app.json文件新增页面路径
ctrl+c退出 npm run dev重新编译
xxx.vue页面结构





 
            或者

mpvue和mpvue-weui
mpvue是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

【官网】http://mpvue.com/mpvue/

mpvue-weui是基于mpvue框架和小程序原生组件的基础样式库，可供快速开发。
【官网】https://kuangpf.com/mpvue-weui/

二、新增组件

在src/components下新建test.vue文件
test.vue (与页面结构一致)

使用组件
在xxx.vue页面上使用

组件间的传值
① 父组件传值给子组件
父组件.vue

  
// 使用:号绑定一个result属性名，传递的值为父组件的resultMsg

data () {
  return {
    resultMsg: '我是父组件传给子组件的值'
  }
},

② 子组件接收父组件传递过来的值
子组件.vue



export default {
   // ① 通过props接收信息 
   // 这里props引用的是父组件在子组件上绑定的属性名，它的值就是传递过来的值
  props:['result'], 
  data () {
    return {
      // ...
    }
  },
}

props的三种方式：

// 第一种:
props: ['result']

// 第二种:
props: {
    result: String  // 这里指定了字符串类型，如果类型不一致会警告的哦
}

// 第三种:
childCom: {
    type: String,   // 这里指定类型
    default() {
       return ''    // 这里设置默认值，如果父组件未传入则使用默认值
    }
}

③ 子组件向父组件传值
子组件.vue

// 给一个input绑定一个blur事件


methods: {
  data: function () {
    return {
      inputValue: ''  
    }
  },
  blurFn () {
    this.$emit("changeValue", this.inputValue) 
    // 子组件发射自定义事件 testValue, 并且传递值 inputValue
    // 如果要传递多个值，写法为 this.$emit("事件名", 值1，值2，值3) 
  }
}

④ 父组件接收子组件传递过来的值
父组件.vue


// 父组件在子组件上使用@事件名="方法名"接收，其中事件名是子组件$emit发射的事件名

methods: {
  // 在方法里定义一个接收值的函数
  parentChangeValue(value){
    console.log(value);  // 这里的value就是子组件传递过来的inputValue的值
  }
}

三、模板语法

for循环


           // 注：嵌套循环需指定不同的索引
        {{v.value}}

条件渲染


  A


  B


  C


  Not A/B/C

属性绑定与事件绑定

a标签 
// 用@事件名="函数名" 绑定事件  .stop是修饰符，阻止冒泡



// 用:属性名="变量名"绑定。注：布尔值也需要使用:号绑定，否则被视为字符串。

4.Class 与 Style 动态绑定

xxxxx   
// 'active' 类名  isActive 是否绑定的判断条件

xxxxx
// 例: activeColor: '#ccc', fontSize: 24  转化后 
xxxxx

四、常用demo

上拉加载、下拉刷新

// ① 导入组件
import xview from "@/components/xview";

// ② 声明组件
components: { xview,noDevices,msgModal,devModal },

// ③ 使用组件

  
    
      
    
  


// 注释: 
// pulldownrefresh 下拉刷新监听函数 在这个方法里做刷新列表动作
// loadmore 上拉加载监听函数 在这个方法里做加载下一页动作
// scroll 滚动事件 不做处理
// hideLoadMore 是否在加载完后隐藏上拉加载的文字
// ref="名称"   可通过 _this.$refs.名称.方法名 调用组件内部的方法

表单




methods: {
  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.mp.detail.value)
  },
  formReset() {
    console.log('form发生了reset事件')
  }
}

modal弹层组件
xxxModal.vue 弹层组件结构

//  弹层结构


// props 接收父组件传递值: showModal控制显示隐藏 title弹层标题 
props: ['showModal','title'],

// 关闭弹层事件
methods: {
  preventTouchMove(){},  // 禁止屏幕滚动 只需要一个空的函数 
  onCancel() {
    this.$emit("hideModalFn")  // 触发父组件关闭方法(注意没有传递值)
  },
}

父组件.vue

// ① 导入弹层组件
import xxxModal from "@/components/xxxModal";

// ② 声明组件
components: { xxxModal },

// ③ 使用组件 使用:showModal :title传递值给弹层组件 @hideModal接收子组件发射的事件


// ④ data定义要传递的值
data () {
  return {
    showModal: false,
    title: '提示'
  }
}

// ⑤ methods里定义子组件触发的父组件方法
methods: {
  hideModalFn(){
     this.$set(this.$data,'showModal',false);  // 关闭弹层
  }
}

// ⑥ 显示弹层的方法
  // 某个元素绑定showModalFn点击事件

// methods里定义showModalFn方法
methods: {     
  showModalFn(){ 
     this.$set(this.$data,'showModal',true);  // 显示弹层
  }
}

滑动删除demo

// demo结构

  
    
      // ... 展示出来的demo内容
    
     
      删除
        // 删除按钮，滑动前隐藏，左滑后展示
  


// 函数
methods: {
    // ① 在加载列表数据时初始化滑动属性type
    queryList(){
      // 添加滑动参数
      this.List.forEach(function (item) {
        this.$set(item,'type',0);   // type 0 默认没有左滑
　　　 })
    },
    // ② 滑动开始获取startX
    touchStart(e){
      // 获取移动距离，可以通过打印出e，然后分析e的值得出
      this.startX = e.mp.changedTouches[0].clientX;
    },
    // ③ 滑动结束获取endX
    touchEnd(e,index){
        // 获取移动距离
        this.endX = e.mp.changedTouches[0].clientX; 
        // 移动距离大于60,滑动元素的type设为1,其它为零
        if(this.startX-this.endX > 60){
            for(let i=0;i
ul {
  width: 100%;
  li {
    -webkit-transition: all 0.2s;  // 动画过渡
    transition: all 0.2s;
    width: calc(~'100% + 90px');   // 这里的90px是删除按钮和左右间距的宽度
    height: 74px;
    line-height: 74px;
    align-items:center;
    display:flex;
    .content {
       width: calc(~'100% - 90px');  // 内容区减去这个宽度
    }
    .delect{
      width: 40px;
      height: 40px;
      line-height:40px;
    }
    &[data-type="0"]{   
      transform: translate3d(0,0,0);   // 没有滑动【重要】
    }
    &[data-type="1"]{
        transform: translate3d(-40px,0,0);  // 滑动后向左移动40px【重要】
    }
  }
}

五、样式类

公共样式放在App.vue的标签内
模块私有样式放在各模块的标签内
less常用语法
① 嵌套


  
  


// css写法
.parent {
  background: #f8f8f8;
  margin: 0 auto;
}
.parent .child-one {
  color: red;
  font-size: 14px;
}
.parent .child-two {
  color: blue;
  font-size: 16px;
}

// less写法
.parent {
  background: #f8f8f8;
  margin: 0 auto;
  .child-one {
    color: red;
    font-size: 14px;
  }
  .child-two {
    color: blue;
    font-size: 16px;
  }
}

② &的使用


  
  


// css 写法
ul li {
  color: #333;
}
ul li.active {
  color: blue;
}

// less 写法
ul {
  li {
    color: #333;
    &.active {            // 这里的 &.active == li.active
      color: blue;
    }
  }
}

// 例如
li:after {

}

也可以写成

li {
  &:after {

  }
}

& 向上寻找

③ calc()

// css 写法
div {
  calc(100% - 60px);
}

// less 写法
div {
  calc(~'100% - 60px');
}

④ 注释

// less 
div {
  width: 100%;
  height: 100%;
  // color: #333;
  // background: #f8f8f8;      // 这两行就被注释掉了，不会被编译在样式里
  margin: 0 auto;
}