04-微信小程序踩坑2

发表于 | 分类于 |

1.在微信小程序项目中自定义组件时发现app.wxss全局样式没有应用，包括全局应用的字体图标。如何解决？

只要在自定义组件的样式中import全局样式文件即可。

在modal.wxss中：

1
@import "../../../app.wxss";

更正:
由于调试基础库没有设置版本,导致默认设置为低版本,但是低版本不支持自定义组件全局样式,改下版本就好.

2 修改swiper指示灯样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 修改swiper指示灯 */
.swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal{
  margin-bottom: 2rpx;
}
.swiper-box .wx-swiper-dot{
  width:10rpx;
  height: 10rpx;
  display: inline-flex;
  justify-content:space-between;
}
.swiper-box .wx-swiper-dot-active{
  width: 20px;
}
.swiper-box .wx-swiper-dot::before{
 content: '';
 padding: 0;
 flex-grow: 1; 
 background: rgba(255,255,255,0.3);
 border-radius: 5px;
}
.swiper-box .wx-swiper-dot-active::before{
 background:#fff;   
}

3 video自定义组件

3.1 自定义组件怎么获取video组件对象

1
VideoContext wx.createVideoContext(string id, Object this)

不要忽略了第二个参数: Object this

在自定义组件下，当前组件实例的this，以操作组件内 <video> 组件

1
this.videoContext = wx.createVideoContext(this.data.vid,this);

wx.createVideoContext

3.2 video组件封面图片在ios不显示

自定义封面图片即可

3.3 自定义组件属性不能用id,原因未知

这里我换用 vid 替换 id

1
2
3
4
5
6
7
8
9
<ll-video 
  vid="one"
  src="https:xxx.mp4"
  posterImage="http://iph.href.lu/400x400?text=%E5%8D%A0%E4%BD%8D"
  description="供应链的升级和全球化布局—从中国民营企业收购世界知名跨国公司说起"
  total="17万播放"
  time="17万播放"
  >
</ll-video>

4 position为fixed,设置bottom:0 时并没有到底

设置bottom:-1px;即可

5 小程序base64上传图片

1
2
3
4
5
6
7
8
9
10
11
wx.chooseImage({
  success: res => {
    wx.getFileSystemManager().readFile({
      filePath: res.tempFilePaths[0], //选择图片返回的相对路径
      encoding: 'base64', //编码格式
      success: res => { //成功的回调
        console.log('data:image/png;base64,' + res.data)
      }
    })
  }
})

6 保存图片的功能

参考链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
saveimg(){
  const canvasToTempFilePath=this.data.filePath;
  const _self = this;
  if (!_self.data.openStatus) {
    wx.openSetting({
      success: (result) => {
        if (result) {
          if (result.authSetting["scope.writePhotosAlbum"] === true) {
            _self.setData({"openStatus":true});
            _self.save(canvasToTempFilePath);
          }
        }
      },
      fail: () => { },
      complete: () => { }
    });
  } else {
    wx.getSetting({
      success(res) {
        // 如果没有则获取授权
        if (!res.authSetting['scope.writePhotosAlbum']) {
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success() {
              _self.setData({"openStatus":true});
              _self.save(canvasToTempFilePath);
            },
            fail() {
              // 如果用户拒绝过或没有授权，则再次打开授权窗口
              _self.setData({"openStatus":false});
              console.log('请设置允许访问相册')
              wx.showToast({
                title: '请设置允许访问相册',
                icon: 'none'
              })
            }
          })
        } else {
          // 有则直接保存
          _self.setData({"openStatus":true});
          _self.save(canvasToTempFilePath);
        }
      },
      fail(err) {
        console.log(err)
      }
    })
  }
},

save(canvasToTempFilePath){
  wx.saveImageToPhotosAlbum({
    filePath: canvasToTempFilePath,
    success() {
      wx.showToast({
        title: '图片保存成功，快去分享到朋友圈吧~',
        icon: 'none',
        duration: 2000
      })
    },
    fail() {
      wx.showToast({
        title: '保存失败',
        icon: 'none'
      })
    }
  })
},

7 小程序自定义eventbus

掘金-腾讯IVWEB团队-小程序开发经验：多页面数据同步

app.js

1
2
3
4
5
6
7
8
9
10
import Event from './utils/events';

onLaunch: function (){
    ...
    this.initEvents();
},
// 初始化EventBus事件总线
initEvents() {
    this.events = new Event();
},

监听事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// eventbus监听事件对象 
eventsListener: {}, 
// eventbus事件监听
eventsListening(){
  this.eventsListener.linkSubscriptionFocus= App.events.on('linkSubscriptionFocus', data => {
    console.log('我的动态页面收到发布动态通知：', data);
    debugger
    // 进行更新操作
    const index = this.data.dataList.findIndex(item=>item.us_id === data.us_id);
    this.setData({['dataList['+index+'].focus_type']:data.action});
  });
},
// 主动销毁监听事件
onUnload() {
  for (let i in this.eventsListener) {
    App.events.remove(i, this.eventsListener[i])
  } 
},

触发事件

1
App.events.emit('feedsLike', data)

8 小程序版本覆盖问题

小程序只能存在一个审核版本(包括已审核成功待发布的版本),只要提交审核就会覆盖上一版审核版本,请慎重!!!
小程序只能存在一个审核版本(包括已审核成功待发布的版本),只要提交审核就会覆盖上一版审核版本,请慎重!!!
小程序只能存在一个审核版本(包括已审核成功待发布的版本),只要提交审核就会覆盖上一版审核版本,请慎重!!!

9 小程序监听滑动事件

使用方法:

1
<view class="side-menu__bd" bindtouchstart="touchStart" bindtouchend="touchEnd"></view>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 触摸开始事件
touchStart: function(e) {
  console.log("TCL: e", e)
  this.time=0;
  this.touchDotX = e.touches[0].pageX; // 获取触摸时的原点
  this.touchDotY = e.touches[0].pageY;
  // 使用js计时器记录时间    
  this.interval = setInterval(()=>{
    this.time++;
  }, 100);
},
// 触摸结束事件
touchEnd: function(e) {
  console.log("TCL: e", e)
  let touchMoveX = e.changedTouches[0].pageX;
  let touchMoveY = e.changedTouches[0].pageY;
  let tmX = touchMoveX - this.touchDotX;
  let tmY = touchMoveY - this.touchDotY;
  if (this.time < 20) {
    let absX = Math.abs(tmX);
    let absY = Math.abs(tmY);
    if (absX > 2 * absY) {
      if (tmX<0){
        console.log("左滑=====")
      }else{
        console.log("右滑=====")
        this.closeMenu()
      }
    }
    if (absY > absX * 2 && tmY<0) {
      console.log("上滑动=====")
    }
  }
  clearInterval(this.interval); // 清除setInterval
  this.time = 0;
}

一些不错的资料
掘金-yck-近两万字小程序攻略发布了