小程序踩坑日志（四）-----Wepy

小程序踩坑日志（四）-----Wepy

Wepy是 腾讯参考了Vue 等框架对原生小程序进行再次封装的框架，更贴近于 MVVM 架构模式, 并支持ES6/7的一些新特性。对于经常接触vue的开发者，当然更愿意接触这个框架

官方文档：https://tencent.github.io/wepy/document.html#/?id=快速入门指南

全局安装wepy命令行工具

npm install wepy-cli -g

初始化项目

//我安装的版本号是1.7.3
//1.7.0之后的版本使用 wepy init standard myproject 初始化项目，反之wepy new myproject
wepy init standard myproject

切换至目录，安装依赖

cd xxx
npm install

开启实时编译

wepy build --watch

$preload : 给页面加载preload数据

加载preload数据后，跳转至另一个页面时，在onLoad方法中可以获取到上个页面的preload数据。

  // page1.wpy
  this.$preload('userName', 'G');
 

  // page2.wpy
  onLoad (params, data) {
      console.log(data.preload.userName);
  }

mixins 文件夹的用处

Mixin基类，用于复用不同组件中的相同功能。换句话说，就是被公用的方法 ，

**wepy中方法的执行顺序是先找自身的方法，然后找mixins中的，如果方法名冲突，会优先执行自己的方法，然后执行mixins中的方法。 **

mixins/test.js

import wepy from 'wepy';
export default class testMixin extends wepy.mixin {
      methods = {
        tap () {
          this.mixin = 'mixin data was changed'
          console.log('mixin method tap')
        }
      }
}

mixins基类与本页面预处理函数（onload onshow）的执行顺序

先执行mixin中的onload 然后执行页面的onload 其次执行mixins的onshow 最后执行 自己的onshow

Wepy获取地址栏参数

可在onload中获取到，params是地址栏传递的参数，data.preload可用于接受上个页面以this.$preload传递的数据，两个没有任何关系的页面不可用这个方法获取

  export default class Index extends wepy.page {
      
      onLoad(params, data) {
           console.log(params)
           /* 浏览器输出输出
           {id:'1',name:'admin'}
           */
        }
      
  }

Wepy 组件循环渲染

当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签< repeat >

用法如下

<style lang="less">
</style>
<template>
    <view>
      <!--组件循环渲染-->
      <repeat for="{{list}}" key="index" item="item">
        <counter class="counter" :syncTitle.sync="item.name"></counter>
      </repeat>
    </view>
</template>
<script>
    import wepy from 'wepy';
    //引入子组件
    import counter from "@/components/counter";
    export default class Signin extends wepy.page {
        config = {
            navigationBarTitleText: "test"
        };
        components={
          counter:counter,
        };
        data = {
          list:[
            {name:"admin",age:"10"},
            {name:"admin1",age:"11"},
            {name:"admin2",age:"12"},
            {name:"admin3",age:"13"},
          ],
        };
        onLoad(params, data){};
        methods = {};
        onLoad() {}
    }
</script>

效果如下

props传值

父传子，单项动态传值

父组件
<counter class="counter" :syncTitle.sync="parentTitle"></counter>

import counter from "@/components/counter";
export default class Signin extends wepy.page {
     components={
          counter:counter,
        };
        data = {
          parentTitle:"父向子单向动态传值",
        };
}

微信弹出框

wx.showToast({
	title: '成功',
	icon: 'succes',
	duration: 1000,
	mask:true
})

		wx.showModal({
            title: '提示',
            content: '模态弹窗',
            success: function (res) {
                if (res.confirm) {
                    console.log('用户点击确定')
                }else{
                   console.log('用户点击取消')
                }
 
            }
        })

wx.showActionSheet({
  itemList: ['item1', 'item2', 'item3'],
  success: function(res) {
    console.log(res.tapIndex)
  },
  fail: function(res) {
    console.log(res.errMsg)
  }
})