小程序日常开发技术总结

20210728 小程序依赖安装用npm cnpm可能会出问题

20201204 小程序配置全局分享 邀请人机制 

// 设置全局分享
  share: function () {
    // 监听路由切换 间接实现全局分享
    wx.onAppRoute(function (res) {
      // 获取加载的页面
      let pages = getCurrentPages();
      // 获取当前页面的对象
      let currPage = pages[pages.length - 1];
      let data;
      if (currPage) {
        // 定义页面参数值
        let urlOptions = '';
        if(currPage.options){
          let keyList = Object.keys(currPage.options);
          for(let i=0;i<keyList.length;i++){
            let key = keyList[i];
            urlOptions+='&'+key+'='+currPage.options[key]
          }
        }
        data = currPage.data;
        if (!data.isOverShare) {
          data.isOverShare = true;
          currPage.onShareAppMessage = function () {
            return {
              title: '找对象就上云对象',
              path: currPage.route+'?shareId=' + getApp().userInfo._id + urlOptions
            };
          }
        }
      }
    })
  },
// 之后在app.js文件中onLaunch函数下调用该方法

20200215 小程序设置锚点

<scroll-view scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" style="height:100vh">
  <view class="recommend-title" id="miao3">为您推荐</view>
  <recommend></recommend>
</scroll-view>

20200215 小程序遍历对象属性

<view wx:for="{{obj.basicAttribute}}" wx:for-index="key">{{key}}：{{item}}</view>

20200212 自定义导航栏高度和胶囊高度一致

navMenu: uni.getMenuButtonBoundingClientRect()
<view :style="{marginTop:navMenu.top+'px', height:navMenu.height+'px'}"></view>
navHeight: getApp().statusBarHeight + wx.getMenuButtonBoundingClientRect().top+16

20200122 云函数安装依赖wx-server-sdk

cnpm install --save wx-server-sdk@latest

20200115 子组件如何调用父组件的方法

// 首先得在父组件内将需要调用的方法 暴露出来 如下面的 bind:run="getList"
<specs id="specs" isShow="{{dialog}}" dialogType="4" bind:run="getList"></specs>
// 然后再在子组件内直接取这个run 即可调用父组件的getList方法
this.triggerEvent("run",params)

20200114 父组件如何调用子组件的方法

// 定义id直接获取子组件 然后调用其方法
<specs id="specs"></specs>
this.selectComponent("#specs").getDetail();

20200114 最完美的底部弹框解决方案

<!-- 分享弹框 -->
<view class="popup" catchtouchmove='true' wx:if="{{isShow}}" bindtap="closeShare">
  <view class="popup_bottom" catchtap="catchDialog">
    <view class="title">
      <text></text>分享<image mode="widthFix" class="close" bindtap="closeShare" src="/img/close.png"></image>
    </view>
    <view class="share">
      <button plain="true" open-type="share" data-shareInfo="{{shareInfo}}">
        <image src="/img/weixin.png"></image>分享给好友
      </button>
      <button plain="true" catchtap="openPoster">
        <image src="/img/photo.png"></image>生成海报
      </button>
    </view>
  </view>
</view>

// 关闭分享弹框
closeShare() {
  this.setData({
    isShow: false
  })
},
// 虚拟方法 用于控制点击整个页面弹框关闭 而点击下面内容部分不关闭
catchDialog() {},
// 内部所有点击事件用catchtap

20200114 在组件中如何自定义分享内容

正常的操作可以在onShareAppMessage()中完成，但是onShareAppMessage()只能写在page中 , 在自定义组件中无效，在page中也是只有定义了该函数，右上角才会显示转发按钮。
解决办法：1.将要分享的标题图片和路由以对象的形式传给自定义组件，2.自定义组件拿到后再将其暴露出来，3.然后我们再在使用组件的page的onShareAppMessage()去获取该对象

// 引用分享弹框
<share isShow="{{shareDialog}}" shareInfo="{{shareInfo}}"></share>
<image catchtap="openShare" data-obj="{{item}}" src="/img/share.png"></image>

// 打开分享弹框
  openShare(e){
    let obj = e.currentTarget.dataset.obj
    this.setData({
      shareDialog:true,
      shareInfo:{
        title: obj.name,
        imageUrl: obj.firstImageItems[0],
        path: 'pages/mine/planDetail??planId=' + obj.id,
      }
    })
  },

// 在组件中 接收shareInfo并暴露出来
<button plain="true" open-type="share" data-shareInfo="{{shareInfo}}">分享给好友</button>

// 在原页面 监听分享对象
  onShareAppMessage: function (res) {
    let shareInfo = res.target.dataset.shareinfo;    // 注意这块 你在组件中定义的属性可能包含大写但这边接收统一是全小写的
    return {
      title: shareInfo.title,
      path: shareInfo.path,
      imageUrl: shareInfo.imageUrl
    }
  }

20200113 最完美的小程序轮播图解决方案

<swiper indicator-dots="true" indicator-color="#B2AFAF" indicator-active-color="#FD1D1B" autoplay="true" style="width:100%;height:750rpx">
  <block wx:key="{{index}}" wx:for="{{obj.imageItems}}">
    <swiper-item>
      <image mode="aspectFit" bindtap='previewBanner' data-url='{{item}}' src="{{item}}" style="width:100%;height:100%;"></image>
    </swiper-item>
  </block>
</swiper>

 

20200111 canvas在自定义组件中不生效

原因解析：createCanvasContext方法有两个参数，在page页面默认传了一个this，而在组件里面需要手动传入。
解决办法：let ctx = wx.createCanvasContext('shareImg',this)    // 后面加个this

20200102 新增编辑成功提示后返回上一页

wx.showToast({
  title: '保存成功',
  duration: 1000,
  success: function () {
    setTimeout(function () {
      wx.navigateBack()
    }, 1000);
  }
});

20191225 button内有多个元素时修改其默认样式

<button class='left' open-type="share">
  <image src='/img/share.png'></image><text>分享</text>
</button>

.footer .left{
  overflow: visible;
  line-height: normal;
  background: transparent;
  padding: 0;
}
.footer button::after {
  border: none;
}

20191223 小程序绘制canvas二次打开不显示的问题

原因剖析：用传统的wx:if去控制canvas的显示与隐藏，当第一次canvas绘制完毕后，后面再次无法绘制，因为该对象已存在，所以就为空也就是不显示。
解决办法：用css样式display属性去控制其显示和隐藏，默认进入页面后只绘制一次，后续只进行它的展示与隐藏。