做完小程序项目、老板给我加了6K～

最新推荐文章于 2021-02-04 15:48:23 发布

苏南South

最新推荐文章于 2021-02-04 15:48:23 发布

阅读量2.8k

点赞数 3

分类专栏：前端 javascript 小程序前端进阶文章标签：小程序 javascript component vue wepy

本文链接：https://blog.csdn.net/weixin_43254766/article/details/82811714

版权

本文作者苏南分享了在小程序项目中使用wepy框架的经验，包括自定义toast组件、实现localStorage过期时间、接口API的环境维护等。还提到了wepy框架的一些坑点，如组件的onload生命周期问题和rich-text组件的不足，并提供了解决方案。此外，作者鼓励大家积极交流，共同进步。

摘要由CSDN通过智能技术生成

大家好，我是苏南，今天要给大家分享的是最近公司做的一个小程序项目，过程中的一些好的总结和遇到的坑，希望能给其他攻城狮带来些许便利，更希望能做完之后老板给你加薪～

Ã§ÂÂ¸Ã¥ÂÂ³Ã¥ÂÂ¾Ã§ÂÂ

今天是中秋节的第一天，假日的清晨莫名的醒的特别早，不知道为什么，也许是因为，昨晚公司上线的项目回来的路上，发现了个小bug，心里有些忐忑，一会偷偷先改了，让领导发现这个月绩效就没了～～

Ã§ÂÂ¸Ã¥ÂÂ³Ã¥ÂÂ¾Ã§ÂÂ

以上纯为扯淡，现在开始一本正经的装逼，请系好安全带，中间过程有可能会开车，请注意安全！！！！！

最近个项目跟团队小伙伴沟通后用的是wepy框架，没有直接用原生的，小程序原生就……，大家都懂的，用wepy框架，给自己带来了便利，也带来了不少坑，但纵是如此，我还是怀着：“纵你虐我千百遍，我仍待你如初恋”的心态去认真把项目做好

1、toast的封装，大家都知道，官方的api wx.showToast 是满足不了我们的需求的，因为它只支持 "success", "loading"两种状态，同时“ title 文本最多显示 7 个汉字长度”，这是官方原话，有图有真相哦，样式巨丑～

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})
wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success: function(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

wx.showModal的content的文字是不会居中的（现在不确定有没有扩展，可以设置），依稀记得有一次因为问题差点跟产品经理吵起来，让文字居中，我说最少要两小时，当时产品就炸了，什么鬼？？？让文字居中一下要两小时？？两小时？？两小时？？呵呵～走了，后来就下决定自己封装了一个属于自己的toast组件，以下为部分核心代码

<template lang="wxml">
	
	<view class="ui-toast  {
  { className }}" hidden="{
  { !visible }}">
		<view class="ui-toast_bd">
			<icon wx:if="{
  { options.icon}}" type="{
  { options.icon }}" size="40" color="{
  { options.color }}" class="ui-toast_icon" />
			<view class="ui-toast_text">{
  { options.text }}</view>
		</view>
	</view>
</template>

<script>
	import wepy from 'wepy';
	const __timer__ =1900;
	//方法以 ： __XX__ 命名，因并入其他组件中后，可能引起方法名重复
	class Toast extends wepy.component {
			
		/**
		 * 默认数据
		 */
		data={
			 list:[
				{
					type: `success`,
					icon: `success`,
					className: `ui-toast-success`,
				},
				{
					type: `cancel`,
					icon: `cancel`,
					className: `ui-toast-cancel`,
				},
				{
					type: `forbidden`,
					icon: `warn`,
					className: `ui-toast-forbidden`,
				},
				{
					type: `text`,
					icon: ``,
					className: `ui-toast-text`,
				},
			],
			timer:null,
			scope: `$ui.toast`, 
			animateCss:'animateCss',
			className:'',
			visible:!1,
			options:{
				type: ``, 
				timer: __timer__, 
				color: `#fff`, 
				text: `已完成`, 
			}
		}
		/**
		 * 默认参数
		 */
		__setDefaults__() {
			return {
				type: `success`, 
				timer: __timer__, 
				color: `#fff`, 
				text: `已完成`, 
				success() {}, 
			}
		}
		/**
     * 设置元素显示
     */
    __setVisible__(