H5项目总结

项目基础：RN ,taro框架，实现H5

1.无限加载的实现

  1 import Taro, { Component } from '@tarojs/taro'
  2 import { View, Text, ScrollView } from '@tarojs/components'
  3 // import { connect } from '@tarojs/redux'
  4 // import { add, minus, asyncAdd } from '@/actions/counter'
  5 import { AtLoadMore } from "taro-ui"
  6 import fetch from '@/api/request.js'
  7 import PersonNews from '@/components/PersonNews'
  8 
  9 import styles from './index.module.scss'
 10 import '../staticPic/icon.scss'
 11 
 12 
 13 // 时间戳转换
 14 function add0(m){return m<10?'0'+m:m }
 15 function timeFormat(timestamp){
 16 
 17     var time = new Date(timestamp);
 18     var year = time.getFullYear();
 19     var month = time.getMonth()+1;
 20     var date = time.getDate();
 21     var hours = time.getHours();
 22     var minutes = time.getMinutes();
 23     var seconds = time.getSeconds();
 24     return year+'-'+add0(month)+'-'+add0(date)+' '+add0(hours)+':'+add0(minutes)+':'+add0(seconds);
 25 }
 26 
 27 // @connect(state => state.counter, { add, minus, asyncAdd })
 28 class NewsInform extends Component {
 29 
 30   config = {
 31     navigationBarTitleText: '行家'
 32   }
 33 
 34 
 35   state = {
 36     selectTabType: 0, //判断加载的消息类型
 37     selectLoadCourse:0, //课程加载结束状态
 38     selectLoadPlatfrom:0, //平台加载状态
 39     listClass:[], //课程消息
 40     listPlatform:[], // 平台消息
 41     count: 1, // 课程消息未读总数
 42     paltfromCount: 1, // 平台消息未读总数
 43     status: 'more',
 44     statusCourse: 'more',
 45     defaultColor: false,
 46     defaultColor2: true,
 47     courseAll:1, // 所有的课程消息数目
 48     platfromAll:1, // 所有的平台消息数目
 49     page:1, // 平台页码
 50     pageCourse:1, // 课程页码
 51   }
 52 
 53   // 慎用
 54   componentWillReceiveProps(nextProps) {
 55     console.log(this.props, nextProps)
 56   }
 57   componentDidShow () { // 每次进入页面就会执行数据的信息
 58     console.log('改变消息的状态')
 59     if (this.state.selectTabType === 0) {
 60      this.msgUnReadCount() //平台未读消息
 61      console.log(this.state.listPlatform, '返回的数据之前');
 62      Taro.getStorage({ key: '0' }) // 通过key判断是平台的消息，从url获得跳转到消息详情的id然后在消息页面回显
 63      .then(res => this.setState({
 64       listPlatform:this.state.listPlatform.map(i => { // 遍历之前的数据，通过比较msgId然后改变消息已读的状态，全局的信息是通过taro自己携带Taro.setStorage({ key: type, data: id }) // 设置消息详情的数据到全局
 65         if ( i.msgId == res.data) {
 66          i.isReaded = 1;
 67        }
 68        return i;
 69       })
 70      }))
 71      console.log(this.state.listPlatform, '返回的数据之后');
 72     } else if (this.state.selectTabType === 1) {
 73       this.courseUnReadMsgCount() // 课程消息未读总数 
 74       Taro.getStorage({ key: '1' })
 75       .then(res => this.setState({
 76        listClass:this.state.listClass.map(i => {
 77          if ( i.msgId == res.data) {
 78           i.isReaded = 1;
 79         }
 80         return i;
 81        })
 82       }))  
 83     }
 84 
 85    
 86    
 87   }
 88   componentDidMount () {
 89     this.courseClick() // 课程的数据
 90     this.pageClick() // 平台消息的数据
 91     this.platnewsClick() //初次渲染平台消息的数据
 92     this.courseMsgCount() // 课程消息总数
 93     this.courseUnReadMsgCount() // 课程消息未读总数
 94     this.msgUnReadCount() //平台未读消息
 95   }
 96 
 97   // 请求课程消息的数据
 98   courseClick = () => {
 99     fetch('getCourseMsg', {
100       SSOTOKEN:Taro.getStorageSync('token'),
101       pageSize:5,
102       page:this.state.pageCourse,
103     }).then((res) => {
104       console.log(res, '课程消息的接口')
105       this.setState({
106         listClass: res,
107         selectLoadCourse:1,
108         pageCourse:this.state.pageCourse+1,
109       })
110       if (res.length <= 5) {
111         this.setState({
112           status:'noMore'
113         })
114       }
115     })
116   }
117 
118   // 请求平台消息的数据
119   pageClick() { 
120     this.setState({
121       defaultColor: false,
122       defaultColor2: true,
123     })
124     fetch('getplatformMsg', {
125       SSOTOKEN:Taro.getStorageSync('token'),
126       pageSize:5,
127       page:this.state.page,
128     }).then((res) => {
129       console.log(res, '平台消息接口')
130       this.setState({
131         listPlatform: res,
132         selectLoadPlatfrom:1,
133         page:this.state.page+1,
134       })
135       if (res.length <= 5) {
136         this.setState({
137           status:'noMore'
138         })
139       }
140     })
141   }
142 
143    // 课程消息点击事件
144    courseNewsClick() {
145     this.setState({
146       defaultColor: true,
147       defaultColor2: false,
148       selectTabType: 1,
149     })
150   }
151   // 平台消息点击事件
152   platnewsClick() {
153     this.setState({
154       selectTabType: 0,
155       defaultColor: false,
156       defaultColor2: true
157     })
158   }
159 
160 //  请求课程消息总数
161 courseMsgCount () {
162   fetch('getCourseAllMsg', {
163     SSOTOKEN:Taro.getStorageSync('token'),
164   }).then((res) => {
165     console.log(res, '课程消息总数')
166     this.setState({
167       courseAll:res.count
168     })
169   })
170 }
171 
172 // 平台消息总数
173 courseMsgCount () {
174   fetch('getPlatfromAllMsg', {
175     SSOTOKEN:Taro.getStorageSync('token'),
176   }).then((res) => {
177     console.log(res, '平台消息总数')
178     this.setState({
179       platfromAll:res.count
180     })
181   })
182 }
183 // 请求未读消息
184 courseUnReadMsgCount () {
185   fetch('getCourseUnReadMsg', {
186     SSOTOKEN:Taro.getStorageSync('token'),
187   }).then((res) => {
188     console.log(res, '课程未读总数')
189     this.setState({
190      count: res.count,
191     })
192   })
193 }
194 // 平台未读消息
195 msgUnReadCount () {
196   fetch('getMsgUnReadCount', {
197     SSOTOKEN:Taro.getStorageSync('token'),
198   }).then((res) => {
199     console.log(res, '平台未读总数')
200     this.setState({
201      paltfromCount: res.count,
202     })
203   })
204 }
205 
206   goDetails(id) { // 跳转
207     console.log(id, 'selectTypeId数据')
208     Taro.navigateTo({
209       url: `/personCenter/pages/personalCenter/newsDetails/index?id=${id}&type=${this.state.selectTabType}`,
210     }) 
211   }
212 
213   goBack() { //回退一级
214     Taro.navigateBack({ delta: 1 })
215   }
216   loadClick = () => {
217     console.log('上拉到底部触发',this.state.platfromAll,this.state.courseAll)
218     // 判断要操作的容器(selectTabType)
219     if (this.state.selectTabType === 0) { // 平台
220     if (this.state.selectLoadPlatfrom === 1) {
221         this.setState({
222           defaultColor: false,
223           defaultColor2: true,
224           status: 'loading' // 平台加载
225         })
226         fetch('getplatformMsg', {
227           SSOTOKEN:Taro.getStorageSync('token'),
228           pageSize:5,
229           page:this.state.page,
230         }).then((res) => {
231           console.log(res, '平台消息接口')
232           if (res.length == 0) {
233             this.setState({
234               status: 'noMore',
235               selectLoadPlatfrom:0
236             })
237           } else {
238             // 有更多数据的时候
239             let moreData = this.state.listPlatform.concat(res);
240             this.setState({
241             listPlatform:moreData,
242             selectLoadPlatfrom:1,
243             page:this.state.page+1,
244             status: 'more'
245           })
246           }
247         })
248     }
249     } else if (this.state.selectTabType === 1) { // 课程
250       console.log('进入课程数据的上啦加载',this.state.selectTabType,'课程加载完之后的数据',this.state.selectLoadCourse)
251       if (this.state.selectLoadCourse === 1) {
252         console.log('课程已经加载完毕',this.state.selectTabType)
253         this.setState({
254           defaultColor: true,
255           defaultColor2: false,
256           statusCourse: 'loading' // 课程加载
257         })
258         fetch('getCourseMsg', {
259           SSOTOKEN:Taro.getStorageSync('token'),
260           pageSize:5,
261           page:this.state.pageCourse,
262         }).then((res) => {
263           console.log(res, '课程消息接口')
264           if (res.length == 0) {
265             console.log('没数据了')
266             this.setState({
267               statusCourse: 'noMore',
268               selectLoadCourse:0
269             })
270           } else {
271             // 有更多数据的时候
272             let moreData = this.state.listClass.concat(res);
273             this.setState({
274             listClass:moreData,
275             selectLoadCourse:1,
276             pageCourse:this.state.pageCourse+1,
277             statusCourse: 'more'
278           })
279           }
280         })
281     }  
282     }
283     // 判断是否单次加载完毕
284     
285     // 判断是否全部加载完毕
286 
287     // 设置为请求状态
288 
289     // 请求数据
290 
291     // 设置请求状态（单次完成 or 全部加载完毕）
292 
293     // 设置数据到对应的容器
294   }
295 
296   
297 
298   render() {
299 
300     let styleObj = {
301       color: this.state.defaultColor?'#666':'#ff7847'
302     }
303     let styleObj2 = {
304       color: this.state.defaultColor2?'#666':'#ff7847'
305     }
306 
307     let mapListData = []; // 对容器的数据进行筛选
308     if (this.state.selectTabType === 0) {
309       mapListData = this.state.listPlatform.concat([]);
310     } else if (this.state.selectTabType === 1) {
311       mapListData = this.state.listClass.concat([]);
312     }
313 
314     
315     return (
316       
317       <View className={styles.content}>
318         <View className={styles.componentsPage}>
319           <View style={styleObj} className={styles.button} onClick={this.platnewsClick.bind(this)}><Text className='iconfont icon-left' style={{float:'left',paddingLeft:'21px',color:'#666'}} onClick={this.goBack.bind(this)}></Text>
320           平台消息{(this.state.paltfromCount!=0)&&<Text className={styles.number1}>{this.state.paltfromCount}</Text>}</View>
321           <View style={styleObj2} className={styles.button} onClick={this.courseNewsClick.bind(this)}>课程消息{(this.state.count!=0)&&<Text className={styles.number}>{this.state.count}</Text>}</View>
322         </View>
323         <ScrollView
324           scrollY
325           scrollWithAnimation
326           scrollTop='0'
327           style={{height:'667px',marginTop:'44px'}}
328           lowerThreshold='20'
329           upperThreshold='20'
330           onScrollToLower={this.loadClick}
331           hidden={this.state.selectTabType==0?false:true}
332         >
333           {
334             mapListData.map((item,index) => {
335               item.pushTime = timeFormat(item.pushTime);
336               return <PersonNews key={index} isReaded={item.isReaded} title={item.title} describe={item.describe} pushTime={item.pushTime} ongoDetails={()=>this.goDetails(item.msgId)} />
337             })
338           }
339           <AtLoadMore status={this.state.status} noMoreTextStyle={{
340              '100%',
341             lineHeight: '10px',
342             textAlign: 'center',
343             fontSize: '12px',
344             color: '#ccc',
345             border: 'none',
346           }} noMoreText='已无更多消息' moreBtnStyle={{
347              '100%',
348             lineHeight: '10px',
349             textAlign: 'center',
350             fontSize: '12px',
351             color: '#ccc',
352             border: 'none',
353           }}
354           />
355         </ScrollView>
356 
357         <ScrollView
358           scrollY
359           scrollWithAnimation
360           scrollTop='0'
361           style={{height:'667px',marginTop:'44px'}}
362           lowerThreshold='20'
363           upperThreshold='20'
364           onScrollToLower={this.loadClick}
365           hidden={this.state.selectTabType==1?false:true}
366         >
367           {
368             mapListData.map((item,index) => {
369               item.pushTime = timeFormat(item.pushTime);
370               return <PersonNews key={index} isReaded={item.isReaded} title={item.title} describe={item.describe} pushTime={item.pushTime} ongoDetails={()=>this.goDetails(item.msgId)} />
371             })
372           }
373           <AtLoadMore status={this.state.statusCourse} noMoreTextStyle={{
374              '100%',
375             lineHeight: '10px',
376             textAlign: 'center',
377             fontSize: '12px',
378             color: '#ccc',
379             border: 'none',
380           }} noMoreText='已无更多消息' moreBtnStyle={{
381              '100%',
382             lineHeight: '10px',
383             textAlign: 'center',
384             fontSize: '12px',
385             color: '#ccc',
386             border: 'none',
387           }}
388           />
389         </ScrollView>
390       </View>
391     )
392   }
393 }
394 
395 export default NewsInform

// index.module.scss文件是sass形式存在，想不用

className={styles.content}想用className='content'就需要用到：global{}来实现。

2.组件的开发和引入

import Taro, { Component } from '@tarojs/taro'

import { View, Text, Image } from '@tarojs/components'

import styles from './index.module.scss'

import spot from './spot.png'

export default class Feed extends Component {

render() {

return (

<Text className={styles.text}>{this.props.name}</Text>

<Text className={styles.time}>{this.props.time}</Text>

</View>

)

}

*注意onEvent必须是带on，taro框架限制了这一点；

3.数据需要共享的时候用的方法-----看黄色标注文字

*注意文件的层级关系最好同级，不然报错找不到；

4.周末继续补充