小程序

小平爷爷说，不管黑猫白猫，抓到老鼠就是好猫；对于我来说，不管大问题小问题，填了坑了后能爬起来就是成长；所以继续加油！这是一篇未完待续的填坑之旅…

1. 拿到一个已有的项目，gulp项目运行失败？频频报错？

截图找不到了......先立字为证吧

描述：在本地clone项目后，项目用了gulp自动化构建工具，在自己的电脑上运行时，无法运行，node装了，yarn也装了，yarn install 也装了相应的包；全局环境也配置好了，在终端输入gulp报错；查看gulp的版本也能看到，被项目中使用的版本一致；查了资料才知道，是自己的node版本太高了，用了最新的12.0.0版本，gulp支持到node V8版本；于是卸载后安装了v8版本，重新输入gulp后项目就可以运行了；当然，这是一种笨方法；可以用nvm—node版本管理工具，控制node版本的升降级；

2.warning:Do not have xx handler in current page
虽然不是error,但是一条黄色的warning提示还是让人很难受；
出现这条提示的原因，是在渲染层定义了一个事件，具体是那个页面中的事件，可以全局搜索一下呀，vscode左边那个搜索的按钮，但是在逻辑层js文件中没有对应的方法；到.wxml中找到这个事件，删掉这个用不到的事件，或者在js中定义事件；

3.广告位的样式问题
小程序为暗色背景，放入卡片广告/自定义广告后，广告本身字体为黑色，看不见字体，本想改变一下background,但是改不动，尝试加了父容器也无效，官方文档给出的解释：

4.跑马灯效果
项目中有用到跑马灯的效果，其实，在小程序中，可以直接用swiper的功能实现这样的效果；垂直或横向滚动的都可以实现；不消失轮播点，设置自动播放…

5.switch的样式
项目中使用的switch大小和微信默认的switch大小有区别，查了查网上的修改方法（如下图），用了后，但是样式也有点问题呀；想了一下，用了变形，transform:scale(0.7)，改好了，大概也算是一种方法了。

6.qq小程序开发者工具没有报错，但是页面加载不出来了。。。
关掉，重新打开，好了；

7.设置单个页面背景色（铺满整个页面）
可以在对应页面的wxss中，给page设置background背景色；

8.给页面设置背景图片
background：url（）不支持本地图片，可以使用base64,或者网络图片，可以使用cosbrowser工具https://cloud.tencent.com/developer/article/1181547

9.app.globalData获取的全局变量为null
在app里获取基础数据 如用户信息、用户地址等 在其他页面调取时 往往app数据还没有获取 其他页面已经进入onLoad生命周期，这时可以使用回调函数;新建微信小程序时，index.js代码中已经写了这个方法；

  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  }

10.在scroll-view进行列表渲染，弹性盒布局无效，想要设置横向滚动，已经给容器定宽，使用了弹性盒布局，已经justify-content:space-between，应该横向排列，但是竖着排列；
解决：在scroll-view中包一个view,给这个view设置弹性盒布局；

  <scroll-view class="scroll-avatar" scroll-x="true">
    <view class='avatar-preview-container'>
       <block wx:for="{{flagList}}">
          <view class='avatar-item'>
          <image src="{{userInfo.avatarUrl}}" mode="aspectFit"  />
          <image src="{{item}}" mode="aspectFit"  />  
        </view>
      </block>  
    </view>   
  </scroll-view>

.scroll-avatar{
  width:90%;
  height: 200rpx;
  margin:10rpx auto;  
}
.avatar-preview-container{
  display: flex;
  justify-content:space-between;
  align-items: center;
  flex-wrap: nowrap;
}
.avatar-item{
  width:150rpx;
  height:150rpx;
  position: relative;
  margin:40rpx 30rpx;
  flex-shrink: 0;
  flex-grow: 0;
}
.avatar-item image{
  width:150rpx;
  height: 150rpx;
  position: absolute;
  left:0;
  top:0;
}

11.在scroll-view中设置禁止触摸穿透无效
在自定义弹窗时，我们想要禁止触摸穿透，一般设置：catchtouchmove=true即可

<view catchtouchmove='true'></view>

但是，在遇到弹窗的内容比较多时，使用scroll-view容器比较合适的时候，另一个bug出现了，设置catchtouchmove无效，触摸其他地方是，屏幕可以滚动；在微信小程序社区中看到这个问题没有教好的办法，我这有个笨方法；使用swiper容易，vertical属性设为true，indicator-dots=false不显示指示点，autoplay=false不自动轮播，也能实现效果；

12.使用web-view，报错，提示webview域名不合法，请配置 DomainConfig{host=‘mqq.tenpay.com’},
需要在后台配置业务域名，业务域名！！！

13.onShareAppMessage转发事件中，转发出去以后，查看转发消息，安卓手机显示正常，ios手机不显示图片；
首先看官方文档：图片可以使用网络图片，或本地图片
我是用的是本地图片，用ios手机测试时，有的能显示，有的显示不了，有的第一次转发显示，第二次点进去，再转发就不行了；于是，换成了网络图片，注意一定要再后台配置好域名白名单管理，ok了；这个问题有点‘知其然不知所以然’；

14.扫描模拟器生成的预览二维码小程序好用，但是把小程序提审后，扫描体验版小程序二维码，但是部分功能不好用，无法获取参数；
这个问题，挺揪心的，明明已经测试好用了，提审了，结果看体验版的不好用；搜索了官放社区，类似问题如下：

我们在生成体验版小程序时，需要配置启动页面和参数，需要配置好；否则有些和参数有关系的功能无法实现；
15.报错：Failed to load local image resource /pages/XXX/
检查jmage的src对不对

16.报错：regeneratorRuntime is not defined
async-await是ES7的语法，截止我写这篇文章为止，小程序还是不支持async-await语法的，所以需要使用regenerator这个库
解决步骤https://segmentfault.com/a/1190000015691620?utm_source=tag-newest

17.最近踩的坑贼多，当然，和自己菜有很大关系！多向别人学习呀~
17.小程序跳转传参时，参数带？文号和”=“等于号 会自动截取，如何解决？
答：先 encodeURIComponent 一下，取到值之后再 decodeURIComponent ；这个方法真棒！

//app.js中
loginApp1(userInfo) {
    let that = this;
    return new Promise((resolve, reject) => {
      qq.login({
        success(res) {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          console.log("login: ", res);
          that
          .sendRequest(CONST.API_LOGIN, "POST", {
            code: res.code,
            from:that.globalData.scene?that.globalData.scene:"",
            appid:1010,
            user_info:userInfo,
          })
          .then(
            res => {
              console.log("open_id request: ", res);
              if(res.data.result == 1){
                console.log('login success')
                that.globalData.open_id = res.data.open_id;
                that.globalData.access_token = res.data.access_token
                resolve(res.data)
              }else{
                console.log('login Fail',res.data.errMsg)
                reject();
              }          
            },
            fail => {
              console.log("open_id request fail: ", fail);
              reject();
            }
          );
        },
        fail(res) {
          reject();
        }
      })
    })
  },

//home.js中
app.loginApp1()
      .then(res => {
        that.getTagList();
        that.getNickList("");    
        that.goNav(options);
      })

18.小程序ios系统，openIdReadyCallback回调函数不好用？？
答：改用优雅的promise吧！

19.在单页面里自定义顶部导航，json文件里已做好如下配置：

  "navigationStyle":"custom",
   "usingComponents": {
     "navbar":"/components/navbar/navbar" 
  }

模拟器上好用（只显示自定义的navBar)，但是真机上，自定义navBar组件和原有默认的navBar同时存在；
检查发现，在app.json中，忘了把页面加入到pages中；加入进入就好了

"pages": [
    "pages/home_v2/index/index"
    ]

千言万语，汇成一句：加油呀！自信点！