WeChat小程序开发-初学者笔记（二）

根据MOOC平台浙江工商大学的“微信小程序开发从入门到实践”课程（https://www.icourse163.org/course/HZIC-1205901813）第三章关于心理测试例题，我也根据已给资源自己从头开始尝试做一份简单的心理测试功能的程序。

自律测试界面如图：

 

 首先，这个心理测试一共需要三张page，分别是首页（index),测试页面（page1），结果页面（page2）。

在pages文件夹下新建page1,page2以后，要修改app.json文件：

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

 

 添加关于page1和page2的路径，在“window"里修改"navigationBarTitleText"为”自律测试“。

接着打开app.js文件，将心理测试的题目存放在一个作为全局变量的列表中，如下，将globalData修改为：

 1 globalData: {
 2     userInfo: null,
 3     questions:[
 4       "当你因为娱乐耽误了计划好的重要工作，你会不会后悔？",
 5       "当被人要求做一件事情，并且你知道这件事情有很大的难度时，你是否会认为这是一项有趣的挑战？",
 6       "如果某项工作应当在当月5日完成，但你知道即使6日完成也没有人批评你，你会在5日完成吗？",
 7       "你经常仔细地计划你的资金吗？",
 8       "你通常能准时缴付各种账单吗？ ",
 9       "你是否善于记录、存放各种资料？",
10       "如果你需要用某一证件，你能否自己在一两分钟内找到它？ ",
11       "如果你需要赶一项任务，你能否一连数天都每天工作12小时以上？",
12       "你是否经常主动做一些份外工作？",
13       "你能长时间自动自发地工作吗？ ",
14       "你是否在没有人要求下，为自己设定工作目标及完成截止日期？ ",
15       "你是否经常计划如何使用你的时间？",
16       "你今天是否做了时间支配计划？",
17       "如果某件事你不乐意做，但有上司要求你做，你会拒绝吗？",
18       "你总是能专注地工作，而不会受外界干扰吗？",
19       "如果某项工作很重要，即使没有人强迫你，你也会自发地做好它吗？ ",
20       "有一项重要的工作需加班，而这天晚上恰有你非常喜爱的球赛，你会选择加班吗？",
21       "碰上棘手的难题时，你总是首先想办法自己解决吗？ ",
22       "你需要一些资料却无法得到，你会立即找人提供帮助吗？",
23       "你不存在多次决心做某件事却最终因为主观原因没有做成的情形，对吗？"
24     ]
25   }

 

 此道测试的题目取自http://www.apesk.com/xinliceshi/start_m/?1499.html

然后就可以开始设计主页了，主页主要有测试的相关信息和一个点击开始的按钮，主页的wxml文档如下：

1 <view class="index">
2 <view class="indexText">几乎每一项工作都是离不开自律能力的，尤其是营销人员等岗位，他们的活动范围广而不确定，时间也是自己安排和支配，如果缺乏自律能力，必然做不出业绩来。招聘和选拔人才时，自律能力同样是重要的考虑因素。本测试为这一行为提供依据。</view>
3 <button bindtap="gotoPage1" class="indexButton">点击测试</button>
4 </view>

 


在index.wxss文档中对主页加以装饰，wxss的语法和css的语法基本一样，这里我用了flex的显示格式，字体设置为幼圆： 

 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: "幼圆";
14   line-height: 1.6em;
15 }
16 .indexButton{
17   background-color: olivedrab;
18   color: aliceblue;
19 }

 

 在index,js里只需要添加一个函数达到点击按钮跳转到测试页面（page1）就可以了，函数的js代码：

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

然后开始设计测试页面，测试页面的布局也分为两部分，题目和选项，其中题目的序号可以用js变量来控制，题目则是获取app.js里的全局变量列表里的项，选项固定，都是“是”，“否”

 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>

测试页面是整个程序的关键，这里用到了不同页面的信息调用，一开始给你的初始化的js文件里是没有自动调用全局变量的前提，需要自己引用，这里我犯了很久的错误，就是因为不知道要使用全局变量就要在page1.js的前面先调用函数：

const app = getApp()

然后是js的数据部分：

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

这里的questionHead变量就是调用了全局变量questions列表里的具体项，用a来标记回答“是”的个数。当用户点击“是”的时候触发监听函数，改变具体的变量值，这里我又碰了一次壁，因为本身对javascript就不是特别熟悉，所以也不清楚这样的使用语法是javascript专有还是只有微信小程序的js才这样写（我记得以前写网页时用到javascript很多语法都和java一样，就连定义变量也可以用=直接赋值，而这里是用“：”。）点击“是”的相关函数代码如下：

 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   }


这里的改变数据值要专门用系统的setData函数来改变，具体的使用方法是:

this.setData({
      变量名：改变后的值，
      变量名：改变后的值，
      ……
    })

并且，这里的判断语句，if-else语句两个大括号之间不能有分号或者逗号。

上面这个点击函数的代码中还有一个关键的部分在于两个页面之间的参数传递，这里是在调用wx.navigateTo时在调用地址中加上参数名和参数值，所以这里传递的参数（形参）是a,参数值（实参）是this.data.a的值。

对于传递的参数的接受文档是page2,这里在page2.js里如下代码作用是接收参数并且显示相关信息：

 1 data: {
 2     result:0,
 3     resultDatil:"unKnow"
 4   },
 5 
 6   resultAboult:function(){
 7     if(this.data.resul<=4){
 8       return "自律能力很差"
 9     }
10     else if(this.data.result<=9&&this.data>=5){
11       return "自律能力较差"
12     }
13     else if(this.data.result<=14){
14       return "自律能力一般"
15     }
16     else {
17      return "自律能力强"
18     }
19   },
20 
21   /**
22    * 生命周期函数--监听页面加载
23    */
24   onLoad: function (options) {
25     this.setData({
26       result:options.a-0,
27       resultDatil:this.resultAboult()
28     })
29     console.log(this.resultAboult())
30   }

用onLoad函数，当页面刚打开时就接受参数，其中所有参数都存放在options当中，对于我们定义的参数a的调用直接用options.a，最后的  console.log(this.resultAboult()) 作用是在控制台上显示对应变量的值。

注意：上面的代码是有bug的，调试的过程中发现控制台上显示的resultDatil和实际输出的并不对应，原来是因为 result:options.a-0, resultDatil:this.resultAboult() 这两个语句是并发执行的，所以执行的过程中很有可能还没有取得真正的result值就执行resultAbout()函数了，应该修改为：

onLoad: function (options) {
     this.setData({
       result:options.a-0,
     })
     this.setData({
       resultDatil:this.resultAboult()
     })
     console.log(this.resultAboult())
   }

 

总结：虽然是一个非常基础和简单的小程序，甚至它的基本功能也不够全面（返回上一题按钮，提交按钮，题目的随机打乱），也无法实现多选择且不同选择情况下的功能，但是我还是花了六个多小时的时间来理解课程中提供的源代码和尝试写自己的代码，写的过程中不仅发现自己对于Html和CSS的语法也忘记了很多，对Javascript基础是掌握甚少，不过好在最后还是能够实现一份有一定功能的程序，也在写的过程中对微信小程序开发的组件有了更加深入的了解。

 

详细代码已上传至：https://github.com/SixteenTime/LittleLittle_Time

posted @ 2020-07-12 18:04  SixteenTime  阅读(447)  评论(0)  编辑  收藏  举报