小程序 wepy 總結

時間 2019-11-10

標籤程序 wepy 總結简体版

原文原文鏈接

此篇文章僅僅是對自身項目的一個總結，並對一些遇到的問題給出解決方法git

一，安裝
github

　　wepy安裝
npm

二，使用小程序

　　wepy的文檔已經寫的很清晰了，遇到的問題大多在issues和wiki中也能找到，具體就不概述了，只是簡單總結一下後端

　　1. 項目目錄app

　　根據wepy建立的項目，出來的目錄應該是這樣的，其餘的咱們不用考究。src裏編寫咱們的項目代碼，cmd中npm run dev（本人windwos黨），項目會自動在dist文件中生成wxml等等，開發者工具中選中dist文件便可async

　　2.開發目錄ide

　　這是我src中的目錄，其中components中放的是組件，pages中放的是頁面，static中放的是公共文件工具

三，開發前問題this

　　1.開發者工具中需關掉項目設置中的前三個選項，根據我的狀況選擇關閉最後一個選項

　　真機調試非https需打開調試模式

　　2.referer

　　小程序固定referer爲https://servicewechat.com，在項目中調用不通接口的時候，去問下後端小夥子們這裏有沒有讓你經過

四，開發

　　1.分享

　　咱們只作了分享我的與羣，相應業務碼爲1007，1008.

　　在app.wpy中onshow或onlaunch獲取scene，具體請自行移步小程序開發文檔。從分享中的進入頁面，能夠在app.wpy設置globaldata，在相應頁面拿this.$parent.globaldata，用來判斷是否分享出來頁面

　　多嘴一句，爲什麼要這麼作，由於分享出來的子頁面是沒有回退按鈕的

　　2.一些我的封裝的方法，寫的通常，別懟我

 1 import wepy from 'wepy'
 2 
 3 //公共參數
 4 const defaultData = {
 5   deviceTime: new Date().toLocaleString() + new Date().getMilliseconds(),
 6   updateVersion: 'V2.0'
 7 }
 8 
 9 const wxRequest = async (_url, data, fn, errfn) => {
10   data = data || {}
11 
12   const _data = Object.assign({}, defaultData, data)
13   try {
14     await wepy.request({
15       method: 'POST',
16       header: {
17         'Content-Type': 'application/x-www-form-urlencoded'
18       },
19       url: _url,
20       data: _data
21     }).then((response) => {
22       if (response.data.code === '0') {
23         fn && fn(response.data)
24       } else {
25         errfn&& errfn()
26       }
27     })
28   } catch (e) {
29     console.log(e)
30   }
31 }
32 export {
33   wxRequest
34 }

請求數據方法：頁面import，wxRequest(傳參)

/**
 * 提示與加載工具類
 */

export default class Tips {
  constructor() {
    this.isLoading = false;
  }
  /**
   * 彈出提示框
   */

  static success(title, duration = 500) {
    setTimeout(() => {
      wx.showToast({
        title: title,
        icon: "success",
        mask: true,
        duration: duration
      });
    }, 300);
    if (duration > 0) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve();
        }, duration);
      });
    }
  }

  /**
   * 彈出確認窗口
   */
  static confirm(text, fn, title = "提示") {
    return new Promise((resolve, reject) => {
      wx.showModal({
        title: title,
        content: text,
        showCancel: true,
        success: res => {
          if (res.confirm) {
            fn()
          } else if (res.cancel) {

          }
        },
        fail: res => {

        }
      });
    });
  }

  static toast(title, onHide, icon = "success") {
    setTimeout(() => {
      wx.showToast({
        title: title,
        icon: icon,
        mask: true,
        duration: 2000
      });
    }, 300);

    // 隱藏結束回調
    if (onHide) {
      setTimeout(() => {
        onHide();
      }, 500);
    }
  }

  /**
   * 警告框
   */
  static alert(title) {
    wx.showToast({
      title: title,
      image: "../images/alert.png",
      mask: true,
      duration: 1500
    });
  }

  /**
   * 錯誤框
   */

  static error(title, onHide) {
    wx.showToast({
      title: title,
      image: "../images/error.png",
      mask: true,
      duration: 500
    });
    // 隱藏結束回調
    if (onHide) {
      setTimeout(() => {
        onHide();
      }, 500);
    }
  }

  /**
   * 彈出加載提示
   */
  static loading(title = "加載中") {
    if (Tips.isLoading) {
      return;
    }
    Tips.isLoading = true;
    wx.showLoading({
      title: title,
      mask: true
    });
  }

  /**
   * 加載完畢
   */
  static loaded() {
    if (Tips.isLoading) {
      Tips.isLoading = false;
      wx.hideLoading();
    }
  }

  static share(title, url, desc) {
    return {
      title: title,
      path: url,
      desc: desc,
      success: function(res) {
        Tips.toast("分享成功");
      }
    };
  }
}

/**
 * 靜態變量，是否加載中
 */
Tips.isLoading = false;