WeChat applet development - Notes for beginners

According to the MOOC platform, the course "wechat applet development from introduction to practice" of Zhejiang industrial and Commercial University( https://www.icourse163.org/course/HZIC-1205901813 )The third chapter is about the example of psychological test. I also try to make a simple procedure of psychological test function from the beginning according to the given resources.

Self discipline test interface is shown in the figure:

 

First of all, the psychological test requires three pages, namely, the first page (index), the test page (page1) and the result page (page2).

After creating page1 and Page2 under the pages folder, you need to modify the app JSON file:

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/page1/page1",
    "pages/page2/page2"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Self discipline test",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

 

Add the path of page1 and page2, and change "navigationBarTitleText" to "self discipline test" in "window".

Then open the app JS file to store the psychological test topics in a list as global variables, as follows, modify globalData to:

 1 globalData: {
 2     userInfo: null,
 3     questions:[
 4       "Will you regret when you delay your planned important work because of entertainment?",
 5       "When you are asked to do something and you know it is very difficult, do you think it is an interesting challenge?",
 6       "If a certain work should be completed on the 5th of the current month, but you know that no one will criticize you even if it is completed on the 6th, will you complete it on the 5th?",
 7       "Do you often plan your money carefully?",
 8       "Do you usually pay bills on time? ",
 9       "Are you good at recording and storing various materials?",
10       "If you need a document, can you find it yourself in a minute or two? ",
11       "If you need to catch up on a task, can you work more than 12 hours a day for several days?",
12       "Do you often take the initiative to do some extra work?",
13       "Can you work spontaneously for a long time? ",
14       "Do you set goals and deadlines for yourself without being asked? ",
15       "Do you often plan how to use your time?",
16       "Did you make a time plan today?",
17       "If you are not willing to do something, but your boss asks you to do it, will you refuse?",
18       "Can you always concentrate on your work without external interference?",
19       "If a job is important, even if no one forces you, will you do it spontaneously? ",
20       "There is an important job to work overtime, and there is a ball game you like very much that night. Will you choose to work overtime?",
21       "Do you always try to solve difficult problems by yourself first? ",
22       "If you need some information but can't get it, will you ask for help immediately?",
23       "You don't have the situation that you decide to do something many times but fail to do it for subjective reasons, do you?"
24     ]
25   }

 

The title of this test is taken from http://www.apesk.com/xinliceshi/start_m/?1499.html

Then you can start to design the home page. The home page mainly contains test related information and a click Start button. The wxml document of the home page is as follows:

1 <view class="index">
2 <view class="indexText">Almost every work is inseparable from the ability of self-discipline, especially the posts such as marketing personnel, whose activities range is wide and uncertain, and their time is also arranged and controlled by themselves. If they lack the ability of self-discipline, they will not be able to achieve results. Self discipline is also an important consideration when recruiting and selecting talents. This test provides the basis for this behavior.</view>
3 <button bindtap="gotoPage1" class="indexButton">Click test</button>
4 </view>

 


In index The home page is decorated in the wxss document. The syntax of wxss is basically the same as that of css. Here, I use the flex display format and set the font as a small circle:

 1 /**index.wxss**/
 2 .index{
 3   height: 100%;
 4   width: 100%;
 5   position: fixed;
 6   display: flex;
 7   flex-direction: column;
 8   align-items: center;
 9 }
10 .indexText{
11   height: 50%;
12   padding: 10%;
13   font-family: "Immature circle";
14   line-height: 1.6em;
15 }
16 .indexButton{
17   background-color: olivedrab;
18   color: aliceblue;
19 }

 

In index,js, you only need to add a function to click the button to jump to the test page (page1). The js code of the function:

1 gotoPage1:function(){
2   wx.navigateTo({
3     url: '../page1/page1',
4   })

Then start to design the test page. The layout of the test page is also divided into two parts, title and options. The serial number of the title can be controlled by js variables, and the title is to obtain app The items in the global variable list in. js have fixed options and are "yes" and "no"

 1 <view class="page1">
 2     <view class="page1_head">
 3         <view class="page1_index">{{index+1}},{{questionHead}}</view>
 4     </view>
 5     <view class="choise">
 6         <view class="option" bindtap="chickYes">{{ye}}</view>
 7         <view class="option" bindtap="chickNo">{{no}}</view>
 8     </view>
13 </view>

The test page is the key to the whole program. Information calls from different pages are used here. At the beginning, the initialization js file you are given does not automatically call global variables. You need to reference them yourself. I made a long mistake here because I didn't know that to use global variables, you need to use page1 js, call the function first:

const app = getApp()

Then the data part of js:

 data: {
     index:0,
     questionHead:app.globalData.questions[0],
     ye:"yes",
     no:"no",
     a:0
  },

The questionHead variable here calls the specific items in the global variable questions list, and uses a to mark the number of "yes" answers. When the user clicks "yes", the listener function is triggered to change the specific variable value. Here I hit the wall again because I am not very familiar with javascript, Therefore, it is not clear whether such usage syntax is javascript specific or only written in the js of wechat applets (I remember that many javascript grammars used in writing web pages are the same as java, and even defining variables can be assigned directly with = instead of ":".) Click "yes" and the relevant function codes are as follows:

 1 chickYes:function(){
 2     this.setData({
 3       index:this.data.index+1,
 4       questionHead:app.globalData.questions[this.data.index],
 5       a:this.data.a+1,
 6     }
 7     );11     if(this.data.index>=19){
12       wx.navigateTo({
13         url: '../page2/page2?a='+this.data.a,
14       })
15     }
16   }


The change data value here should be changed by the setData function of the system. The specific use method is as follows:

this.setData({
      Variable name: the changed value,
      Variable name: the changed value,
      ......
    })

In addition, the judgment statement and if else statement cannot have semicolons or commas between the two braces.

Another key part of the code of the click function above is the parameter passing between the two pages. Here, we call wx During navigateto, add the parameter name and parameter value to the call address, so the parameter (formal parameter) passed here is a and the parameter value (actual parameter) is this Data The value of A.

The acceptance document for the passed parameters is Page2, which is shown in page2 The following code in JS is used to receive parameters and display relevant information:

 1 data: {
 2     result:0,
 3     resultDatil:"unKnow"
 4   },
 5 
 6   resultAboult:function(){
 7     if(this.data.resul<=4){
 8       return "Poor self-discipline"
 9     }
10     else if(this.data.result<=9&&this.data>=5){
11       return "Poor self-discipline"
12     }
13     else if(this.data.result<=14){
14       return "Average self-discipline"
15     }
16     else {
17      return "Strong self-discipline"
18     }
19   },
20 
21   /**
22    * Life cycle function -- listening for page loading
23    */
24   onLoad: function (options) {
25     this.setData({
26       result:options.a-0,
27       resultDatil:this.resultAboult()
28     })
29     console.log(this.resultAboult())
30   }

Use the onLoad function to accept parameters when the page is just opened. All parameters are stored in options. For the call of parameter a defined by us, use options a. The last console Log (this.resultaboult()) is used to display the value of the corresponding variable on the console.

Summary: although it is a very basic and simple small program, and even its basic functions are not comprehensive enough (return to the previous question button, submit button, random disorder of questions), and it can not realize the functions of multiple choices and different choices, I still spent more than six hours to understand the source code provided in the course and try to write my own code, In the process of writing, I not only found that I had forgotten a lot about the syntax of Html and CSS, but also knew little about Javascript, which was not good enough. In the end, I was able to implement a program with certain functions, and I also had a deeper understanding of the components of wechat applet development in the process of writing.

 

Posted by saradrungta on Mon, 30 May 2022 22:22:25 +0530