wepy第一次边学习边实战项目笔记

添加小程序，兑换各种视频教程/数据资源。

因为是公司选的框架做实战项目，所有基本是边学边做项目，遇到的一些坑，可能解决方案不完全正确，欢迎指出。

1. wepy创建项目：在安装npm的情况下。

    1.1 全局安装wepy-cli-p： npm install wepy-cli -g。

    1.2 创建项目在需要的文件夹里：wepy new myproject （1.7.0之后的版本使用 wepy init standard myproject 初始化项目，使用 wepy list 查看项目模板）。

    1.3 进入项目：cd myproject。

    1.4 安装依赖：npm install。

    1.5 启动项目：wepy build --watch （或npm run dev）。

    1.6 预览：打开微信开发者工具， 导入该项目。

2. app.wpy文件：

<style  lang="less">	
	@import "./common/less/iconfont.less";
	page{
		background: #F5F5F5;		
	}
</style>

<script>
import wepy from 'wepy'
import 'wepy-async-function'



import { setStore } from 'wepy-redux'
import configStore from './store'

const store = configStore()
setStore(store)

export default class extends wepy.app {
  config = {
    pages: [
      'pages/authorize',  //放在首位就会是第一个被加载显示的页面。
      'pages/home',
      'pages/classify',
      'pages/order',
      'pages/my',      
    ],
    window: {
      backgroundTextStyle: 'dark',
      navigationBarBackgroundColor: '#FFFFFF',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black',
      enablePullDownRefresh: false,
      backgroundColor: '#EFEFEF'
    },
    "tabBar": {  //其他页面跳转到tabbar的pagePath页面时，必须用wepy.switchTab({ url: '/pages/home' })
      "color": "#999999",
      "selectedColor": "#ff6a3c",
      "backgroundColor": "#ffffff",
      "borderStyle": "black",
      "list": [{
        "pagePath": "pages/home",
        "text": "首页",
        "iconPath": "images/icon_home.png",
        "selectedIconPath": "images/icon_home_active.png"
      }, 
      {
        "pagePath": "pages/classify",
        "text": "官文",
        "iconPath": "images/icon_message.png",
        "selectedIconPath": "images/icon_message_active.png"
      }, 
      {
        "pagePath": "pages/order",
        "text": "账单",
        "iconPath": "images/icon_bill.png",
        "selectedIconPath": "images/icon_bill_active.png"
      }, {
        "pagePath": "pages/my",
        "text": "我的",
        "iconPath": "images/icon_info.png",
        "selectedIconPath": "images/icon_info_active.png"
      }]
    }
  }

  globalData = {}

  constructor () {  //开启requestfix，promisify之后才能调用wepy.api接口（如wepy.login(),wepy.switchTab等所有接口）
    super()
    this.use('requestfix')   
    this.use('promisify')
  }
}
</script>

    2.1 引入iconfont图标字体文件iconfont.less：因为创建的项目默认用的是less，就创建一个iconfont.less文件，代码如下：

之后使用 ：

<!--这是'>'箭头图标-->
<view class="iconfont">&#xe60f;</view> 

/*在http://www.iconfont.cn/阿里巴巴矢量图标网址生成在线图标代码*/
@font-face {  
  font-family: 'iconfont';  /* project id 1193612 */
  src: url('//at.alicdn.com/t/font_1193612_jyhao6kr4ee.eot');
  src: url('//at.alicdn.com/t/font_1193612_jyhao6kr4ee.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1193612_jyhao6kr4ee.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1193612_jyhao6kr4ee.woff') format('woff'),
  url('//at.alicdn.com/t/font_1193612_jyhao6kr4ee.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1193612_jyhao6kr4ee.svg#iconfont') format('svg');
}

.iconfont {
    font-style: normal;
    font-size: 16px;
    font-family: 'iconfont' !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

3. wepy的无法渲染本地图片：参考https://blog.csdn.net/qq_42231156/article/details/90241349。

4. wepy的循环遍历渲染，需要放在repeat或block标签中才能实现：

<swiper class="screen-swiper square-dot"  >
	<repeat for="{{swiperList}}" key="index" index="index" item="item">
		<swiper-item >			
			<image class="item_img" src="{{item.url}}"></image>
			<view>{{item}}</view>
		</swiper-item>
	</repeat>
</swiper>

5. components文件里的组件页面的点击事件，需要写到methods里面才能触发，直接放到onLoad同级下，无法触发会被警告，以及点击传参需要：这种写法

<view class="nav_box" bindtap="toHomeDetail({{item}})"></view>  //这样传参
methods={
  	async toHomeDetail(item){
	  	console.log(item)	  	
	  	wx.navigateTo({
		  url: 'home_detail?id='+item.id+"&type="+item.type
		})
	}
}

 

6. 有时候数据和标签在微信开发者工具上无法渲染出来：npm run dev (或wepy build --watch)重启即可。

7. 小程序的swiper实现小程序左右滑动的导航栏：

<swiper   display-multiple-items="{{displayMultipleItems}}" bindchange="currentChange">
    <repeat for="{{orderNavsLists}}" key="index" index="index"  >
          <swiper-item>
            <view class="swiper-item" bindtap="tapCurrentChange({{index}})">
              <text class="{{activeNavIndex==index?'swiper-item-text-active':'swiper-item-text'}}">{{item.name}}{{index}}</text>
            </view>
          </swiper-item>
    </repeat>
</swiper>
data = {  
    displayMultipleItems: 5,
    activeNavIndex: 0,
    orderNavsLists: [
      {
        id: 1,
        name: '全部'
      }, {
        id: 2,
        name: '已付款'
      }, {
        id: 3,
        name: '未付款'
      }, {
        id: 4,
        name: '全部'
      }, {
        id: 1,
        name: '全部'
      }, {
        id: 2,
        name: '已付款'
      }, {
        id: 3,
        name: '未付款'
      }, {
        id: 4,
        name: '全部'
      }
    ]
  }
 methods={
    currentChange (e) {
      this.activeNavIndex = e.detail.current
    },
    tapCurrentChange(index) {
      this.activeNavIndex = index
    },      
  }
<style lang="scss">
swiper{
    height: 80rpx;
    .swiper-item{
      width: 150rpx;
      height: 80rpx;    
      text-align: center;     
    }
    .swiper-item-text-active{
      display: inline-block;
      font-size: 35rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #45CBEF;
      border-bottom: 1rpx solid #45CBEF;
      box-sizing:border-box;
    }
    .swiper-item-text{
      display: inline-block;
      font-size: 30rpx;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 30rpx;
      color: #999999;
    }
  }
</style>

8. wepy的小程序返回顶部功能：

 <view class="to_top" bindtap="clickHandle" wx:if="{{isShow}}">
    <text>回到顶部</text>
 </view>

data={
    isShow:false
}
methods={
   clickHandle(){ //点击回到顶部
     wx.pageScrollTo({
        scrollTop: 0
      })
   },
   onPageScroll(e) { //小程序的页面滚动事件
      var scrollTop = e.scrollTop
      if (scrollTop > 50) {
        this.isShow= true
        this.$apply()  //必须，能及时渲染
      } else {
        this.isShow= false
        this.$apply() //必须，能及时渲染
      }     
   } 
}

9. wepy中子组件向父组件传递事件:

this.$emit('toTopClickHandle', true)

父组件需要在events中接受：

<toTop  @toTopClickHandle="toTopClickHandle"></toTop>
events ={
    'toTopClickHandle': (item) => { // 接受子组件传递过来的toTopClickHandle事件
      wx.pageScrollTo({
        scrollTop: 0
      })
    }
  }

10. wepy中父组件向子组件动态传值：如将请求返回的值返给子组件。

//父组件动态向子组件动态传值：.sync修饰符+this.$apply()
<HomeDetailCards :type.sync="title" :lists.sync="lists"></HomeDetailCards>
 wepy.request({
      url: this.$parent.globalData.baseUrl + this.path,
      data: {
        mobile: 1,
        status: 1,
        page: this.page,
        listRows: this.listRows
      }
    }).then(data => {
      if (data.status === 1) {
        var result = data[this.path]       
        this.lists = result.data
        this.totle = result.totle
        console.log('获取' + this.title + '详情')
        console.log(this.lists)
        this.$apply() // 父组件向子组件动态传值，必须
      } else {
        showToast('获取数据失败，请重新加载！')
      }
    })

//子组件中：twoWay: true双向绑定
<repeat for="{{lists}}" key="index" index="index" item="item" wx:if="{{lists}}">
	<view class="card_box" bindtap="toHomeDetailInfo({{item}})"></view>	
</repeat>
 props={
    lists: {
	  type: Array,
	  twoWay: true,
      default: () => []
    },
    type: {
	  type: String,
	  default: ''
    }
  }