前言 小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子 请求封装 小程序中有封装好的请求方法:wx.request(url,method,header,success,fail,complete);方法类似于原生的ajax, 这里我们大的方面分两种,一种普通请求,一种是文件上传 普通请求又分为get请求,post请求,post请求又分为JSON格式和BODY格式因此 我们需要

微信小程序设置全局css,需要在app.wxss文件中设置page的样式 page { font-family:"PingFangSC-Thin"; font-size:32rpx; /*微信小程序中,使用rpx做单位*/ }

微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了部分常用配置选项的 app.json : { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitle

全局配置 app.json 文件用来对微信小程序进行全局配置. 一.配置页面路径 二.window 配置全局默认的窗口 navigationBarTextStyle:导航栏的标题颜色 navigationBarTitleText:导航栏的文字 navigationBarBackgroundColor:导航栏的背景颜色: backgroundColor:窗口的背景色 三.tabar 导航条 color:HexColor 必填 导航条的默认颜色selectedColor:HexColor 必填 文字

简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在每一个地方都用request的话,那会有很多代码是冗余的,于是就准备自己封装一个,下面就记录一下封装过程.注释也写在下面的代码里了. 实现的结果 代码要简洁 无需每个页面引入一次 Promise化,避免回调地狱 封装代码 //src/utils/net.js import wx from 'wx';

公司突然要开放微信小程序,持续蒙蔽的我还不知道小程序是个什么玩意. 于是上网查了一下,就开始着手开发..... 首先开发客户端的东西,都有个共同点,那就是  数据请求! 看了下小程序的请求方式大概和ajax请求差不多,所以先打好基础 从封装http请求开始 好了废话不多说了,上代码 首先....当然是建立配置文件,用来配置请求根路径 config.js export default { basePath: 'http://192.168.6.2:9002/api', fileBasePath:

最近看了一下微信小程序,大致翻了一下,发现跟angular很相似的,但是比angular简单的很多具体可参考官方文档 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t=2017112 下面将封装http请求服务部分的服务以及引用部分 // 本服务用于封装请求 // 返回的是一个promisepromise var sendRrquest = function (url, method, data

本文针对官方文档未说明清楚的进行详细探索研究,官方文档详见:全局配置 . pages: 删除页面,需要先删除app.json中pages对应页面的路径,再去删除页面相关的所有文件,不然会出现页面文件混乱. window: 用于设置小程序的状态栏.导航条.标题.窗口背景色: 属性 描述 表现 navigationBarBackgroundColor 导航栏背景颜色,如 #000000 navigationBarTextStyle 导航栏标题颜色,仅支持 black / white navigati

在utils文件夹新建文件utils.js,封装代码如下: 小程序升级后内部不自带Promise方法,需外部引入Promise方法   var sendRequest = function (url, method, data = {}, header = {} )     {     var promise = new Promise(function (resolve, reject){         wx.request({           url: url,           d

@ 目录 一,让我们看一下项目目录 二,让我们熟悉一下这三个文件目的(文件名你看着办) 三,页面js中如何使用 今天的API的封装,我们拿WX小程序开发中,对它的API (wx.request)对这个进行一个二次封装.传统的小程序的网络请求,在我们的请求需求过多的时候,就会显得杂乱,和难维护.带着一开时难,后来维护爽的态度让我们来给他封装一下. 让我们开始 一,让我们看一下项目目录 让我们建立一个api的文件夹,来存放我们的封装逻辑,文件夹中建立三个JS文件 二,让我们熟悉一下这三个文件目的(文

app.js: App({ //设置全局请求URL globalData:{ URL: 'https://www.oyhdo.com', }, /** * 封装wx.request请求 * method: 请求方式 * url: 请求地址 * data: 要传递的参数 * callback: 请求成功回调函数 * errFun: 请求失败回调函数 **/ wxRequest(method, url, data, callback, errFun) { wx.request({ url: url,

下载es6-promise.js置于根目录下的libs文件夹下: 在根目录utils文件夹下新建httpsPromisify.js,即定义封装请求的方法 var Promise = require('../libs/es6-promise.min') function httpsPromisify(fn) { return function (obj = {}) { return new Promise((resolve, reject) => { obj.success = function

1/ 公共文件util添加 request请求 //简单封装请求 function request(params, path, isShowLoading = true, goBack = false, type = 'none', obj={}) { try { console.log(path) let NowTime = Date.parse(; let defaultParams = { platform: app.globalData.platform, appVersion: app

首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名 官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 例如,我们封装的组件名为 **wxzx-loadmore wxzx-loadmore.wxml <view hidden="{{response.length < 1}}"> <view class

更新日期: 2019/3/8:首次发布 2019/3/12:增加loadOpacity透明度控制,默认0.5. 以及修改居中方式 Loading 参数: 1. type:loading(必需参数) 2. isLoading: 是否显示加载 3. loadColor:加载边框颜色 4. loadText:加载文字(默认加载中) 5. loadLogo:加载logo(默认logo.gif) 6. loadOpacity:默认0.5 - 2019/3/12 点击下载:loading

loading:提示框: 效果: loading和toast和像,只不过 toast 是设置结束时间,时间到了去触发bindchange事件,进行隐藏. 但是 loading 是没有办法设置事件让其隐藏的,需要手动进行设置. 代码: <loading hidden="{{onOff}}">默认</loading> 例如:设置定时器模拟,进行隐藏 setTimeout(function(){ this.setData({onOff:true}); },2000);

在开发的过程中,总会遇到很多可复用性的样式,为了代码更加的简洁和减少微不住道的文件体积,我抽取了一部分的公共样式,并全局引入,不知是否妥当,如有更好的想法,欢迎一起探讨 在app.wxss中引入 然后你在其他的页面直接用class名就可以了.

funtion的封装 utils =>http.js var tips = { 1: "没有网络", 999: "无效的请求", 5000: "没有这些电影" } function http(params) { /*params 对象包含 url,success,method,data */ if(!params.method){ params.method ="GET"; } wx.request({ url:para

全局变量app.globalData 本地缓存wx.setStorageSync(KEY,DATA)wx.getStorageSync(KEY)wx.getStorageInfoSyncwx.removeStorageSync(KEY)wx.clearStorageSync() 通过key-value的方式存储数据 其实两者差不多,都可以保存长久的数据. app.globalData 是全局变量,下次进入的时候,就要重新获取. storage 更像是本地的数据库,可以保存更久. app.glob

var app = getApp(); function request(url,postData,doSuccess,doFail,doComplete){ var host = getApp().conf.host; wx.request({ url: host+url, data:postData, method: 'POST', success: function(res){ if(typeof doSuccess == "function"){ doSuccess(res);

配置如下设置   /** * 组件的一些选项 */ options: { addGlobalClass: true },