小程序端app.js封装请求方法

//app.js

App({

  onLaunch: function () {

    let App = this

    // 设置api地址

    App.setApiRoot()

  },

  globalData: {

    userInfo: null

  },

  api_root: '', // api地址

  appid:'',

  /**

   * 显示失败提示框

   */

  showError(msg, callback) {

    wx.showModal({

      title: '友情提示',

      content: msg,

      showCancel: false,

      success(res) {

        callback && callback()

      }

    })

  },

   /**

   * 设置api地址

   */

  setApiRoot() {

    let App = this

    // App.api_root = config.config.host

    let extConfig = wx.getExtConfigSync? wx.getExtConfigSync(): {}

    console.log(extConfig)

    App.appid = extConfig.attr.appid

    App.api_root = extConfig.attr.host

  },

  /**

   * get请求

   */

  _get(url, data, success, fail, complete, check_login) {

    let App = this

    wx.showNavigationBarLoading()

    // 构造请求参数

    data = Object.assign({

      token: wx.getStorageSync('token'),

      appid:App.appid  

    }, data)

    // if (typeof check_login === 'undefined')

    //   check_login = true

    console.log(App.api_root) 

    // 构造get请求

    let request = () => {

      data.token = wx.getStorageSync('token')

      wx.request({

        url: App.api_root + url,

        header: {

          'content-type': 'application/json'

        },

        data,

        success(res) { 

          if (res.statusCode !== 200 || typeof res.data !== 'object') {

            console.log(res)

            App.showError('网络请求出错') 

            return false

          } 

          if (res.data.code === -1) {

            // 登录态失效, 重新登录

            wx.hideNavigationBarLoading()

            App.doLogin(() => {

              App._get(url, data, success, fail)

            })

          } else if (res.data.code === 0) {

            App.showError(res.data.msg)

            return false

          } else {

            success && success(res.data)

          }

        },

        fail(res) {

          // console.log(res)

          App.showError(res.errMsg, () => {

            fail && fail(res)

          })

        },

        complete(res) {

          wx.hideNavigationBarLoading()

          complete && complete(res)

        },

      })

    }

    // 判断是否需要验证登录

    check_login ? App.doLogin(request) : request()

  },

  /**

   * post提交

   */

  _post_form(url, data, success, fail, complete) {

    wx.showNavigationBarLoading()

    let App = this

    // 构造请求参数 

    data = Object.assign({

      token: wx.getStorageSync('token'), 

      appid:App.appid  

    }, data)

    data.token = wx.getStorageSync('token')

    wx.request({

      url: App.api_root + url,

      header: {

        'content-type': 'application/x-www-form-urlencoded',

      },

      method: 'POST',

      data,

      success(res) {

        if (res.statusCode !== 200 || typeof res.data !== 'object') {

          App.showError('网络请求出错')

          return false

        }

        if (res.data.code === -1) {

          // 登录态失效, 重新登录

          App.doLogin(() => {

            App._post_form(url, data, success, fail)

          })

          return false

        } else if (res.data.code === 0) {

          App.showError(res.data.msg, () => {

            fail && fail(res)

          })

          return false

        }

        success && success(res.data)

      },

      fail(res) {

        // console.log(res)

        App.showError(res.errMsg, () => {

          fail && fail(res)

        })

      },

      complete(res) {

        wx.hideLoading()

        wx.hideNavigationBarLoading()

        complete && complete(res)

      }

    })

  },

   /**

   * 验证登录

   */

  checkIsLogin() {

    return wx.getStorageSync('token') != ''

  }, 

  /**

   * 授权登录

   */

  doLogin(callback) { 

    let App = this

    // if (e.detail.errMsg !== 'getUserInfo:ok') {

    //   return false

    // }

    wx.showLoading({

      title: "加载数据中...",

      mask: true

    }) 

    // 执行微信登录

    wx.login({ 

      success(res) {

        // 发送用户信息 

        App._post_form('login', {

          code: res.code,

        }, result => {

          // 记录token user_id

          wx.setStorageSync('token', result.data.token,)

          // 执行回调函数

          callback && callback()

        }, false, () => {  

          wx.hideLoading()

        })

      }

    }) 

  }

})

首先确认是否有相应的接口权限，这里主要用到获取素材相关的接口，可以看到对应接口文档，个人号还是有对应权限的。

在新增了永久素材后，开发者可以分类型获取永久素材的列表：

1、获取永久素材的列表，也包含公众号在公众平台官网素材管理模块中新建的图文消息、语音、视频等素材 。

2、临时素材无法通过本接口获取。

3、调用该接口需https协议。

实现的逻辑还是比较简单的，具体分两个步骤：

1、获取公众号的access_token

获取公众号的access_token的在前文中已经实现。

基于微信小程序云函数的方式获取微信公众号access_token -

2、遍历调用公众号永久素材列表接口获取数据

调用素材列表接口，获取相应的文章信息，这里主要获取公众号的图文信息(type为news)，接口调用请求说明：

http请求方式: POST

https://api.weixin.qq.com/cgi-bin/material/batchget_material?access_token=ACCESS_TOKEN

调取素材列表之后在小程序中通过视图组件scroll-view来实现，主要有标题、封面图、摘要：

<scroll-view class="container"scroll-y='true' style="height:{{height}}px" bindscrolltolower='lower'>

<block wx:for="{{res}}" >

<view class='feed-item' id='{{item.title}}' bindtap='getDetial'>

<view>

<text >{{item.title}}</text>

</view>

<view style='text-align: center'>

<image src='{{item.image_url}}'>tupian </image>

</view>

<view>

<text >{{item.digest}}</text>

</view>

</view>

</block>

</scroll-view>

文章列表在页面首次加载时就获取：

/**

* 生命周期函数--监听页面加载

*/

onLoad: function (options) {

wx.getSystemInfo({

success: (res) =>{

this.setData({

height: res.windowHeight

})

}

})

this.getData()

}

函数getData()实现步骤，具体请求函数用云函数来实现，先从调取acces_token：

// 云函数入口文件

const cloud = require('wx-server-sdk')

const news = require('New')

cloud.init()

// 云函数入口函数

exports.main = async (event, context) =>{

let token = null

await cloud.callFunction({

name:'token'

}).then(function(data){

token = data.result

})

let offset = event.offset

let count = event.count

let nw = new news(token)

let rst = nw.getWechatPosts(offset,count)

return rst

}

然后调取文章列表信息，每次获取10条信息：

//获取文章列表

getData(){

var that = this

let pgno = this.data.pageNo+1

let result = this.data.res

wx.cloud.callFunction({

name:'news',

data:{

offset:this.data.offset,

count:this.data.count

},

success:function(res){

var resArr = []

let body = res.result.body

let total_count = body.total_count//总共图文数量

let item_count = body.item_count//本次调用数量

let item = body.item

let page_total = parseInt((total_count + that.data.count - 1) / that.data.count)

let mud = total_count % that.data.count

const db = wx.cloud.database()

for (let i = 0i <item.lengthi++) {

let news_item = item[i].content.news_item

//单图文消息及多图文消息

for (let j = 0j <news_item.lengthj++) {

let title = news_item[j].title//标题

let url = news_item[j].url//详细地址

let image_url = news_item[j].thumb_url//封面图片地址

let digest = news_item[j].digest//摘要

let author = news_item[j].author//作者

let content = news_item[j].content

resArr.push(new nw(total_count, item_count, title, url, image_url, digest, author, content))

let res_id = null

db.collection('content').where({

_id: url

}).get({

success: function (res) {

res_id = res.data[0]._id

}

})

if (res_id === url){

}else{

db.collection('content').add({

data: {

_id: url,

content: content,

title: title

},

success: function (res) {

}

})

}

}

that.setData({

res: result.concat(resArr),

page_total: page_total,

pageNo: pgno,

mud: mud

})

}

}

})

}

scroll-view组件到底触发事件实现函数：

lower() {

//总页数18/10=1

var pageno = this.data.pageNo

var page = this.data.page_total

console.log("总页数：" + page+",第"+pageno+"页"+"zuohouy:"+this.data.mud)

if (pageno >page) {//page 4

wx.showToast({ //如果全部加载完成了也d一个框

title: '我也是有底线的',

icon: 'success',

duration: 300

})

return false

} else {

wx.showLoading({ //期间为了显示效果可以添加一个过度的d出框提示“加载中”

title: '加载中',

icon: 'loading',

})

let offset = this.data.offset

let count = this.data.count

offset = this.data.offset + this.data.count

console.log("offset:" + offset+"count:"+count)

this.setData({

offset: offset,

count: count

})

setTimeout(() =>{

this.getData()

wx.hideLoading()

}, 1500)

}

}

设计一个实现倒计时功能的小程序，小程序运行后，首先显示空白界面，过2秒后才显示计时界面，点击“开始计时”按钮后开始倒计时，点击“停止计时”按钮后停止计时。

实现效果：根据案例描述做出如下图效果，初始显示空白界面，2秒后显示计时界面（图1），数字为60，点击“开始计时”按钮后开始倒计时，点击“停止计时”按钮后停止计时（图2）。

index.wxml

<!--index.wxml-->

<view class="container">

  <view wx:if="{{hidden}}">

    <view class="title">计时器</view>

    <view class="play">{{num}}</view>

    <view class="btn">

      <button bindtap="start">开始计时</button>

      <button bindtap="stop">停止计时</button>

    </view>

  </view>

</view>

index.js

// index.js

// 获取应用实例

var num = 60//定义开始秒数

//定义一个布尔变量，用于停止计时器

var ynStop=false

Page({

  data: {

    //用于显示计算器

    hidden: false,

    num: num

  },

  //渲染出计时器

  onLoad() {

    //function里直接用this会出错

    var that =this

    //延时显示函数

    setTimeout(function(){

    //设置隐藏属性为否

    that.setData({

      hidden:true

    })

  }

  //设置延时为2s

    , 2000)

  },

 

  start: function () { //开始计时函数

    //设置显示器值为当前值减一

    this.setData({

      num: num--

    })

    //调用timer函数

    this.timer()

    //后台打印num值

    console.log(num)

  },

 

  stop: function () {  //停止函数

    //将是否停止循环值定义为真

      ynStop=true

    console.log(ynStop)

  },

  timer: function () { //计时函数

 

    if (num >0&&ynStop==false) {

      //隔一秒回调start函数，注意setTimeout里函数不要加括号，或者用function（）{}

      setTimeout(this.start, 1000)

    } else {

      this.setData({

        num: 0

      })

    }

  }

---