实习经验 | 微信小程序的一些小tip

最近实习时在做小程序,有些小tip就一起放到这个文章里了

小程序input弹出软键盘时露出输入框

使用cursor-spacing,可根据页面进行大小修改

<input  cursor-spacing="150" maxlength="5" type="text" placeholder="请输入姓名"/>

获取用户手机号码

通过bindinput绑定获取号码的函数

<input maxlength="11" type="number" placeholder="请输入11位手机号码" bindinput="getPhone" value="{{userForms.phone}}" cursor-spacing="200"/>

getPhone(e) {
    var val = e.detail.value;
    this.setData({
      userForms: form
    });
  },

用户信息轮播

需要在页面顶部只做一个轮播效果,使用swiper

<swiper autoplay="true" interval="4000" vertical="true" circular="true" class='swiper_container'>
  <block wx:for="{{recentAsks}}" wx:for-item="it" wx:key="k">
    <swiper-item  class='userMessage'>
      <image class='userAvatar' src="{{it.imgs}}"></image>
      <text>{{it.txts1}}<text style='font-weight:bold;'>{{it.txts2}}</text>{{it.txts3}}</text>
    </swiper-item>
  </block>
</swiper>

滚动效果必须放在外层swiper上,滚动内容放在swiper-item中,block是不加任何效果的容器,只是支持循环.
滚动效果具体数据可见官网

分享给朋友

通过给 button 组件设置属性 open-type=“share”,可以在用户点击按钮后触发 Page.onShareAppMessage() 事件,如果当前页面没有定义此事件,则点击后无效

onShareAppMessage(Object)监听用户点击页面内转发按钮（ 组件 open-type=“share”）或右上角菜单“转发”按钮的行为，并自定义转发内容

<button class='shareImg' open-type='share'>分享</button>

onShareAppMessage: function () {
    console.log(this.data.priceRange)
    let urlLib = `/pages/carselect/chooseSpec?serieid=${this.data.serie_id}`
    return {
      title: this.data.seriename+'火热促销中',
      path: urlLib
    }
  }

可以看这个文章有更多关于分享的内容:小程序分享