微信小程序之前端代码篇

本篇主要讲述一些，不太常用但用起来又不太会的组件、和一些逻辑思考等。

1、Dialog的使用

　　①首先引入vant-weapp中的dialog

{
  "usingComponents": {
    "van-dialog": "/miniprogram_npm/@vant/weapp/dialog/index"
  }
}

　　②然后在xxx.wxml中注册该组件，位置随意，后面可以利用wxss进行修改。

<van-dialog id="van-dialog" />

　　③最后对应xxx.js中引入Dialog，并在对应的点击事件中使用即可

import Dialog from '../../miniprogram_npm/@vant/weapp/dialog/dialog';

signUp: function(event) {
    Dialog.alert({
        title: '期待你的加入！',
       message: '112102',
    });
},

2、针对不同用户身份，展示不同页面。

　　当时，想了很多方法，关于display:none，微信小程序是否自带API可以隐去页面等等，但都失败了。

　　最后决定，由后端进行身份判断，并传来状态码。根据后端传来的状态码，进行条件判断，从而进行页面的展示。

<!-- 普通学生展示的接单页面 -->
<view wx:if="{{ code==2 }}" class="noVolunteerview"> 
    <image class="noVolunteer" src="../images/noVolunteer.jpg" /> 
</view>

3、微信小程序发送请求（wx.request的使用）+传递数据至数据库

　　①首先，绑定data-xxx，从而将数据同步到事件event的属性中

　投诉理由：<input bindinput="complaints"/>

<button class="btn2" bindtap="showModal" data-ono="{{item.Ono}}">投诉</button>

　　② 详见代码注解及编号

Page({
  //页面的初始数据 
  data: {
    tip: '',
    buttonDisabled: false,
    modalHidden: true,
    show: false,

  //2.定义获取到的数据要存放的变量
    oo: '',  
    complaints: '' //存储前端输入的投诉内容
  },

  //1.1获取当前输入的投诉内容  
  complaints:function(e){
    this.setData({
      complaints:e.detail.value
    });
  },

  //1.2点击投诉按钮触发的事件，为了获取数据
  showModal:function(e){   
    var o = e.target.dataset.ono;
    this.setData({
      oo : o,  //将当前事件获取到的变量信息（这些信息都是后端接口传过来的），如ono/telphone都赋给data定义中的变量
    })
   },

  //3.点击modal组件中的确认按钮触发的事件
   modalBindaconfirm:function(){ 
    var that = this;
    this.setData({
     modalHidden:!this.data.modalHidden,
     show:!this.data.show,
     buttonDisabled:!this.data.buttonDisabled,
   })
   //将填写的投诉内容（已经保存到data变量中了） 传到数据库
   wx.request({
     url: 'http://..../insertComplaints.php', 
     method:'POST', //只要传递数据，就要改成POST方式
     data: {
         Ono : that.data.oo,  //将data数据传递给后端，后端接收的变量名是Ono
         Complaints : that.data.complaints,
     },
     header: {
       'content-type': 'application/x-www-form-urlencoded' 
     },
     success (res) {
      if(res.data.code === 0){
       wx.showModal({
         title:'提示',
         content:'投诉成功！',
         showCancel:false,
       })
      }else if(res.data.code === 2){
       wx.showModal({
         title:'提示',
         content:'投诉失败！',
         showCancel:false,
       })
      }
     },
     fail(res){
       wx.showModal({
         title:'提示',
         content:'网络不在状态！',
         showCancel:false
       })
     }
   })
  }
})

4.页面跳转

　　一、当要跳转到tabBar及导航页面的时候，只能使用 wx.reLaunch！

　　①tabBar的定义

"tabBar": {
  "color": "#000",
  "selectedColor": "#569bed",
  "backgroundColor": "#f2f2f2",
  "list": [
    {
      "pagePath": "pages/send/send",　　//对应的页面
      "text": "发单",
      "iconPath": "pages/images/tabImg/s.jpg",　　//未选中的样式
      "selectedIconPath": "pages/images/tabImg/s1.jpg"　　//选中的样式
    },
    {
      "pagePath": "pages/receive/receive",
      "text": "接单",
      "iconPath": "pages/images/tabImg/r.jpg",
      "selectedIconPath": "pages/images/tabImg/r1.jpg"
    }
  ]
}

　　②页面跳转

  change(){
    wx.reLaunch({
      url: '../send/send',　　
    })
 }

　　二、普通的页面跳转，使用wx.switchTab即可

//返回按钮消除   
   <button bindtap="preYemian">返回</button>

  preYemian(){
    wx.switchTab({
      url: '/pages/my/my',
    })
  },

5.下拉刷新

　　当使用下拉刷新时，一定要先去app.json中window下，配置允许下拉刷新，即"enablePullDownRefresh": true,

"window": { 
  "backgroundTextStyle": "dark",
  "enablePullDownRefresh": true,
  "onReachBottomDistance": 50　　//刷新高度
},

本次分享就到这里啦，下一次是关于后端语言的处理(*^▽^*)