iKcamp官网:www.ikcamp.com
访问官网更快阅读全部免费分享课程:《iKcamp出品|全网最新|微信小程序|基于最新版1.0开发者工具之初中级培训教程分享》。 包含:文章、视频、源代码
第二章:小程序中级实战教程之预备篇 本文配套视频地址 v.qq.com/x/page/m055…
util公共方法
开始前请把 ch2-2
分支中的 code/
目录导入微信开发工具
本文配套视频地址 v.qq.com/x/page/m055…
开始前请把 ch2-2
分支中的 code/
目录导入微信开发工具
在这一章中,我们会在util目录新建 3 个文件,这些文件分别提供了一些常用的函数,变量,已便我们在不同的页面中使用
├── utils/ │ ├─ config.js│ ├─ index.js│ ├─ mock.js
Step 1. config.js 配置常量
该文件存放了一些 const 常量(如开发环境,默认文案,默认图片等),将这些常量存在 core 这个对象中,最后通过 export default core
将 core 这个对象导出。由于只是存放一些配置常量,此处不再复述:
const env = 'dev';// dev production/** 默认接口出错弹窗文案* @type {string}*/const defaultAlertMessage = '好像哪里出了小问题~ 请再试一次~';/** 默认分享文案* @type {{en: string}}*/const defaultShareText = {en: 'iKcamp英语-学英语口语听力四六级'};/** 小程序默认标题栏文字* @type {string}*/const defaultBarTitle = {en: 'iKcamp英语学习'};/** 文章默认图片* @type {string}*/const defaultImg = {articleImg: 'https://n1image.hjfile.cn/mh/2017/06/07/7e8f7b63dba6fa3849b628c0ce2c2a46.png',coverImg: 'https://n1image.hjfile.cn/mh/2017/06/07/7472c035ad7fe4b8db5d2b20e84f9374.png'};let core = {env: env,defaultBarTitle: defaultBarTitle['en'],defaultImg: defaultImg,defaultAlertMsg: defaultAlertMessage,defaultShareText: defaultShareText['en'],isDev: env === 'dev',isProduction: env === 'production'};export default core;
;
Step 2. mock.js 数据
该文件用来存放一些假数据,方便本地开发调试,如果你有 mock 服务器,当然更好
\r\n\t \r\n\t \r\n\t \r\n\t \r\n\t const list = {data: [{articles: [{contentId: 1177432,cover: "https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg",pubdate: "2017-06-27 00:45:00",title: "Quora精选:为什么聪明人总能保持冷静?"},{contentId: 1176561,cover: "https://n1image.hjfile.cn/mh/2017/06/26/0eb29c4c08e7be93f74ce9ce0fd5a25e.jpg",pubdate: "2017-06-27 00:30:00",title: "与时间有关的英语俚语(四)"},{contentId: 1161967,cover: "http://n1image.hjfile.cn/mh/2017/05/25/5d6ce79848cc81b800959383c35dd081.jpg",pubdate: "2017-06-27 00:15:00",title: "2017.5大学英语六级口语考试真题:看图论述“人与人之间的信任”"},{contentId: 1177828,cover: "https://n1image.hjfile.cn/mh/2017/06/26/c99a6d180367bf1a250d6e7c6c3083c6.jpg",pubdate: "2017-06-27 00:00:01",title: "亚马逊卖衣服有新招!新衣服试穿一周再付钱"}],date: "2017-06-27"},{articles: [{contentId: 1175100,cover: "https://n1image.hjfile.cn/mh/2017/06/23/2490fdbcfc131c0e256546da4a03f1ac.jpg",pubdate: "2017-06-26 00:45:00",title: "双语美文:小时候的自己,真是傻得可爱"},{contentId: 1172434,cover: "https://n1image.hjfile.cn/mh/2017/06/19/57a8ef65ee53f5921657376fd3fe4a75.jpg",pubdate: "2017-06-26 00:30:00",title: "15个和money有关的习语,可别用错了"},{contentId: 1161968,cover: "http://n1image.hjfile.cn/mh/2017/05/25/2260fb0deb74734f5ec5a375423a6b52.jpg",pubdate: "2017-06-26 00:15:00",title: "2017年5月大学英语六级口语考试真题——小组讨论之扶老人是我们的责任吗?"},{contentId: 1161963,cover: "http://n1image.hjfile.cn/mh/2017/05/25/93228c5713545ef328e708ddb73e28a2.jpg",pubdate: "2017-06-26 00:15:00",title: "2017年5月大学英语六级口语考试——优秀领导的特质"}],date: "2017-06-26"},{articles: [{contentId: 1175110,cover: "https://n1image.hjfile.cn/mh/2017/06/23/a5bf85e439696829a937accfd99f0eb7.jpg",pubdate: "2017-06-25 00:45:00",title: "Quora精选:什么样的人注定无法成功?"},{contentId: 1142849,cover: "https://n1image.hjfile.cn/mh/2017/06/22/faf544ccf3e4f9e8da4ee9d5d8fcc635.jpg",pubdate: "2017-06-25 00:30:00",title: "表达雌性动物和雄性动物的不同说法"},{contentId: 1161915,cover: "http://n1image.hjfile.cn/mh/2017/05/25/7778bd5547fa216db57cd87a78bd790d.jpg",pubdate: "2017-06-25 00:15:00",title: "2017年5月大学英语四级口语考试——如何用PPT展现一堂课"},{contentId: 1175101,cover: "https://n1image.hjfile.cn/mh/2017/06/23/045ed76502b0f1ccdaccdae827c17c2c.jpg",pubdate: "2017-06-25 00:00:00",title: "双语美文:总在不经意间,发觉自己渺小"}],date: "2017-06-25"}],message: "success",status: 0,time: null};const detail = {data: {agreeNum: 0,articleImage: "https://n1image.hjfile.cn/mh/2017/06/26/9ffa8c56cfd76cf5159011f4017f022e.jpg",author: "Quora用户",autoSummary: "Why do intelligent people seem calm all the time?为什么聪明人总能保持冷静?\r\n\r\n\t\r\n\r\n\tAnswer from @Domen Grabec来自@Domen Grabec的回答\r\n\r\n\tIf you can solve your problem, then what is the n...",cateId: 0,channelId: 1,commentCount: 2,content: '
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\t
\r\n\r\n\t(翻译:能猫)
\r\n\r\n\t声明:本双语文章的中文翻译系iKcamp英语原创内容,转载请注明出处。中文翻译仅代表译者个人观点,仅供参考。如有不妥之处,欢迎指正。
\r\n',contentId: 1177432,editorName: "能猫",isBest: "Y",langs: "en ",langsCate: 1043,langsParentCate: 1040,lastUpdateTime: "2017-06-27 00:45:00.530",link: "",maxPageNum: 1,newTitle: "",picName: "",reviewFlag: 0,sourceLink: "",sourceName: "Quora",sourceType: 0,sparePic: "",subTitle: "",subjectId: 0,summary: "为什么有些人总是有办法冷静地面对一切?",tags: "智力|职场|学习|双语阅读|励志人生|实用热门|quora|微信热门",title: "Quora精选:为什么聪明人总能保持冷静?",totalView: 112},message: "success",status: 0,time: null};export {detail,list}Step 3. 增加 index.js 主入口文件
index.js
文件中,我们会增加一些公用的函数方法,比如对网络请求封装、开发环境下 log 日志、本地存储等
首先,我们把配置信息 config.js
和假数据 mock.js
引进来,并正常导出
import Promise from '../lib/promise'import config from './config'import * as Mock from './mock'let util = {}export default util
第二行代码:
import Promise from '../lib/promise'
这一段代码的作用是引入一个实现 Promise 的 第三方工具库,这样我们就可以在小程序中使用 Promise 方法来解决 回调地狱
的问题。
注意: 在新版本的小程序中已经支持了原生 Promise 方法
下面我们开始对 util 对象进行公用方法扩展封装: 增加 log 控制台调试功能
如果环境配置为dev环境,则打印参数内容
let util = {isDEV: config.isDev,log(){this.isDEV && console.log(...arguments)}
}
封装 alert 弹出窗口
由于开发环境中,经常需要查看一些对象信息,所以增加了 object 类型解析
let util = {// 此处省略部分代码alert(title = '提示', content = config.defaultAlertMsg) {if ('object' === typeof content){content = this.isDEV && JSON.stringify(content) || config.defaultAlertMsg}wx.showModal({title: title,content: content})}
}
wx.showModal 是微信官方提供的 api 方法,具体用法可 查阅文档
封装本地缓存数据的读取功能
wx.getStorage 文档地址
wx.setStorage 文档地址
let util = {// 此处省略部分代码getStorageData(key, cb) {let self = this;// 将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口wx.getStorage({key: key,success (res) {cb && cb(res.data);}, fail (err) {let msg = err.errMsg || '';if( /getStorage:fail/.test(msg) ) {self.setStorageData(key)}}})},setStorageData(key, value = '', cb) {wx.setStorage({key: key,data: value,success() {cb && cb();}})}
}
上一篇-微信小程序教学第二章:小程序中级实战教程之预备篇 - 项目结构设计 |基于最新版1.0开发者工具
下一篇中,我们会把网络请求封装起来,并增加本地
mock
功能
iKcamp原创新书《移动Web前端高效开发实战》已在亚马逊、京东、当当开售。
相关文章: 听说 2017 你想写前端? 前端开发者指南(2017) 翻译连载 |《你不知道的JS》姊妹篇 | Javascript 轻量级函数式编程 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
iKcamp最新活动
报名地址:www.huodongxing.com/event/54099…
与
“天天练口语”
小程序总榜排名第四、教育类排名第一的研发团队,面对面沟通交流。
2019年,iKcamp原创新书《Koa与Node.js开发实战》已在京东、天猫、亚马逊、当当开售啦!