• 小程序 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.一些个人封装的方法,写的一般,别怼我

      

     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;

    弹框方法:import引入,tip.xxx即可

    3.富文本解析

    小程序本身并没有富文本解析,这里调用了插件wxparse,可是照它的方法在wepy中使用有有些笨重,而且还有点问题,这里提供自己借鉴前辈方法后封装的插件------传送门

    你的star是对我最大的鼓励

    此次写这个比较仓促,欢迎大家发现有什么问题留言给我,谢谢...

  • 相关阅读:
    C#生成满足特定要求的密码
    抽象方法(abstract method) 和 虚方法 (virtual method), 重载(overload) 和 重写(override)的区别于联系
    面试问题 ---C#中的委托
    面试问题
    如何用DOS命令,获取一个目录下的文件数目
    vim怎么把一个写的代码文件另存到任意文件夹里?
    WIN7 不用格式化磁盘怎么把FAT32系统改成NTFS系统
    rhel6 中安装使用finger命令
    Redhat enterpise6 安装unix2dos/dos2unix
    阐述Linux操作系统之rpm五种基本操作
  • 原文地址:https://www.cnblogs.com/bbbiu/p/8406408.html
Copyright © 2020-2023  润新知