微信小程序开发技术总结

系统分析与设计
博客

我在本次项目开发中主要负责问卷以及任务的页面设计以及与后端进行交互，遇到了不少问题。

表单输入绑定

在填写问卷或发布任务、填写任务时，需要对vue中的 input，picker 等组件进行编辑，之后将输入信息存入数据库，这样就需要我们实时地获取到组件中的信息，vue中有属性可以帮我们实现这一点，例子如下：

1
<input type="number" id="payment" v-model="Task.payment">

input 组件中有个 v-model 属性，它可以将其中的输入直接赋值到后面的变量中，在下面的script中，我们定义了一个叫 Task 的变量，有个成员变量为 payment，这样存储数据的时候就可以直接将 Task.payment 存入数据库了。

Picker组件的使用

在创建任务时，难免要指定任务的地点和发布时间、截止时间等，这里可以使用Vue的一个非常好用的组件 picker ，可以实现滑动挑选的效果，例子如下：

1
2
3
4
5
<view class="completeTime">
    <picker mode="time" value="Task.completeDate" @change="bindCompleteTime">
        <view class="picker">时间：{{Task.completeTime}}</view>
    </picker>
</view>

picker 中的属性 mode 值代表不同的类型，如 time 为时间选择器，可以指定小时和分钟；date 为日期，指定年月日；region 为地点，指定省、市、区。

上述的只是最简单的 picker ，并不能满足我们项目的需求，如指定任务类型时，有学习、娱乐等不同标签，这些标签不能用 input 来实现，因为我们并不能保证用户的输入是否能够准确概括任务类型，所以我们需要指定标签类型，然后让用户来挑选，这样就需要自定义 picker ，下面以标签选择器为例：

1
2
3
4
5
6
7
8
9
10
11
<view class="Task-tag">
    <picker
            mode="selector"
            :value="index"
            :range="Task.tag"
            :range-key="'name'"
            @change="bindTagChange"
            >
        <view class="picker">标签：{{Task.tag[index].name}}</view>
    </picker>
</view>

首先可以看到的是，mode 与之前不同，为 selector ，表示普通选择器；:value 为 index ，表示tag数组中的下标值；:range 为选择器的内容，即存储了选择器选项的数组；:range-key 表示标签名对应的属性值，用于显示。存储标签内容的数组如下：

1
2
3
4
5
tag: [
{ id: 0, name: "学习" },
{ id: 1, name: "娱乐" },
{ id: 2, name: "生活" }
]

每次挑选，获取不同的 index，然后对应到数组中不同的 Object ，然后再选取 key 值为 name 的内容进行显示，存储的时候可以直接存储对应的标签内容即可，而不必存储数组。

页面之间的事件传递

在本次项目中，我们将单选题，多选题以及填空题封装成了组件，然后再用一个组件可以包含这三种，然后点击添加即可。但是这里遇到了一个问题，如何在父页面中点击函数，触发子页面的事件。这里我使用了两个 click 函数，首先在父组件中填空题等基础组件下面设置 button ，点击添加问题。其中 qEdit 为父组件，如下：

1
2
3
4
5
6
<template>
  <div id="qEdit">
    <input class="edit_input_input" placeholder="输入问题描述" type="text" v-model="edit_input_des">
    <button class="edit_input_button" hover-class="button-hover" @click="addOneInput">添加一个输入题</button>
    </div>
</template>

在下面处理这个点击函数，将 input 中的内容作为填空题的问题描述。然后在我们创建问卷的页面加入这个父组件，设置 click 函数：

1
2
3
4
5
<qEdit
       @addMultiSelectQues="addMultiSelect"
       @addSingleSelectQues="addSingleSelect"
       @addInputQues="addInput"
       ></qEdit>

需要注意的是，这里的 addInputQues 是父页面下的函数，为了将添加问题的结果显示出来，而与之对应的 addInput 则是我们在上面的填空题组件下面 button 绑定的函数，并非当前页面实现。这样就可以简单实现基础的添加问题功能了，当然删除问题，添加选项等操作也大同小异。

页面之间的跳转与参数传递

在创建与查看任务时难免要进行参数的传递，有时还得携带一些参数，甚至返回参数，这里我以点击已发布任务查看详情为例。要查看任务详情，首先得在数据库中通过该任务的id进行查询，拿到数据，然后，将数据转化为JSON，传递到下一次节目进行渲染。

1
2
3
var obj = JSON.stringify(this.mission);
let url = "../community/taskDetails/main?obj=" + obj;
wx.navigateTo({ url });

其中，this.mission 为我们通过ID查询到的任务数据，通过 JSON.stringify 转化为JSON字符串，然后 url 为跳转的页面路径，这里用了相对路径，将刚才转化的JSON字符串传递过去，就可以进行渲染了。

如果我们想从后一个页面往前跳转并传递参数，则需要另一种方法，代码如下：

1
2
3
4
5
6
7
8
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({
quesID: res.result
});
wx.navigateBack({
delta: 1
});

这里我以从创建任务界面跳转到添加问卷界面，然后返回上一层为例，需要把问卷的ID返回。其中 getCurrentPage() 得到了一个当前页面栈，pages[pages.length-2] 表示上一个页面，同理，-1为当前页面，与数组的长度属性相似。然后使用 setData 方法，这里是相当于直接在上一个页面进行函数操作，操作的对象也是属于上个页面，res.result 表示问卷的ID，将其赋值给上个页面的 quesID 。使用

1
2
3
wx.navigateBack({
delta: 1
});

返回，delta参数表示返回几层，这里返回一层即可。

回到上一层页面，我们同样使用如下方法获取当前页面：

1
2
let pages = getCurrentPages();
let prevPage = pages[pages.length - 1];

之后 prevPage.data.quesID 就是我们刚才得到的问卷ID了。

分享到 评论