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: ''
    }
  }