小程序 wepy 總結

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

一，安裝

　　wepy安裝

二，使用

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

　　1. 項目目錄

　　

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

　　2.開發目錄

　　

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

三，開發前問題

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

　　

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

　　2.referer

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

四，開發

　　1.分享

　　我們只做了分享個人與群，相應業務碼為1007，1008.

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

　　多嘴一句，為何要這么做，因為分享出來的子頁面是沒有回退按鈕的

　　2.一些個人封裝的方法，寫的一般，別懟我

　　

import wepy from 'wepy'

//公共參數
const defaultData = {
  deviceTime: new Date().toLocaleString() + new Date().getMilliseconds(),
  updateVersion: 'V2.0'
}

const wxRequest = async (_url, data, fn, errfn) => {
  data = data || {}

  const _data = Object.assign({}, defaultData, data)
  try {
    await wepy.request({
      method: 'POST',
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      url: _url,
      data: _data
    }).then((response) => {
      if (response.data.code === '0') {
        fn && fn(response.data)
      } else {
        errfn&& errfn()
      }
    })
  } catch (e) {
    console.log(e)
  }
}
export {
  wxRequest
}

請求數據方法：頁面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;

彈框方法：import引入，tip.xxx即可

3.富文本解析

小程序本身並沒有富文本解析，這里調用了插件wxparse，可是照它的方法在wepy中使用有有些笨重，而且還有點問題，這里提供自己借鑒前輩方法后封裝的插件------傳送門

你的star是對我最大的鼓勵

 

此次寫這個比較倉促，歡迎大家發現有什么問題留言給我，謝謝...