记录使用wepy2.0开发小程序遇到的坑

一、先说基本使用

1、安装npm install wepy-cli -g全局wepy脚手架
如果不想全局安装或是需要兼容wepy1.x的老项目，可以把wepy2.0安装到项目本地。

2、使用wepy init standard wepy-project 初始化一个wepy2.0的项目
此时可以选择vuex作为store，官方实现的。

二、使用中遇到的一些坑

1、如何动态绑定样式？

除了官方说明的基本的样式绑定外，这种在vue中常用的写法，需要改成下面的这种，才能生效。

 <text v-for="(city,index) in item.cityList" :key="index" :class="[{ 'selected' : isSelected == city.siteName  }]" class="city_name" @tap="selectedCity(city)">{{city.siteName}}</text>

而在vue中，我们可以是这样使用，类似三元表达式一样的。

<div v-for="(city,index) in item.cityList" :key="index">
 <span  :class="isSelected == city.siteName ? 'selected' :''" class="city_name" @tap="selectedCity(city)">{{city.siteName}}</span>
 </div>

另外，v-for渲染 在vue中，是在外层遍历。而小程序中，则直接的使用v-for的元素上渲染。不明白的可以渲染输出对比一下元素节点就明白了了。这里是没有vue中灵活的。

在vue中，我们可以这么绑定样式：

<div class="item" v-for="(draw,index) in drawPrizes" :class="['item'+index]"> </div>

直接在小程序wepy2中使用是不生效的。

对应的语法应该是：

<block v-for="(item,index) in drawPrizes">
	<div class="{{'item item'  + index }}" data-class="{{'item'  + index }}">
	</div>
</block>

2、在wepy2.0中，表单组件，官方是实现了v-model双向绑定的，不用自己去写。但是，目前，组件是没有实现的。这个和vue一样，还是需要自己实现。总之，肯定是比wepy1.x要好用了。

3、在 wepy2.0 中，事件对象都 被 wepy 包了一层

在原生的小程序和wepy1.x中， 我们可以通过e.detail获取事件对象，以及绑定在原生节点上的自定义属性。

但是在wepy2.0中，我们需要使用e.$wx.detail去获取，套了一层$wx。具体，可以打印出来观看对比。

4、小程序中可以使用自定义组件和第三方组件

每个页面，都有一个配置选项

<config>
{
    navigationBarTitleText: '世联集',
    usingComponents: {
      'build-item': '../components/buildItem'
    }
}
</config>

直接向使用vue中一样，标签引用就可以了。属性绑定和事件绑定，与vue语法一样。

5、如何在wepy2.0中使用globalData

在官方示例中，我们可以看到app.wpy中定义了一个这个属性。对应的就是小程序的全局数据对象。

wepy.app({
  hooks: {
    // App 级别 hook，对整个 App 生效
    // 同时存在 Page hook 和 App hook 时，优先执行 Page hook，返回值再交由 App hook 处
    'before-setData': function (dirty) {
      console.log('setData dirty: ', dirty)
      return dirty
    }
  },
  globalData: {
    userInfo: null
  },
  

那么，如何在其他页面中获取这个全局对象，并且修改他呢？

需要通过this.$app.$options.globalData来获取或设置。
直接赋值就修改了。

好坑啊？ 文档太少了。 通过this.$app可以拿到根组件app.wpy
然后就可以看到其他的东西拉。

6、小程序如何分包以及分包有哪些注意事项

小程序一个包大小限制在2M，超出后就需要分包。不然无法上传代码。
分包就是在app.wpy页面进行配置。

需要注意一下几点：

1. tabber页面必须在主包
2. 一些公共函数等只能放在主包，分包可以调用访问主包的方法资源，反过来，则不行。

所以我们一般把非tabber页面，并且，不是很急切初次加载的页面分包出去。

配置：
参考

 pages: [
      'pages/index',
      'pages/build/list'
    ],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    permission: {
      'scope.userLocation': {
        'desc': '你的位置信息将用于小程序位置接口的效果展示'
      }
    },
    subPackages: [
      {
        'root': 'packageBuild',
        'pages': [
          'pages/home/search',
          'pages/home/findhouse'
        ]
      }
    ],

对应的，默认的pages文件夹，放置主包页面，
然后建一个packageBuild分包对应的文件夹名，名字可以自定义，需要对上即可。分包内依然可以有自己的静态图片、组件等。一样的。
src目录参考：

|-------components
|-------packageBuild
|       |------pages
|       |------components
|-------pages
|       |------index.wpy
|       |------build
|-------store
|-------app.wpy

分包后，分包前与分包后，最大的区别就分包的页面路径变了，所有，在主包或分包直接户型跳转的时候，页面路径需要修改。

主包跳转分包示例：

wx.navigateTo({
   url: '/packageBuild/pages/build/houseTypePic?buildId=' + this.buildId + '&picId=' + picId
})

分包跳主包示例：

wx.navigateTo({
url = '/pages/build/house?buildId=' + this.buildId + '&isShare=1'
})

总结就是需要把分包的根路径带上。

7、如何在app.wpy中调用vuex，即store中的方法呢？

如果向其他页面一样，先import store 然后挂载调用的话，会包使用vuex之前，需要先vue.use(vuex)这个错误。

怎么办？ 难道不能用了？ 我需要在app.wpy中的钩子函数中监听小程序的状态，来调用store的某个方法。

使用方法有两种：
参考 官方isssue https://github.com/Tencent/wepy/issues/2447

方法1：
只能通过先require('./store').default 然后通过this.$options.store;拿到store ，然后调用。
wepy.use(vuex) 这个函数 在app.wpy当前页执行。

import wepy from '@wepy/core'
import eventHub from './common/eventHub'
import vuex from '@wepy/x'

wepy.use(vuex)
wepy.app({
  store: require('./store').default,
  hooks: {
    // App 级别 hook，对整个 App 生效
    // 同时存在 Page hook 和 App hook 时，优先执行 Page hook，返回值再交由 App hook 处
    'before-setData': function (dirty) {
      console.log('setData dirty: ', dirty)
      return dirty
    }
  },
  globalData: {
    userInfo: null,
    login: false
  },

  onLaunch() {
    this.$store = this.$options.store;
    this.$store.dispatch('incrementAsync');
  },

  methods: {
  }
})
</script>

方法2：
删掉app.wpy中官方写的wepy.use(vuex) 全部操作放到store下面的index.js文件中去执行。然后app.wpy中直接引入最后的store文件

app.wpy

import wepy from '@wepy/core'
import eventHub from './common/eventHub'
// import vuex from '@wepy/x'

// wepy.use(vuex)

import store from '@/store';

wepy.app({
  hooks: {
    // App 级别 hook，对整个 App 生效
    // 同时存在 Page hook 和 App hook 时，优先执行 Page hook，返回值再交由 App hook 处
    'before-setData': function (dirty) {
      console.log('setData dirty: ', dirty)
      return dirty
    }
  },
  globalData: {
    userInfo: null
  },

  onLaunch() {
    store.dispatch('incrementAsync');
  },

  methods: {
  }
})

store文件夹下面的index.js

import Vuex from '@wepy/x'

// 添加下面两行
import wepy from '@wepy/core';
wepy.use(Vuex)
export default new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    increment (state) {
      state.counter++
    },
    decrement (state) {
      state.counter--
    }
  },
  actions: {
    increment ({ commit }) {
      commit('increment')
    },
    decrement ({ commit }) {
      commit('decrement')
    },
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

官方文档根本就没有任何说明。网上搜索好多都没有答案。希望可以帮到你。

8、要根据后台给的URL动态生成二维码

参考使用一下现成的库
https://github.com/yingye/weapp-qrcode

9、wepy 里正确调用 this.selectComponent

在wepy1.x版本里，是这样用的：

this.$wxPage.selectComponent()

但是在wepy2.x版本里，已经改了用法了。

this.$wx.selectComponent('选择器')

示例：引入组件，并且调用组件自身上的方法。
写聊天页面的时候，为了解决输入框要顶上，但是聊天列表不顶上的问题。

<template>
  <div class="container-wrap">
   <calendar2 id="calendar" config="{{calendarConfig2}}" />
  </div>
</template>
wepy.page({
  store,
  data: {
    calendarConfig2: {
      multi: true
    }
  },
    onReady() {
    const calendar = this.$wx.selectComponent('#calendar').calendar
    calendar.jump({year: 2018, month: 6, date: 6})
  }
  })
</script>

<config>
{
    navigationBarTitleText: 'demo',
    usingComponents: {
       "calendar2": "../components/calendar2/index",
    }
}
</config>

10、小程序文本框自带手机键盘的高度，监听focus事件可以获取到

<textarea  bindfocus="fixedPosition"/>

page.js
//输入框聚焦时
fixedPosition(event){
//加个延时器保险一下
    setTimeout(() => {
        this.setData({
            fixedScrollTop:  event.detail.height?  event.detail.height:  0, //整个页面的高度往上顶软键盘的高度
            scrollTop:  this.data.messages.length  *  1000 //聊天列表滚动到最低
        });
    });
},

10、部分机型就算遮罩层也无法阻挡底层页面的滚动，可以在遮罩层的view加一个属性catchtouchmove=“ture”

<view  class="container"  catchtouchmove="ture">

11、做打开文档预览功能的时候，苹果手机不能主动识别文件的后缀名，要手动添加fileType字段

wx.downloadFile({
    url:  'xxxxxxxx.xxx', //可以是后台传过来的路径
    success:  function(res) {
    console.log('下载成功',res)
    const  filePath  =  res.tempFilePath
    wx.openDocument({
        filePath:  filePath,
        fileType:  fileSuffix

12、苹果手机时间格式的特殊要求（h5也是这样）

苹果手机不支持这种格式2020-01-01 00:00:00，前面带-的，要转换成下面这种才支持
2020/01/01 00:00:00，这种才支持，顺便写一个方法

let createTime = res.date.replace(/-/g, '/');

13、企业微信里中文传递要转码

使用web-view跳转到时候遇到一个问题，这个页面可以分享，分享出去的url路径带了中文，在微信端跳转的时候没问题，但是在企业微信跳转打不开，问题是中文没有转码

onShareAppMessage() {
return {
    path:  `${this.route}?pathUrl=${encodeURIComponent(this.data.url)}&userId=${wx.getStorageSync('userId')}`
};
}