您当前的位置: 首页 > 解决方案

小程序开发心得

  • 作者: admin
  • 发布于 2018-06-23 13:43:16
  • 来源:  
  • 栏目:解决方案

导语: 在开发微信小程序时,我们可以将小程序中常用的基本配置统一抽离出来放在一个config.js中如下:const SERVER_URL = 'http://www.xxx.com/api';const TEST_SERVER_URL = 'h

 在开发微信小程序时,我们可以将小程序中常用的基本配置统一抽离出来放在一个config.js中如下:

const SERVER_URL = 'http://www.xxx.com/api';
const TEST_SERVER_URL = 'http://test.xxx.com/api';
const CDN_URL = 'http://cdn,xxx.com';
const TEST_CDN_URL = 'http://tcdn.xxx.com';

export CONFIG_PRODUCT = {
    SERVER_URL,
    CDN_URL,
    DEBUG_FLAG:false,
    TEST_FLAG:false,
}

export CONFIG_TEST = {
    SERVER_URL:TEST_SERVER_URL,
    CDN_URL:TEST_CDN_URL,
    DEBUG_FLAG:true,
    TEST_FLAG:false,
}

然后按照开发需求引入这些配置信息(如 控制console.log),在后期方便配置的统一管理和维护。

对网络请求(wx.request)进行二次封装如下例:

import { CONFIG } from './config';
import MD5 from './md5'/** * 定制功能的网络请求方法 * @param options object * @property url string 请求的资源地址,在请求时会自动添加服务器地址。 * @property data object 请求所携带的参数 * @property header object 请求头 * @property success function 请求成功的回调 * @property fail function 请求失败的回调 * @property complete function 请求完成的回调 *  * 功能简介: * 传入与 wx.request 相同的参数,方法内部会对几个重要部分进行功能根据项目需求强化,如在 header  * 中添加验证字段,对 POST 方法时将 header 的 content-type 改为对应参数。对特定的 状态码(400) * ,进行处理。 *  */
export default (options) => {
  const { APP_CONFIG: { SERVER_URL, DEBUG_FLAG,SPEACAL_SERVER_URL } } =   CONFIG;
  if (DEBUG_FLAG) {
      console.group('网络请求');
      console.log(options);
  }
  if (!options.anotherFlag) {
      wx.showLoading({
           title: '正在加载'
      })
  }
  if (options.anotherFlag) {
     let String1 = ''
     const { data:{query,mainData} } = options
     query.time = Math.ceil(Date.now() / 1000);
     const dataKeyArray = Object.keys(query).sort();
     dataKeyArray.forEach((e, i) => {
                                      if (i === 0) {
                                           String1 += `${e}=${query[e]}`;
                                      } else {
                                           String1 += `&${e}=${query[e]}`;
                                      }
                                    })
     const String2 = `${String1}&secret=yoursalt`;
     const token = MD5(String2);
     options.url = `${SPEACAL_SERVER_URL}token=${token}`;
     options.header = modifyHeader(options.header);
     options.header['Content-Type'] = 'application/json';
     options.method = 'POST';
     options.data = mainData;
  } else {
     options.url = `${SERVER_URL}${(options.url) ? '/' + options.url : ''}`;
     options.header = modifyHeader(options.header);
     options.method = 'POST';
  }
   if (typeof options === 'object') {
      const success = options.success;
      const fail = options.fail;
      const complete = options.complete;
      options.success = success ? res => {
        if (DEBUG_FLAG) {
          console.log(res);
          console.groupEnd();
        }
        if (res.flag !== 0 && !options.anotherFlag) {
          fail ? fail(res) : '';
        } else {
          success(res);
        }
     } : null;

    options.fail = fail ? res => {
       if (DEBUG_FLAG) {
         console.log(res);
         console.groupEnd();
       }
         fail(res);
    } : null;

    options.complete = complete ? res => {
       if (DEBUG_FLAG) {
          console.groupEnd();
       }
       if (!options.anotherFlag) {
         wx.hideLoading();
       }
       complete(res);
    } : () => {
      if(!options.anotherFlag){
         wx.hideLoading();
      }
    };
  }
  wx.request(options);
}

const modifyHeader = header => {
    const token = wx.getStorageSync('token');
    if (token) {
       return { ...header, token: `${token}` };
    } else {
       return (header) ? header : {};
    }
};

当然也可以根据个人的开发习惯进行 promise 封装。这样封装的好处也显而易见,方便对所有的 request 进行监控,通用逻辑的修改,方便调试和开发。

在写些小程序的条件动画时,也可以十分方便如下:

// page.wxss
.css-a{
    transform:translate3d(-100%,0,0); // 将 css-a 元素上移全部高度
    transition:all .5s;
}

.css-a.show{
    transform:translage3d(0,0,0); // 将 css-a 元素动画回原位
}

// page.wxml

<view class='css-a {{showFlag ? "show":""}}'>动画DEMO</view>

// page.js

// 触发的动画事件
  onTrigger(){
     this.setData({showFlag:true});
  }

通过绑定点击、触摸事件,就能够实现很多简单的动画,提升人机交互的乐趣。



温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。

  • 微信扫描二维码关注官方微信
  • ▲长按图片识别二维码
关注我们

微信小程序官方微信

栏目最新
栏目推荐
返回顶部