微信小程序初体验

VisuperviReborn
248 阅读3分钟

1.map组件遇到的问题以及解决办法

当时的需求是要在地图上画线，然后能够轨迹回放，看了一下小程序开发的文档，就是加一个polyline属性，觉得挺简单的啊，一顿操作之后发现marker点都赋值到points这个数组去了，但是就是不显示轨迹线。百思不得其解，觉得可能是地图的原因，又把地图从百度地图换成腾讯地图，结果还是不行。尝试把赋值写在回调里面，然鹅并没有什么用。这他娘的我无解了啊，把代码贴出去让人家做过这块东西的人看，人家说你写的没毛病啊。然后我就浏览微信开发的社区，发现有一条，如果使用setData给数组赋值的时候，先把data里面的数组赋值给临时数组，然后把数据写入到临时数组中，然后再用setData把这个临时数组赋值给data里面的数组，我当时躺床上准备睡觉了，想了一下polyline也是一个数组呀，就试了一下，果然成功了，我不知道为什么微信小程序的数组赋值要这样？难道是因为它异步的原因么？

2.wxss

该怎么说呢，这个东西有坑也有好的一面，坑就是颜色不能缩写成三位的，而且感觉小程序里面的组件自带什么相对定位什么的。然后就是不能在这里写图片的路径，会报错，只能在data中或者内联样式中写

3.自定义组件与父组件两者相互传值

这一方面与vue类似，如果你熟悉vue的父子传值这一块就很好理解了

<1>父传给子组件

结合我项目里面的情况，在项目里面只会显示一个图标，点击图标会在左侧弹出相关的导航，这个时候我就想不能把他们全部放在一个wxml中，这个时候就要把这些放在一个组件中才合适。 首先在父组件的json中开启引用组件

"usingComponents": {
    "userInfo": "../components/yyyyy/XXXXXComponents",
    "terminal":"../components/yyyy/XXXXXXComponents",
    "dropDown":"../components/yyyyy/XXComponent"
  }

在父组件中使用子组件

 <userInfo class="info" id="userInfo" maskShow="{{maskShow}}" bind:getMaskControl="maskControl">
      <view slot="terminalName">{{terminalName}}</view>
      <view slot="terminalStatus">{{terminalStatus}}</view>
    </userInfo>

这里面的slot就可以向子组件传值，是不是类似vue？ 然后子组件接收值

 <view class="name"><slot name="terminalName"></slot></view>
 <view class="status"><slot name="terminalStatus"></slot></view>
<2>子组件如何向父组件传值
 <userInfo class="info" id="userInfo" maskShow="{{maskShow}}" bind:getMaskControl="maskControl">
      <view slot="terminalName">{{terminalName}}</view>
      <view slot="terminalStatus">{{terminalStatus}}</view>
    </userInfo>

还是这段代码，这里面包含了自定义属性的绑定，自定义事件的绑定 在父组件中定义函数

  maskControl(e){
    this.setData({
      maskShow: e.detail
    })
  },

在子组件中定以能够触发父组件函数的方法

   changeInfo(e) {
      let that = this;
      that.triggerEvent('getMaskControl', true)
    },

在vue中的话应该是$emit进行触发的吧。

<3> 父组件如何调用子组件的方法

先要获取子组件

this.userInfo = this.selectComponent("#userInfo")

下面是调用

    that.userInfo.getUserInfo((res)=>{
      console.log("index调用结果");
      console.log(res)
      that.setData({
        terminalName:res.name,
        terminalStatus:res.status
      })
    });

总结

还有一些比较简单的，比如说导航如何加上左上角的返回箭头，input如何定义1px的边框，如何缩进，switch组件如何定义大小，这些就不说了，还有如何构造一个表格等。上面的觉得比较有意思的。不管别人看到还是看不到，自己记录一下。

avatar
文章
阅读
粉丝