This is my first nuggets blog post, the beginning of nuggets writing.

Through the development of a “questionnaire” case to master the use of common form components, and how to collect the form information filled by users to submit to the server and get data from the server to display in the form. The reference interface is shown in Figure 1.

Step 1: Create a wechat applet project

Step 2: Set the navigation bar information and style in the pages/index/index.json file of the applet project.

Step 3: Write the page code in the pages/index/index.wxml file of the small program project, the specific code is as follows:

<view class="container">
  <form bindsubmit="submit">
    <view class="nn">
      <text>Name:</text>
      <input type="text" name="name" value="Zhang" />
    </view>
    <view class="ss">
      <text>Gender:</text>
      <radio-group name="gender">
        <label><radio value="0" checked />male</label>
        <label><radio value="1"/>female</label>
      </radio-group>
    </view>
    <view class="zz">
      <text>Professional Skills:</text>
      <checkbox-group name="skills">
        <label><checkbox value="html" checked />HTML</label>
        <label><checkbox value="css" checked />CSS</label>
        <label><checkbox value="js" />JavaScript</label>
        <label><checkbox value="ps" />Photoshop</label>
      </checkbox-group>
    </view>
    <view>
      <text>Your comments:</text>
      <textarea name="opinion" value="Test"></textarea>
    </view>
    <button form-type="submit" type="primary">submit</button>
  </form>
</view>
Copy the code

Step 4: Write the page style in the pages/index/index.wxss file of the small program project, the reference code is as follows (you can set according to your preferences, the public style file can be emptied) :

.container{margin:50rpx; } view{margin-bottom: 30rpx; } view.nn,view.ss{display: flex; }input{border: 2rpx solid #ccc;height:60rpx;width: 540rpx;margin-left: 20rpx;margin-top: -5rpx; } view.ss label{margin-left: 20rpx; } view.zz label{display: block;margin-top: 15rpx; }textarea{border: 2rpx solid #ccc;width: 640rpx;height:200rpx;margin-top: 10rpx; }Copy the code

Step 5: Follow these steps to set up an HTTP server locally using Node.js. (Important) ① Download Node.js(nodejs.org) and choose the long-term support version to download. ② Install Node.js. Double-click the downloaded installation package to install node. js. ③ Create an empty folder (for example, form-server) in the path of the applet project folder to store the server files corresponding to the applet project. ④ Go to the DOS command interface in the folder where the server file resides (for example, form-server). ⑤ After initializing the server-side project, the package.json configuration file will be created automatically. NPM init -y ⑥ Install Express framework, used to quickly build HTTP server. NPM install Express –save ⑦ Install Nodemon monitor code modification. NPM install nodemon-g 8 install Notepad++. ⑨ create the index.js file in the folder where the server file resides (for example, form-server), and use Notepad++ to write the simple server code as follows.

const express=require('express')  // Load the Express module
const bodyParser=require('body-parser')    // Load the bodyParser module to parse entity information sent from the client
const app=express()  // Create express instance and save it in app
app.use(bodyParser.json())   // Add bodyParser module to app, using JSON format,
                        // Because the wechat applet submits the information to the server in JSON format
// Process the POST request
app.post('/'.(req,res) = >{   // To receive a POST request, the first argument is the request path and the second argument is the callback function
console.log(req.body)     // Outputs the received data to the command line
res.json(req.body)           // Send the received data back to the client
})
// Listen on port 3000
app.listen(3000.() = >{
  console.log('server running at http://127.0.0.1:3000)})Copy the code

⑩ Start the server. Nodemon index.js If server running at http://127.0.0.1:3000 is displayed after the preceding command is executed, the server is successfully started. Step 6: Write the event handler function for form submission in the pages/index/index.js file of the applet project and send a POST request to the local server using wx.request(). The specific code is as follows:

submit:function(e){
    console.log(e.detail.value);     // See the output to see how the form submission collects data
    wx.request({
      method:'post'.//method Request method
      url: 'http://127.0.0.1:3000/'.//url indicates the address of the requested server interface
      data:e.detail.value,         //data indicates the request parameters, that is, the data sent to the server
      success:function(res){      // Success represents the successful callback function, where res represents the server response information
        console.log(res);       // Look at the output to see what is in res}})}Copy the code

Run the applet and click the “Submit” button on the page to display the results of Figure 2 in the console.

Above:

Data: data that the server responds to

ErrMsg: Request success or failure information

Header: The server’s response header

StatusCode: indicates the server response statusCode

Use the Wx.request ()API to request the server.

Step 7: Save the default data displayed in the form in the data data of the project’s pages/index/index.js file. The code is as follows:

data:{
    name:'Joe'.gender:[
      {name:'male'.value:'0'.checked:true},
      {name:'woman'.value:'1'.checked:false}].skills:[
      {name:'HTML'.value:'html'.checked:true},
      {name:'CSS'.value:'css'.checked:true},
      {name:'JavaScript'.value:'js'.checked:false},
      {name:'Photoshop'.value:'ps'.checked:false}].opinion:'test'
  }
Copy the code

Step 8: Bind the data in data to the form to achieve the default display state of the form. Change the contents of the pages/index/index.wxml file of the project to the following:

<view class="container">
  <form bindsubmit="submit">
    <view class="nn">
      <text>Name:</text>
      <input type="text" name="name" value="{{name}}" />
    </view>
    <view class="ss">
      <text>Gender:</text>
      <radio-group name="gender">
        <label wx:for="{{gender}}" wx:key="value">
          <radio value="{{item.value}}" checked="{{item.checked}}" />{{item.name}}
        </label>
      </radio-group>
    </view>
    <view class="zz">
      <text>Professional Skills:</text>
      <checkbox-group name="skills">
        <label for="" wx:for="{{skills}}" wx:key="value">
          <checkbox value="{{item.value}}" checked="{{item.checked}}" />{{item.name}}
        </label>
      </checkbox-group>
    </view>
    <view>
      <text>Your comments:</text>
      <textarea name="opinion" value="{{opinion}}"></textarea>
    </view>
    <button form-type="submit" type="primary">submit</button>
  </form>
</view>

Copy the code

Step 9: Delete the data in the pages/index/index.js file of the miniprogram project and put it into the server. Then, the wechat miniprogram sends a request to the server to obtain the data. Add the following code before app.listen() in the server-side project index.js file:

var data={
    name:'Joe'.gender:[
      {name:'male'.value:'0'.checked:true},
      {name:'woman'.value:'1'.checked:false}].skills:[
      {name:'HTML'.value:'html'.checked:true},
      {name:'CSS'.value:'css'.checked:true},
      {name:'JavaScript'.value:'js'.checked:false},
      {name:'Photoshop'.value:'ps'.checked:false}].opinion:'test'
}
// Process get requests
app.get('/'.(req,res) = >{
  res.json(data)     // Respond the data to the client in JSON format
})
Copy the code

Step 10: After the server-side code is completed, the onLoad() event function of the pages/index/index.js file of the small program project is implemented to automatically send a request to the server after the page is loaded to obtain the initial data required by the form. The specific code is as follows:

 onLoad:function(){
    var that=this;
    wx.request({
      method:'get'.// Can be omitted, default is get request
      url:'http://127.0.0.1:3000/'.success:function(res){
         that.setData(res.data)     //pages/index/index.js //pages/index/index.js}})}Copy the code

Run the small program, the expected effect, end.