微信小程序之前端代碼篇

本篇主要講述一些，不太常用但用起來又不太會的組件、和一些邏輯思考等。

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

 

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，需要寫請求隊列，以等待請求。

   

本次分享就到這里啦，下一次是關於后端語言的處理(*^▽^*)