小程序的组件api

67 阅读1分钟

小程序的一些总结:

1、纵行scroll-view,横向scroll-view,

<scroll-view
    id="scroll-view"
    scroll-y="{{canscroll}}"
    enhanced
    scroll-anchoring
    show-scrollbar="{{false}}"
    bounces="{{false}}"
    scroll-top="{{scrollTop}}"
    bindscroll="scrollEvent"
    scroll-with-animation="true"
    bindscrolltoupper="scrollToUpper">
<scroll-view>

<scroll-view scroll-x="{{true}}"   show-scrollbar="{{false}}" class="scroll-view" enhanced>
</scroll-view>  

2、wx的api方法

//获取dom元素高度 宽度
const query = wx.createSelectorQuery()
query.select('#inToView4').boundingClientRect();

query.exec(function (res) {
var cardWidth = res[0].width - mlr;
});
let saveCompanyIdRes = wx.getStorageSync('saveCompanyId');// 获取缓存中公司  
wx.showToast({
    title: '该空间已是您的常驻空间',
    icon: 'none',
    duration: 3000
});

3、小程序登录

  <div class="login-box">
    <button class="avatar-wrapper"
      v-if="canIUseGetUserProfile"
      open-type="chooseAvatar" 
      bind:chooseavatar="onChooseAvatar">
      <image class="avatar" src="{{avatarUrl}}"/>
    </button>  
    <button class="bind-btn"
    open-type="getPhoneNumber"
    bindgetphonenumber="phonenumberAuth"
    >微信手机号认证</button>
  </div>
{
  onLoad() {
    //看有没有权限
    if (wx.getUserProfile) {
      this.canIUseGetUserProfile = true;
    }
  },
 methods:{
   //在获取头像
   onChooseAvatar(e) {
      this.avatarUrl = e.$wx.detail.avatarUrl;
      let avatarUrl = this.avatarUrl;
      let that = this;
      wx.getFileSystemManager().readFile({
        filePath: avatarUrl,
        encoding: 'base64',
        success: function(res) {
          that.avatarUrl = 'data:image/png;base64,' + res.data;
          setAvatar(that.avatarUrl);
        },
      });
    },
    //获取手机号 手机号认证
    phonenumberAuth(e) {
      let detail = e.$wx.detail;
      let code = detail.code;
      this.getHttpPhoneNumber(code);
    },
    // code 换取手机号 从后台获取手机号
    getHttpPhoneNumber(code) {
      getHttpPhoneNumber(code)
        .then((res) => {
          let data = res.data || {};
          let phoneNumber = data.purePhoneNumber;
          if (phoneNumber) {
            store.commit('setUserPhone', phoneNumber);
         
          } else {
            console.log('没获取到手机号');
          }
        })
        .catch((error) => {
          console.log('获取手机号的接口失败');
        });
    },
 }
  }