小程序日常开发问题细节

1:input组件placeholder字体颜色

写在placeholder-class里面的color并不生效，需要写在placeholder-style里面；

<input class="account-input input-ext"
   value="{{accountValue}}" 
   auto-focus maxlength="11" 
   type="number" 
   placeholder="请输入账号" 
   placeholder-style="color:#cecece;" 
   bindinput="bindAccoountInput">
</input>

2:Button定义后有灰色边框

去掉使用：

<view class="logout" bindtap="logout">
    <button type="primary" >退出登录</button>
</view>

button::after{
  border:0
}

3:样式注意：静态使用class 动态使用style

4:页面跳转传参和接参

onLogFilterHandler(){
    var that = this
    wx.navigateTo({
      url: '/pages/construction_log/log_filter/log_filter?type=1&haveFilterData='+
      encodeURIComponent(JSON.stringify(that.filterData)),
      events: {
        callback(result){
          if(Judge.isNonNullMap(result)){
            that.filterData = result
          }else{
            that.filterData = {}
          }
          that.onResetData()
        }
      }
    })
  },


onLoad(options) {
  console.log('options',options)
}

5:页面跳转接收参数错误

问题：

案例和解决方案：

onLogFilterHandler(){
    var that = this
    wx.navigateTo({
      url: '/pages/construction_log/log_filter/log_filter?type=1&haveFilterData='+
      encodeURIComponent(JSON.stringify(that.filterData)),
      events: {
        callback(result){
          if(Judge.isNonNullMap(result)){
            that.filterData = result
          }else{
            that.filterData = {}
          }
          that.onResetData()
        }
      }
    })
  },

onChangeData(data){
    let type = Number(data.type)
    let haveFilterData ;
    if(data.haveFilterData!=undefined){
      haveFilterData = JSON.parse(decodeURIComponent(data.haveFilterData))
    }
}

6:回调函数相关

this.events.emit(‘callback’,result)

/**
 * 生命周期函数--监听页面加载
 */
onLoad(options) {
  this.events =  this.getOpenerEventChannel()
  this.initPeriod()
  this.onUpdateLevel()
  this.onChangeData(options)
},

onLogFilterHandler(){
    var that = this
    wx.navigateTo({
      url: '/pages/construction_log/log_filter/log_filter?type=1&haveFilterData='+
      encodeURIComponent(JSON.stringify(that.filterData)),
      events: {
        callback(result){
          if(Judge.isNonNullMap(result)){
            that.filterData = result
          }else{
            that.filterData = {}
          }
          that.onResetData()
        }
      }
    })
  },

7:页面刷新

在onShow()中监听执行

8:频繁切换组织后，tab显示问题

<view style="height: {{categoryHeight}}px;">
  <l-tabs swipeable="true" 
    style="height: {{categoryHeight}}px;"
    l-active-class="l-active-class"
    l-inactive-class="l-inactive-class"
    l-line-class="l-line-class" 
    l-header-line-class	="l-header-line-class"
    bind:linchange="goToPage">
      <block wx:for="{{tabs}}" wx:key="id">
        <l-tabpanel tab="{{item.name}}" key="{{item.id}}" slot="{{item.id}}">
          <statistics_view tabId="{{item.id}}"/>
        </l-tabpanel>
      </block>
  </l-tabs>
</view>

<view wx:if="{{tabId==0}}" class="day-container">
    <block wx:for="{{proheader}}" wx:key="index">
      <view>{{item}}</view>
    </block>
  </view>
  <view wx:if="{{tabId==1}}" class="day-container">
    <block wx:for="{{dayHeader}}" wx:key="index">
      <view>{{item}}</view>
    </block>
  </view>
  <view wx:if="{{tabId==2}}" class="day-container">
    <block wx:for="{{monthHeader}}" wx:key="index">
      <view>{{item}}</view>
    </block>
  </view>
  <view wx:if="{{tabId==3}}" class="day-container">
    <block wx:for="{{peopleHeader}}" wx:key="id">
      <view>{{item}}</view>
    </block>
  </view>

9:页面之间传参

使用data - 。
注意的是：在接收的时候，会统一转化为小写。

10:组件参数传递尽量不要使用关键字或者标识符（例如id等）

11:上传图片

使用微信小程序的uploadFile。
name：为file

wx.uploadFile({
  filePath: filePath,
  name: 'file',
  url: url,
  header: defaultHeader,
  formData: params,
  success: success,
  fail: fail
})

12:版本问题（尽量使用最新版本例如canvas、 wx.chooseMedia等等）

13:页面引入

WXML 提供两种文件引用方式import和include。

14:地图的使用

1:直接使用就可以使用腾讯地图

2:当前经纬度可以显示当前地图位置

longitude="108.31343"
latitude="22.83393"

3:地图标点（注意：markers必须是数组，是对象的话不起作用）

markers是数组形式

4:自定义气泡显示

在这里插入代码片<map class="page"
  id="towerMap"
  latitude="{{latitude}}"
  longitude="{{longitude}}"
  scale="{{scale}}"
  markers="{{markers}}"
  bindcallouttap="calloutTap"
  bindregionchange="regionChange"
  bindupdated="updatedMap"
>
  <cover-view slot="callout" >
    <block wx:for="{{markers}}" wx:key="index" >
      <cover-view class="custom-callout" style="padding-right:{{item.showClickName ? '0rpx': '16rpx'}}" marker-id="{{item.id}}" >
        <cover-view class="call-name-text" >{{item.groupName}}</cover-view>
        <cover-view class="call-pro-text" wx:if="{{item.showClickName}}">{{item.projectCount}}</cover-view>
      </cover-view>
    </block>
  </cover-view>
</map>

15:uchart的使用

1:地图会频繁都动的问题

opts{
  update: true,
}

备注：方案一 （可能会有别的方案）
2:地图x轴数字太长换行的问题(format暂时不起作用)

xAxis: {
  rotateLabel:true,
  rotateAngle:45
}