As I am engaged in online English education, I can do a lot of interactive learning functions. In the process of English learning, the function of practicing oral English must be interactive. Today, I will summarize the function of achieving the function of reading and scoring, as well as the knowledge points involved.

Function display

Knowledge points involved

  • TouchEvent Understanding and use of events (TouchStart, TouchEnd, touchCancel)
  • Processing of readStatus status (default, recording recording, waitingScore wait score, scoreComplete score can be ignored as default)
  • Corresponding processing method

Touch Event Explanation

TouchEvent is a kind of event that describes the state change of finger on the touch plane (touch screen, touchpad, etc.). These events are used to describe one or more contacts, allowing developers to detect movement of contacts, increase or decrease of contacts, and so on. (the from MDN)

  • Touchstart is triggered when the user places a touch on the touch plane. The target element of the event will be the target element at the touchpoint location

  • Touchend Is triggered when a touch is removed from the touch plane by the user (when the user moves a finger away from the touch plane). Also fires when the contact moves outside the boundary of the touch plane. For example, the user draws his finger to the edge of the screen. The target Element of the event is the same as the target Element of the corresponding TouchStart event, even if the touchend event is triggered after the touch has moved out of the element.

  • Touchmove is triggered when the user moves a touch on the touch plane. The target Element of the event is the same as the target Element of the corresponding TouchStart event of the TouchMove event, even though the touch has already moved out of the Element by the time the TouchMove event is triggered. This event is also triggered when the contact radius, rotation Angle, and pressure change.

  • Touchcancel Is triggered when a touch is interrupted for some reason. There are several possible reasons (the exact reasons vary from device to device and browser to browser) :

  1. A touch is cancelled for an event: for example, the touch process is interrupted by a modal popup.
  2. The touch point leaves the document window and enters the interface element, plug-in, or other external content area of the browser.
  3. When the number of touchpoints generated by the user exceeds the number supported by the device, the earliest Touch object in the TouchList is cancelled.

Functional analysis and explanation

The above API is an important method to realize the function of analog recording. We only need to set one Element to bind these methods in the code, and then improve the specific function. It is worth noting that, due to the development of mobile terminal, the effect of each state cannot be simulated on PC during local development. So you can attach a mouse event to Element. (The framework used here is VUE)

<button @touchstart="onStartRecord" @touchend="onStopRecord" @touchmove="onPrevent"
@mousedown="onStartRecord" @mouseup="onStopRecord"></button>
Copy the code

Note: In many cases, both touch and mouse events will be sent, so $preventDefault() should be called in the appropriate method to keep the mouse event sent

  • OnStartRecord start recording function method, specific implementation can see notes
onStartRecord: function (event) {
  // Block the default event
   if (event) {
       event.preventDefault();
       event.stopPropagation();
    }
  // Not in recordable state
   if (this.readStatus ! ='default') {
         return;
   }
   console.log('onStartRecord');
   this.readStatus = 'recording';

  // Define several callback functions for recording according to their own business processing
   let scoreCompleteCallback = function (scoreData) {
   }.bind(this);
   let stopRecordCallback = function () {
   }.bind(this);
   let scoreErrorCallback = function (error) {
   }.bind(this);

  // Call and natively defined methods to record scoring
 mobile.external.StartRecord({
      stopRecordCallback: stopRecordCallback,
      scoreCompleteCallback: scoreCompleteCallback,
      scoreErrorCallback: scoreErrorCallback
  });

 }
Copy the code
  • OnStopRecord Stop recording method
onStopRecord: function (event) {
 if (event) {
       event.preventDefault();
       event.stopPropagation();
 }
 if (this.readStatus ! ='default') {
         return;
 }
console.log('onStopRecord');
// Call and natively defined methods to stop scoring
mobile.external.oralStopRecord(this.recordId);
}
Copy the code
  • OnPrevent prevents default behavior
onPrevent: function (event) {
// Block the default event
   if(event) { event.preventDefault(); event.stopPropagation(); }}Copy the code
  • Methods such as changing style text based on status status
watch: {
    readStatus: function($newStatus){
      switch ( $newStatus ) {
          // What style changes can be made according to the case}}}Copy the code

Write the summary at the end

Actually achieving this feature is not difficult, as long as to master the specific API can quickly complete the interactive logic, the difficulty lies in the specific business implementation method of alignment with shell, back to the function of treatment, and the quality of the specific equipment experience, this article only provides a train of thought, if you met any difficulties when writing logic, Comments are welcome and may help you solve your problem.

Cayley is a woman programmer who keeps learning