小程序封装网络错误组件

小程序封装网络请求错误组件

在pages内创建一个单独的文件夹来放置各种封装的组件

//因为是网络中断，所以图片需要本地存放
<view>
	<view class="">
		<image src="./image/q_wangluo@2x.png"></image>
		<view class="">暂无网络链接</view>
		<view class="">刷新一下找它回来</view>
		<view class="btn" bindtap="addInfo" >刷新</view>
	</view>
</view>

因为是组件，所以js内的生命周期，数据也是有所不同的

Component({
	/**
	 * 组件的属性列表
	 */
	properties: {
	 
	},
  
	/**
	 * 组件的初始数据
	 */
	data: {
	  
	},
  
	/**
	 * 组件的方法列表
	 */
	methods: {
		addInfo(){
		  console.log(11)
		  let item = {title:'测试',money:8,category:'吃饭'}//要传给父组件的参数，当然也可以不传
		  this.triggerEvent('addInfo',item)//通过triggerEvent将参数传给父组件
	  }
	},
  })

在需要用到页面内引入和配置json

//wxml内引入，标签就是你在json内引入时的命名
<v-interrupt wx:if="{{networkType == 'none' || networkType== 'unknown' }}" bind:addInfo="getAddInfo"></v-interrupt>

//需要在onload内先去获取当前页面网络状态
	wx.getNetworkType({
			success: function (res) {
				// 返回网络类型, 有效值：
				// wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
				mythis.setData({
					networkType: res.networkType
				})
			}
		})


//引入组件的事件
getAddInfo(e) {
		var mythis = this
		wx.showToast({
		  title: '加载中...',
		  icon:'none',
		  duration:1500
		})
		wx.getNetworkType({
			success: function (res) {
				// 返回网络类型, 有效值：
				// wifi/2g/3g/4g/unknown(Android下不常见的网络类型)/none(无网络)
				mythis.setData({
					networkType: res.networkType
				})
				//根据所需要的需求来添加或修改
			}
		})
	},

代码还有很多不足，希望大家多多指教