微信小程序之前端代码篇

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

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的属性中

<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　　//刷新高度
},

6、续--另外的补充

• css伪类看不到，Styles不会显示css伪类，喜欢写::before或:first-child的请注意，伪类在控制台是看不到的。

• 小程序的图片只支持https://…的URL，后台接口不能传//或http://，否则有些安卓机会不兼容。

• 不要换行写，有空格不行；如果代码换行，页面也直接换行。

• 部分CSS3不可使用，比如transform:rorate(180reg)不可使用。

• wx.navigateTo 新窗口打开页面 新页面有返回按钮；

  wx.redirectTo 关闭当前页面，跳转到应用内的某个页面 新页面没有返回按钮。

• 分享事件不支持同步

  如果想自定义分享图片，则在生命周期onShareAppMessage中编写；但是onShareAppMessage不能支持异步，如果想从接口里获取分享图片URL，必须在onLoad提前读取并放入data中。

• 小程序有并发限制

  wx.request、wx.uploadFile、wx.downloadFile 的最大并发限制是 10 个。如果并发量大于10，需要写请求队列，以等待请求。

   

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