小程序案例

fetch.js封装函数

module.exports = (url,type,data)=> {
  return new Promise((resolve,reject)=>{
    wx.request({
      url: `http://bl.7yue.pro/v1/${url}`,
      // url:`https://locally.uleee.com/${url}`,
      header:{
        'content-type':'application/json'
      },
      method:type,
      data:data,
      success:resolve,
      fail:reject
    })
  })
}

index.js点击上下页，切换页面
//index.js

//获取应用实例
const app = getApp()
var local=require("../../utils/mode.js")
const fetch=require("../../utils/fetch.js")
const model = require("../../utils/model.js")
const like = require("../../utils/like.js")
Page({
  data:{
    latest:true,
    first:false,
    likeCount:0,
    likeStatus:false,
  onLoad:function(){
      model.getLatest((data)=>{
        this._getLikeState(data.id,data.type)
        this.setData({
          classic: data
        })
      })
  },
  onLike:function (event) {
    let behavior=event.detail.behavior
    like.likeInfo(behavior, this.data.classic.id, this.data.classic.type)
  },
  onNext:function(){
      let index=this.data.classic.index
      model.getNext(index,(data)=>{
        if(data){
          this.setData({
            classic:data,
            latest: model.isLatest(data.index),
            first: model.isFirst(data.index)
          })
        } else {
          console.log('not more classic')
        }
      })
  },
  onPre:function(){
    let index = this.data.classic.index
    model.getPrevious(index, (data) => {
      this._getLikeState(data.id, data.type)
      if (data) {
        this.setData({
          classic: data,
          latest: model.isLatest(data.index),
          first:model.isFirst(data.index)
        })
      } else {
        console.log('not more classic')
      }
    })
  },
   _getLikeState:function(artID, category) {
    like.getClassicLikeStatus(artID, category, (data) => {
      this.setData({
        likeCount: data.fav_nums,
        likeStatus: data.like_status
      })
    })
  }
})

调用函数，切换页面

const fetch=require ('fetch.js')
const like = require('like.js')
module.exports={
  getLatest(sCallBack){
    let url='classic/latest'
    fetch(url).then((res)=>{
      let data = res.data
        let key=this._fullKey(data.index) 
        wx.setStorageSync(key, data)
        this.setLatest(data.index)
      sCallBack(data)
    }
     )
  },
  setLatest(index){
     wx.setStorageSync('latest',index)
  },
  _getLatestEpsoide() {
    let index = wx.getStorageSync('latest')
    return index
  },
  //判断是否是最新的一个
  isLatest(index){
    let latestKey = this._getLatestEpsoide()
    if(latestKey){
      if(latestKey==index){
       return true
      }
      else {
       return false
      }
    } 
  },
  isFirst(index) {
      if (index==1) {
        return true
      }
    else return false
  },
  //获取key值
 _fullKey(partkey){
   let key='classic-'+partkey
   return key
 },
//得到下一个
getNext(index,sCallBack){
  //回调函数得到本地保存的key值
  this._getClassic(index,'next',sCallBack)
},
  getPrevious(index, sCallBack) {
    //回调函数得到本地保存的key值
    this._getClassic(index,'previous',sCallBack)
  },
//得到本地保存的key值
  _getClassic(index,next_or_previous,sCallBack){
    //需要先获取key值
    let key = next_or_previous == 'next' ? this._fullKey(index + 1) :
      this._fullKey(index - 1)
    //把key值保存到小程序的域当中
    let classic = wx.getStorageSync(key)
    if(!classic){
      //需要先发送请求得到key，然后设置key
      let url = `classic/${index}/${next_or_previous}`
      fetch(url).then((res)=>{
        let data=res.data
        console.log(res)
        let key=this._fullKey(data.index)
        wx.setStorageSync(key, data)
        sCallBack(data)
      })
    } else {
      sCallBack(classic)
    }
  }
}

音乐播放

// components/music/music.js
let beh = require("../behavior.js")
const mus = wx.getBackgroundAudioManager()
Component({
  /**
   * 组件的属性列表
   */
  behaviors: [beh],
  properties: {
    src:String,
    title:String
  },

  /**
   * 组件的初始数据
   */
  data: {
    playing:false,
    pause:'images/waitting.png',
    play:'images/playing.png'
  },
  detached:function(event){
    mus.stop()
  },
  /**
   * 组件的方法列表
   */
  methods: {
    playing:function(){
      //切换图片
      this.setData({
        playing:true
      })
      console.log(this.properties.src)
      mus.src=this.properties.src
      mus.title=this.properties.title
    }
  }
})

index.wxml代码

<!--index.wxml-->
<view>
  <view>
    <view class="header">
      <epsoide index="{{classic.index}}"/>
      <like bind:like="onLike" like="{{likeStatus}}" count="{{likeCount}}"/>
      </view>
    <movie wx:if="{{classic.type==100}}" img="{{classic.image}}" content="{{classic.content}}"/>
    <music wx:if="{{classic.type==200}}" img="{{classic.image}}" content="{{classic.content}}" src="{{classic.url}}" title="{{classic.title}}"/>
  </view>
  <view class="navWrpaper">
      <nav catch:leftHandle="onNext" catch:rightHandle="onPre" title="{{classic.title}}" first="{{first}}" latest="{{latest}}"/>
  </view>
  <swiper indicator-dots="true" class="swiper">
      <swiper-item wx:for="{{swiper}}" wx:key="item">
        <image mode="scaleToFill" src="{{item.imgUrl}}"/>
      </swiper-item>
  </swiper>
</view>
<view class="icon">
<navigator url="/pages/share/share"  class="iconItem" wx:for="{{imgs}}" wx:key="item">
<text>{{item.title}}</text>
</navigator>
<navigator url="/pages/share/share"  class="iconItem" wx:for="{{img}}" wx:key="item">
<image src="{{item.image}}"/>
<text>{{item.title}}</text>
<text>{{item.hint}}</text>
</navigator>
</view>

点击爱心

// components/likes/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    like:{
      type:Boolean,
      //boolen默认为false
    },
    count:{
      type:Number
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    yesSrc:'../images/like.png',
    noSrc:'../images/like@dis.png'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onLike:function(e){
      let like = this.properties.like
      let count = like ? this.properties.count -1:this.properties.count+1
        this.setData({
          like: !like,
          count:count
        })
      let behavior = this.properties.like?'like':'cancel'
      this.triggerEvent('like',{
        behavior:behavior
      },{})
    }
  }
})

函数是自己封装的，可供以后参考。在这个小程序案例中，做的事情主要是缓存数据，封装函数，调用函数，
参考小程序文档