第一节：什么构成了微信小程序、创建一个自己的小程序

第二节：微信开发者工具使用教程

第三节：深入了解并掌握小程序核心组件

第四节：初始化云函数和数据库

第五节：云数据库的增删改查

第六节：项目大纲以及制作登录、注册页面

第七节：制作活动申请页面

第八节：活动申请页面的补充

第九节 ”我的“页面制作

第十节：活动详情页面制作

第十一节：活动历史页面制作

第十二节：预约老师页面制作

第十三节：预约历史页面制作

第十四节：活动审批端制作

第十五节：预约审批端制作

前言

1.普通的输入框

2.单选器

2.1下拉单选器

2.2直接选择器

3.时间选择器

4.提交按钮执行逻辑

题外话

前言

由于上节代码行数较多，到后面编辑器太卡顿了连添加一个字符都很费劲。因此这一节是用来解析“活动申请”页面部分核心代码的。大致分为四个部分：普通的输入框、单选器、时间选择器、提交按钮执行逻辑。那我们现在开始吧~

1.普通的输入框

“活动申请”页面中整个表单包含元素最多的就是普通的输入框，如活动名称、活动地点、负责人信息、预计参与人数、项目内容阐述、活动经费预算。这些都是比较简单的普通输入框。其实现的基本逻辑是：

WXML中创建input组件 $\rightarrow$ 设置输入键盘的type属性 $\rightarrow$ 设置占位符placeholder属性的具体字符 $\rightarrow$ 设置bindinput

JS中在data中创建相关的空数据 $\rightarrow$ 使用this.setData方法将用户输入的值赋给data中的空数据 $\rightarrow$ 在最后提交整个表单的时候提交data里面的相关的值

这么说可能有点抽象，下面我将展示“活动名称”输入框作为例子，来实操一下（注：我这里并没有实现输入框的美化，是纯组件）

WXML

// type设置输入键盘样式，placeholder设置占位符，bindinput设置输入时触发的js函数
<input type="text" placeholder="活动名称（必填*）" class="PnameInput" bindinput="huodongName"/>

// 活动名称
    //设置入口参数res
    huodongName(res){
      //打印用户输入的值
      console.log(res.detail.value,"活动名称")
      //创建一个变量，并使值其等于用户输入的内容（可省略）
      let huodongna = res.detail.value
      //使用this.setData方法，令data中的huodongna的值为res.detail.value也就是用户输入的内容
      this.setData({
        huodongna
      })
    console.log(huodongna)
    },

最后在提交整体表单的时候将data中的相关变量提交上去

普通输入框的制作就是这样的一个基本流程，当然这只是实现了功能，样式没有美化，你懂了吗？

2.单选器

在“活动申请”页面包含了两种单选器，一种是点击后下拉的单选器如所归属的组织、活动地点，一种是直接选择的单选器如是否有赞助、是否有借款、是否需要申请发放教师劳务费、是否需要上传OA。我们将按照先下拉单选器再直接选择器的顺序来解析

2.1下拉单选器

其实就是用到了picker组件的一些相关知识，其基本逻辑是这样的。

WXML中创建picker组件 $\rightarrow$ 将其value属性与js的data的某一变量绑定 $\rightarrow$ 将其range属性与js的data的某一变量绑定 $\rightarrow$ 设置bindchange $\rightarrow$ 创建一个view组件并让其显示当前的选项

JS中在data中创建相关的变量 $\rightarrow$ 使用this.setData方法将用户选择的值赋给data中的相关数据 $\rightarrow$ 创建变量并利用前面返回的数字值将返回的值变为汉字 $\rightarrow$ 再次利用setData方法 $\rightarrow$ 在最后提交整个表单的时候提交data里面的相关的值

同样的我将举“活动地点”的例子，来详细的说明整个流程。

这里你可以把value绑定的值理解为是选择器中的第一个元素，range绑定的值理解为选择器的内容

WXML

//将value属性和range属性分别于js的data中相关的变量进行绑定，设置选择触发函数bindchange
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
        //使用view组件，显示当前选择的选项       
        <view class="xuanzheyuyue">
              当前选择：{{array[index]}}
        </view>
</picker>

data:{
    //注意我这里第一个是一个空的数据
    array: ['','校区1', '校区2'],
    index: 0,
    area：""，
    }，

//选择校区
//设置入口参数为e
bindPickerChange: function(e) {
       console.log('选择校区的picker发送选择改变，携带值为', e.detail.value)
        //改变index的索引值
       this.setData({       
         index: e.detail.value
       })
       //创建一个汉字的变量，并根据索引做出判断
       var area0 = "校区1"
         if(e.detail.value==1){

                //如果索引值为1，那么就将area0赋值给data中的area
                this.setData({
                     area: area0
                })
         }
         var area1 = "校区2"
         if(e.detail.value==2){
                //与上述同理
                this.setData({
                     area: area1
                })
         }
         console.log('校区:',this.data.area)
},

同样的这里也没实现CSS美化，全部的样式代码我都放在第七节了，需要的可自取

2.2直接选择器

这里要实现选择“是”后展现多个输入框的功能。如下图的展示

这里我们主要需要用到radio-group和label组件，其实现的基本逻辑是这样的。

WXML中创建radio-group组件并设置其选择函数 $\rightarrow$ 创建label组件用wx：for列表渲染js的data文件中的一个数组 $\rightarrow$ 创建radio组件并设置其value属性为列表渲染数组的value值 $\rightarrow$ 创建view组件并展示列表渲染数组的name值

JS中在data中创建相关的数组 $\rightarrow$ 通过radio-group所绑定的函数判定选项 $\rightarrow$ 若选择的是“是”则将某一变量通过setData方法设置为true $\rightarrow$ 相反若是选择了“否”则令其为false $\rightarrow$ 在最后提交整个表单的时候提交data里面的相关的值

这里我将举“是否有赞助”为例子来帮助大家理解

WXML

<!-- 是否有赞助 -->
<view class="inputborder">
    <view class="Pname">是否有赞助 <view class="xiaozi">*</view> </view>
    <view>
    <!-- 创建radio-group并设置其选择函数 -->
       <radio-group bindchange="radioChange2">
              <!-- 将label与js文件中的itens列表渲染 -->
              <label wx:for="{{itens}}" wx:key="index" class="Pnamechoose">
                     <view>
                     <!-- 让radio的值与渲染列表中的value进行绑定 -->
                     <radio value="{{item.value}}"/>
                     </view>
                     <!-- 使用view组件来显示其name -->
                     <view>{{item.name}}
                     </view>
              </label>
       </radio-group>
    </view>
    <!-- hidden属性与displays的值绑定，display的值默认为ture，故不显示下列表单 -->
    <view hidden="{{displays}}">
       <view class="Pname">赞助相关信息 <view class="xiaozi">*</view> </view>
       <input type="text" placeholder="赞助公司(必填)" class="inputborder" bindinput="Company"/>
       <input type="text" placeholder="赞助形式" class="inputborder" bindinput="Form"/>
       <input type="number" placeholder="赞助金额(必填)" class="inputborder" bindinput="Money"/>
       <!-- 选择是否已经提交合同 -->
       <view class="Pname">是否已经提交合同 <view class="xiaozi">*</view></view>
       <radio-group bindchange="radioChange2plus">
              <label wx:for="{{contractItens}}" wx:key="index" class="Pnamechoose">
                     <view>
                     <radio value="{{item.value}}"/>
                     </view>
                     <view>{{item.name}}</view>
              </label>
       </radio-group>
  </view>
</view>

data:{
    itens: [
      {value: '有赞助', name: '是'},
      {value: '没有赞助', name: '否'},
    ],
    display:true,
    },

//是否有赞助
radioChange2(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
    const itens = this.data.itens
    let iten = e.detail.value  
    this.setData({
      itens,
       iten
    })
    if(iten == "没有赞助"){
       this.setData({
         displays:true
      })
    }
    else{
       this.setData({
         displays:false
      })
    }
       console.log(iten, this.data.displays)
   },

3.时间选择器

这个部分用到的就是picker的时间选择器也就是mode属性为data的picker，由于这个组件被封装的很好，没有什么额外的知识点需要拎出来理解，直接复制粘贴就好了！因此这部分就简单的略过。

WXML

<picker mode="date" start="2017-09-01"  bindchange="bindDatechangeStart" >
        <view>{{liststart}}
                <image src="../../icon/outline.png" class="_icon"></image>        
        </view>
        
</picker>

    // 起始时间选择
    bindDatechangeStart(e){
      let obj = e.detail.value
      this.setData({
        liststart:obj
      })
      console.log("活动开始时间为", obj,this.data.liststart)
    },

注意：我这里为了美观加了一个图片在view里面，如果你没有相应的图片直接复制粘贴的话是会报错的，如果有需要icon文件里面所有的图片，私聊我。