原生h5和苹果/安卓端交互方法

{{title}}

{{beginDesc}}

*{{index+1}}、{{item.title}} (单选) (多选)

-->

var closedFun;

window.onerror = function (err) {
log("window.onerror: " + err);
};

//
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
} else {
document.addEventListener(
“WebViewJavascriptBridgeReady”,
function () {
callback(WebViewJavascriptBridge);
},
false
);
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback);
}
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement(“iframe”);
WVJBIframe.style.display = “none”;
WVJBIframe.src = “https://bridge_loaded”;
document.documentElement.appendChild(WVJBIframe);
setTimeout(function () {
document.documentElement.removeChild(WVJBIframe);
}, 0);
}

var vueLoad = function (responseData) {
new Vue({
el: “#app”,
data: {
title: ‘’,
beginDesc: ‘’,
questionVOS: [],
radioId: ‘’,
checkboxArr: [],
deliveryStart: “”,
deliveryEnd: “”,
textareaText: “”,
timestamp: “”,
questionId: “”,
questionIdFu: “”,
radioData: {
questionId: “”,
answerDetail: [],
},
checkboxData: {
questionId: “”,
answerDetail: [],
},
inputData: {
questionId: “”,
answerDetail: [],
},
questData: {
questionnaireId: “”,
answers: [],
},
deliveryStatus: “”,
answerList: [],
checkboxList: [],
textareaList: [],
responseTextCon:‘请填写必填项 !’,
requiredx:false,
},
mounted() {
this.getQuestionaireDel()
},

  methods: {
    //单选
    radioClick(id, item, index) {
      item.radioId = id
      item.questionId = item.id
      this.answerList[index] = {
        "questionId": item.id,
        answerDetail: []
      };
      this.answerList[index].answerDetail[0] = {
        "answerDetail": id
      }
      this.$set(this.questionVOS[index], 'radioId', id)
      this.$forceUpdate();
      // console.log(this.answerList);
    },
    //多选
    checkboxClick(i, item, index) {
      var checkboxArr = [];
      if (item.checkboxArr) {
        checkboxArr = item.checkboxArr;
      }
      if (checkboxArr.indexOf(i) > -1) {
        checkboxArr = checkboxArr.filter(function (ele) { return ele != i; });
      } else {
        checkboxArr.push(i);
      }
      let newArray = [];
      for (let i = 0; i < checkboxArr.length; i++) {
        newArray.push({
          'answerDetail': checkboxArr[i]
        })
      }
      this.answerList[index] = {
        "questionId": item.id,
        answerDetail: []
      };
      this.answerList[index].answerDetail = newArray;
      item.checkboxArr = checkboxArr;
      this.$forceUpdate();
      // console.log(this.answerList);
    },
    // 输入框
    textareaInput(item1, item, index, that) {
      this.answerList[index] = {
        "questionId": item.id,
        answerDetail: []
      };
      this.answerList[index].answerDetail[0] = {
        "answerDetail": that.currentTarget.value
      }
      // console.log(this.answerList);
    },
    //提交
    submitClick() {
      var that = this
      console.log(this.answerList)
      console.log(this.answerList.filter(Boolean))
      const answerData = { ...this.questData, answers: this.answerList.filter(Boolean) };
      // console.log('answerData', answerData);
      const requiredQuestions = this.questionVOS.filter(question => question.isRequired === 1);
      const answerComplete = requiredQuestions.some(requiredQuestion => {
        return this.answerList.filter(Boolean).findIndex(
                (answer = {}) => answer.questionId === requiredQuestion.id
                        && answer.answerDetail.length > 0
                        && (answer.answerDetail[0].answerDetail + '').trim().length > 0
        ) === -1;
      });
      console.info('requiredQuestions', requiredQuestions);
      console.info('answerComplete', answerComplete);
      if (answerComplete) {
        this.requiredx = true
        // alert('存在未回答的必答问题，请检查后再提交！');
        return;
      }
      // console.log(JSON.stringify(answerData))
      // closedFun();
      $.ajax({
        type: 'post',
        url: responseData.url + '/apis/space/v1.0/getQuestionnaireAnswer?access_token=' + responseData.access_token,
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify(answerData),
        headers: {
          space: responseData.space,
          tenantId: responseData.tenantId,
          token: responseData.token,
          'Content-Type': 'application/json'
        },
        success: function (res) {
          // console.log(res.statusCode)
          if(res.statusCode == '0'){
            // closedFun(res);
            console.log("22222222222", res)
            that.answerList = []
          }else {
            that.responseTextCon = '提交失败，请联系管理员！'
          }

        },
        error: function (err) {
          // reject(err)
          console.log(err)
        }
      });
    },
    //获取问卷详情
    getQuestionaireDel() {
      var that = this;
      $.ajax({
        type: 'post',
        url: responseData.url + '/apis/space/v1.0/getQuestionnaireDetail?access_token=' + responseData.access_token,
        dataType: 'json',
        data: {
          questionnaireId: responseData.questionnaireId
        },
        headers: {
          space: responseData.space,
          tenantId: responseData.tenantId,
          token: responseData.token
        },
        success: function (res) {
          res.content.questionVOS.forEach((v, i) => {
            that.questionVOS.push(v)
            if (v.type == 1) {
              that.radioType = v.questionOptionVOS[0].id
            }
          });
          that.questData.questionnaireId = res.content.id
          that.deliveryStatus = res.content.deliveryStatus
          that.title = res.content.title
          that.beginDesc = res.content.beginDesc
        },
        error: function (err) {
          // reject(err)
        }
      });
    },
    chackIndex: function (itemArray, item) {
      if (itemArray != null && itemArray.indexOf(item) > -1)
        return true;
      else
        return false;
    }
  }

})

}

//
setupWebViewJavascriptBridge(function (bridge) {
//
bridge.registerHandler(“registerAction”, function (data, responseCallback) {
alert(“oc请求js 传值参数是：” + data);
//处理oc给的传参
vueLoad(JSON.parse(data));
//处理完，回调传值给oc
responseCallback(“HAHA”);
});
bridge.init(function (message, responseCallback) {

});
closedFun = function () {
  // <!--处理 js 调用 oc -->
  bridge.callHandler(
          "closed",
          "HAH",
          function (response) {
            //处理oc过来的回调
          }
  );
};

});

var responseData = {
access_token: “77918e12-7d83-4733-937b-cfcd07907f4a”,
questionnaireId: “439”,
space: “943”,
tenantId: “002”,
token: “567b9e8d9b290df62dc2c01bd68599e8”,
url: “http://mobile-gateway.hseduyun.net”
};
vueLoad(responseData);

标签：function,responseData,answerList,h5,item,安卓端,answerDetail,checkboxArr,交互
来源： https://blog.csdn.net/weixin_45020738/article/details/110920646