微信小程序组件开发框架wepy的使用

作者: 独孤久见 | 来源:发表于2018-03-19 15:28 被阅读125次

wepy是类似vue风格开发微信小程序的微信小程序框架，相比原生的最大就是组件化的方式快捷开发模式，还有引入promise异步的写法，对网络请求的封装等比较友好的快速的开发模式，所以自己试着学习做一个简单项目开始。

WePY的安装或更新都通过npm进行。

全局安装或更新WePY命令行工具

npm install wepy-cli -g

在开发目录中生成Demo开发项目

wepy new myproject

进入项目目录

cd myproject

安装依赖

npm  install

开启实时编译

wepy build --watch

生成项目目录结构

目录文件简单介绍：
1、dist里面是自动编译出来的小程序项目文件，一般不用管，只为工具打开预览使用；
2、src是开发目录包括组件模板文件components、页面文件pages、还有入口文件app.wpy等一些开发目录；

开发工具预览请选择dist文件目录，打开前需要注意的是：

这是wepy官方的注意事项截图

基础的准备工作已经做完，接下来就开始做一个简单组件Demo
app.wpy相当全局配置文件大概的代码结构如下：

//css文件
<style lang="less">
.container {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
}
page{
  background-color: #F4F4F4;
}
</style>

<script>
import wepy from 'wepy';
import 'wepy-async-function';
import Promise from 'promise-polyfill';
//promise导入前需要安装，具体安装看这个链接
//https://github.com/Tencent/wepy/wiki/wepy%E9%A1%B9%E7%9B%AE%E4%B8%AD%E4%BD%BF%E7%94%A8Promise

export default class extends wepy.app {//相当声明一个原生小程序app.json和app.js全局页面
  config = {//config配置项同原生开发方式一致
    pages: [
      'pages/index'
    ],
    window: {
      'backgroundTextStyle': 'light',
      'navigationBarBackgroundColor': '#fff',
      'navigationBarTitleText': '',
      'navigationBarTextStyle': 'black',
      'enablePullDownRefresh': true
    },
    'tabBar': {
      'color': '#6e6d6b',
      'selectedColor': '#e64340',
      'borderStyle': 'white',
      'backgroundColor': '#fff',
      'box-shadow': '0 0 6px 0',
      'list': [{
        'pagePath': 'pages/index',
        'iconPath': 'images/home-off.png',
        'selectedIconPath': 'images/home-on.png',
        'text': '首页'
      },
      {
        'pagePath': 'pages/index',
        'iconPath': 'images/home-off.png',
        'selectedIconPath': 'images/home-on.png',
        'text': '首页'
      }
      ]
    }
  }

  globalData = {//定义全局变量page页面可以通过this.$parent获取对应值
  
  }

  constructor() {//注册对应引入的插件
    super()
    this.use('requestfix')
    this.use('promisify');
  }

  onLaunch(e) {//生命周期函数--监听小程序初始化
    
  }

  onShow() {
   
  }


}
</script>

pages里面有一个index文件就是页面文件，在这里可以写页面代码或者引入对应的组件

<style lang="less">
  page{
    background-color: #F4F4F4;
  }
  .userinfo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .userinfo-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .userinfo-nickname {
    color: #aaa;
  }
  .topLogo{
    border-top: 1px solid #F3F3F3;
  }
.topLogo,.topLogo image{
  width: 750rpx;
  height: 125rpx;
 }
 .page-session {
  width:94%;
  white-space: nowrap;
  padding: 24rpx 24rpx;
}

.search-session {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: center;
  padding-left: 12rpx;
  box-sizing: border-box;
  background-color: #fff;
  height: 75rpx;
  border-radius: 6px;
}

.search-session .search-holder {
  flex: 1;
  color: #aaa;
  font-size: 30rpx;
  font-weight: 500;
  margin-left: 20rpx;
}

.search-session .search-input {
  flex: 1;
  color: #4a4a4a;
  font-weight: 500;
  font-size: 27rpx;
  margin-left: 20rpx;
}

.search-session .search {
  font-size: 35rpx;
  color: #fff;
  height: 75rpx;
  padding: 0px 2px 0px 25px;
  border-radius: 0px 6px 6px 0px;
  background-color: #373F70;
  display: inline- block;
  line-height: 75rpx;
  text-align: center;
  padding-right: 50rpx;
}

</style>
<template>
  <view class="container">
    <view class='topLogo' wx:if="{{storeInfo.logosrc != ''}}">
      <image src="{{storeInfo.logosrc}}"></image>
    </view>
    <mySwiper :bannerList.sync="list"></mySwiper>
    <view class="page-session" wx:if="{{list.length > 0}}">
      <view class="search-session">
        <icon type="search" size="16"></icon>
        <text class="search-holder" bindtap="tapSearch">输入搜索</text>
        <text class="search" bindtap="handleSearch">搜索</text>
      </view>
    </view>
    <NavIcon :classify.sync="navList"></NavIcon>
    <myCoupon :typeList.sync="typeList" st="2"></myCoupon>
    <newsInfo :newsList.sync="newsList"></newsInfo>
    <indexProduct :configList.sync="configList"></indexProduct>
  </view>
</template>

<script>
  import wepy from 'wepy';
  import mySwiper from '../components/myswiper';//轮播组件的引入

  export default class Index extends wepy.page {
    config = {//页面config配置
      navigationBarTitleText: '首页'
    }

    components = {//组件注册
      mySwiper: mySwiper,
    }

   data = {//页面渲染数据
     list:[],//轮播
   };



   /**
   * 首页轮播
   */
    async initData () {//自定义的方法
      let that = this;
      wepy.request("这里输入数据接口请求地址")
      .then((res) => {
        if (res.data.Code == 0) {
          let list = [];
          let rawData = res.data.Data.Config;
          for(var i=0;i<rawData.length;i++){
            var d = res.data.Data.Config[i];
            d.ShowImg = this.$parent.globalData.image_logo_banner + d.ShowImg;
            list.push(d);
          }
          this.list = list;//相当原生setData({})
          that.$apply();//有回调需要加这个方法这个进行数据脏检查
        }
      });
     }

     methods = {}   //wxml事件处理函数对象，存放响应wxml中所捕获到的事件的函数，如bindtap、bindchange

     events = {//事件监听，比如子组件通过this.$emit进行事件广播接收
         'tapBanner': (index) => {
            console.log(index)
          }
     }

    onLoad () {
      this.initData ();//加载调用
    }

    onShow () {

    }
  }
</script>

轮播组件页面：

<style lang="less">
    .swiper-container {
    width: 749rpx;
    position: relative;
    }

    .swiper_box {
    width: 100%;
    height: 468rpx;
    }

    swiper-item image {
    width: 100%;
    display: inline-block;
    overflow: hidden;
    height:468rpx;
    }

    .swiper-container .dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20rpx;
    display: flex;
    justify-content: center;
    }

    .swiper-container .dots .dot {
    margin: 0 8rpx;
    width: 14rpx;
    height: 14rpx;
    background: #fff;
    border-radius: 50%;
    transition: all 0.6s;
    opacity: 0.5;
    }

    .swiper-container .dots .dot.active {
    width: 14rpx;
    opacity: 1;
    }

</style>
<template>
  <view class="swiper-container">
    <swiper class="swiper_box" autoplay="{{autoplay}}" wx:key="id" interval="{{interval}}" duration="{{duration}}" bindchange="swiperchange" circular="true">
      <repeat for="{{bannerList}}" item="item">
        <swiper-item>
          <image  @tap="tap({{index}},{{item.LinkType}},{{item.LinkValue.Id}},{{item.LinkValue.Url}},{{item.LinkValue.Name}})"  src="{{item.ShowImg}}" class="slide-image" width="750rpx" height="375rpx" />
        </swiper-item>
      </repeat>
    </swiper>
    <view class="dots">
      <block wx:for="{{bannerList}}" wx:for-index="index" wx:for-item="item" wx:key="id">
        <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
      </block>
    </view>
  </view>
</template>
<script>
  import wepy from 'wepy'

  export default class ListAnother extends wepy.component {

  props = {//接收父组件转递参数
    bannerList: {
      type: Object,
      default: []
    }
  }

  data = {
    indicatorDots: true,
    autoplay: true,
    interval: 3000,
    duration: 1000,
    swiperCurrent:0
  }

  methods = {
        tap (index,LinkType,id,Url,Name){
          this.$emit('tapBanner', index,LinkType,id,Url,Name);//事件广播
        }
    };


  }
</script>

这样一个使用wepy开发的一个轮播组件就完成了，数据可能要自己模板一下，才能使用。
官方文档：https://tencent.github.io/wepy/document.html#/?id=wepyconfigjs%E9%85%8D%E7%BD%AE%E6%96%87%E4%BB%B6%E8%AF%B4%E6%98%8E

微信小程序组件开发框架wepy的使用

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

微信小程序开发

前端xuexi

程序员

微信小程序

微信小程序

微信小程序