摘要:本文将带你了解微信小程序开发心得,希望本文对大家学微信有所帮助。
以下是我最近开发的一些心得和技巧:在开发微信小程序时,我们可以将小程序中常用的基本配置统一抽离出来放在一个config.js中如下:const SERVER_URL = '//www.xxx.com/api';
const TEST_SERVER_URL = '//test.xxx.com/api';
const CDN_URL = '//cdn,xxx.com';
const TEST_CDN_URL = '//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});
}通过绑定点击、触摸事件,就能够实现很多简单的动画,提升人机交互的乐趣。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号