wepy 初探

时间:2024-10-27 12:34:32

此篇文章仅仅是对自身项目的一个总结,并对一些遇到的问题给出解决方法

一,安装

  wepy安装

二,使用

  wepy的文档已经写的很清晰了,遇到的问题大多在issues和wiki中也能找到,具体就不概述了,只是简单总结一下

  1. 项目目录

  wepy 初探

  根据wepy创建的项目,出来的目录应该是这样的,其他的我们不用考究。src里编写我们的项目代码,cmd中npm run dev(本人windwos党),项目会自动在dist文件中生成wxml等等,开发者工具中选中dist文件即可

  2.开发目录

  wepy 初探

  这是我src中的目录,其中components中放的是组件,pages中放的是页面,static中放的是公共文件

三,开发前问题

  1.开发者工具中需关掉项目设置中的前三个选项,根据个人情况选择关闭最后一个选项

  wepy 初探

  真机调试非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是对我最大的鼓励

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