【聊天表情包小程序的开发】之小程序工具类的实现

上一篇博客完成了对聊天表情包小程序的选型和小程序的框架结构的制作；本篇则开始着手制作小程序的界面和工具类。

为了我们以后更容易的维护小程序，需要把网络请求的功能集成在一起，这样在修改的时候就方便的多了，下面的是对wx.request的封装，wxRequest.js，以后其他的js文件都要引用它来进行网络请求。

function wxPromisify(fn) {
    return function (obj = {}) {
        return new Promise((resolve, reject) => {
            obj.success = function (res) {
                //成功
                wx.hideNavigationBarLoading()
                resolve(res)
                
            }
            obj.fail = function (res) {
                //失败
                reject(res)
                wx.hideNavigationBarLoading()
                console.log(res)
            }
            fn(obj)
        })
    }
}
//无论promise对象最后状态如何都会执行
Promise.prototype.finally = function (callback) {
    let P = this.constructor;
    wx.hideNavigationBarLoading()
    return this.then(
        value => P.resolve(callback()).then(() => value),
        reason => P.resolve(callback()).then(() => { throw reason })
    );
};
/**
 * 微信请求get方法
 * url
 * data 以对象的格式传入
 */
function getRequest(url, data) {
    var getRequest = wxPromisify(wx.request);
    wx.showNavigationBarLoading()
    return getRequest({
        url: url,
        method: 'GET',
        data: data,
        header: {
            'Content-Type': 'application/json'
        }
    })
}

/**
 * 微信请求post方法封装
 * url
 * data 以对象的格式传入
 */
function postRequest(url, data) {
    var postRequest = wxPromisify(wx.request)
    wx.showNavigationBarLoading()
    return postRequest({
        url: url,
        method: 'POST',
        data: data,
        header: {
            "content-type": "application/json"
        },
    })
}

module.exports = {
    postRequest: postRequest,
    getRequest: getRequest
}

 下面开始制作第一个页面的样式和整体布局/pages/index/index  界面布局直接上代码

<basics id="basics" style="{{PageCur=='basics'? '':  'display:none;'}}"></basics>
<component id="component" style="{{PageCur=='component'? '':  'display:none;'}}"></component>
<recommend id="about" style="{{PageCur=='about'? '':  'display:none;'}}"></recommend>

<view class="cu-bar tabbar bg-white shadow foot">
  <view class="action" bindtap="NavChange" data-cur="basics" data-name="聊天表情包">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/basics{{PageCur=='basics'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='basics'?'text-green':'text-gray'}}">最新</view>
  </view>
  <view class="action" bindtap="NavChange" data-cur="component" data-name="热门表情包">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/component{{PageCur=='component'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='component'?'text-green':'text-gray'}}">表情包</view>
  </view>
  <!--
  <view class="action" bindtap="NavChange" data-cur="plugin" data-name="我的收藏">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/plugin{{PageCur=='plugin'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='plugin'?'text-green':'text-gray'}}">收藏</view>
  </view>
  -->
  <view class="action" bindtap="NavChange" data-cur="about" data-name="推荐">
    <view class='cuIcon-cu-image'>
      <image src="/images/tabbar/about{{PageCur=='about'?'_cur':''}}.png"></image>
    </view>
    <view class="{{PageCur=='about'?'text-green':'text-gray'}}">推荐</view>
  </view>
</view>

最终呈现的效果是下面这样的，

其中 basics、componet、recommend为组件的形式呈现，下一章会列出。

由于篇幅有限，代码可能列的不是很详细，大家可以参照下面示例中的功能呈现结果来进行优化。小程序中有源码地址，需要的也可以去下载