小程序的thirdScriptError ..... is not a function 报错的解决方法

在这里先说下我做的案例,顺便大家可以看看

项目样式图

前端代码

//前端代码
<!--团队介绍  -->
    <view class="m-team" wx:if="{{tabs[2].selected}}">
        <view bindtap="onTapAddMember" class="m-addBtn">
            <view>+ 添加成员</view>
        </view>
        <view class="m-memberItem m-clear" wx:for="{{memberList}}" wx:key="uniqueMember">
            <view bindtap="onTapDelMember" class="m-delMemeber" data-memberid="{{item.id}}">
                <image src="../../resource/icon-del.png"></image>
            </view>
            <view catchtap="onTapChangeMemberAvatar" class="m-memberAvatar" data-avatar="{{item.id}}">
                <image mode="aspectFill" src="{{item.avatarSrc}}"></image>
            </view>
            <view class="m-memberInfo" style="width:{{memberInfoWidth}}px">
                <input bindinput="onTapInputTeam" data-id="{{item.id}}" data-name="name" placeholder="姓名" type="text" value="{{item.name}}"></input>
                <input bindinput="onTapInputTeam" data-id="{{item.id}}" data-name="position" placeholder="公司职位" type="text" value="{{item.position}}"></input>
            </view>
            <view catchtap="onTapUpMember" class="m-upTeamArrow" data-id="{{item.id}}" wx:if="{{index==0?fale:true}}">
                <image src="../../resource/upArrow.png"></image>
            </view>
            <view catchtap="onTapDownMember" class="m-downTeamArrow" data-id="{{item.id}}" wx:if="{{index==memberList.length-1?fale:true}}">
                <image src="../../resource/upArrow.png"></image>
            </view>
        </view>

在data声明一个参数memberList空数组

data: {

    memberList: [],},

上传图片的方法

//上传图片 
// param img 图片;
function fileupload(mdl = '',callback) {
  var datas = [];
  wx.chooseImage({
    count: 1,// 默认9
    sizeType: ['compressed'],// 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album','camera'],// 可以指定来源是相册还是相机,默认二者都有
    success: function (res) {
      var tempFilePaths = res.tempFilePaths;
      // wx.showLoading({
      //   title: '图片上传中..',// })
      wx.uploadFile({
        url: 'https://www.weiuid.com/index.php/api/upload/upload',//仅为示例,非真实的接口地址
        filePath: tempFilePaths[0],name: 'file',formData: {
          'mdl': mdl
        },success: function (res) {
          wx.hideLoading();
          // wx.showToast({
          //   title: '上传成功',// });
          var data = JSON.parse(res.data);//你大爷的强制返回字符串;强制转json
          callback(data.data);
          // console.log(callback(data.data))
        },fail: function (res) {
          wx.showToast({
            title: '图片上传中',});
        }
      });
    }
  });

}



添加图片的代码,为了避免数据库压力过大,将数据存储到缓存里边,这边调用了一个图片上传的方法

// 添加成员
    onTapAddMember: function() {
      var e = this.data.memberList,a = "new-" + e.length;
      wxb.that = this;
      wxb.fileupload('',function (data) {

        // 判断上传的路径是否为空
        if (data.img != '') {
          var i = {
            id: a,avatarSrc: data.img_url,name:'',position:'',isCreate: !0,}; 
        //这里将数据存放到了提前声明的数组里边
          e.push(i);
          console.log(e)
        //将数据存到缓存中
          wx.setStorageSync('memberList',e)
        //将缓存的数据保存起来,使用缓存来循环,可以加快页面加载速度
          wxb.that.setData({
            memberList: e
          });
        } else {
          wx.showToast({
            title: '上传失败',})
        }
      }); 
    },

使用了上边代码之后就可以直接将成员信息循环出来,现在就还存在一个问题就是,如果上传了多个成员信息,姓名和职位怎么一一对应的填写上

添加姓名和职位的方法,姓名和职位都有俩个自定义的属性,使用循环将名字和职位添加进去。

所有的数据都在s里边保存这,所以把最终的数据是s,把s在一次存放到缓存即可

    // 添加成员姓名和职位
    onTapInputTeam: function(e) {
        for (var a = e.currentTarget.dataset.id,t = e.currentTarget.dataset.name,o = e.detail.value,s = this.data.memberList,n = 0; n < s.length; n++) a == s[n].id && (s[n].isUpdate = !0,"name" == t ? s[n].name = o : "position" == t ? s[n].position = o : console.log("error"));

        // 将新添加的数据全部放到缓存里边
        wx.setStorageSync('memberList',s);
    },

当没有发布就退出之后,再次进来就没有之前编写的东西,所以我们在onload里边获取缓存的数据

这里要着重说一下这里的坑,onload是一进小程序就会直接加载的,所有当你把内存清理之后,就会报出一个错,说在*****不是一个方法。

解决这个问题很是简单,我们俩分析分析原因,我们在一开始就直接获取了memberList这个缓存,但是注意的是这里并获取不到数据,所以会直接把一个未知的变量给赋值到this.data.memberList,所以在点击上传的时候就会出现,push不进去东西,因为只有数组才可以push进去东西。

所以就需要这样的处理一下,做一个判断,判断当从缓存拿不到数据的时候,给这个data里边的数据重新附一个【】空数组的值,在设置值,这样就不会报错了。问题完美解决

var memberLists = wx.getStorageSync('memberList');

        if (!memberLists){
          memberLists = [];
        }

        this.setData({
          memberList: memberLists
        });

相关文章

概述 消息能力是小程序能力中的重要组成,我们为开发者提供了...
判断H5页面环境在微信中还是小程序中 用小程序提供的wx.mini...
wx.reLaunch和wx.navigateTo,wx.navigateTo的区别 2019-03-...
微信小程序如何从数组里取值_微信小程序 传值取值的几种方法...
H5项目接入微信授权登录,通过 UA 区分微信还是普通浏览器:...
微信小程序获取data-xx=&quot;&quot;属性的值,自定...