一.序 上一篇介绍了如何从零开发微信小程序,博客园审核变智障了,每次代码都不算篇幅,好好滴一篇原创,不到3分钟从首页移出来了.这篇介绍一下组件封装和我的踩坑历程. 二.封装微信小程序可复用组件 首先模块化的思想是通用的,在这不做过多解释了.直接上代码,然后解释代码: // wxml <view class="c-menu"> <view wx:for="{{menuList}}" wx:key="{{item}}" class=

基于小程序请求接口 wx.request 封装的类 axios 请求 Introduction wx.request 的配置.axios 的调用方式 源码戳我 feature 支持 wx.request 所有配置项 支持 axios 调用方式 支持 自定义 baseUrl 支持 自定义响应状态码对应 resolve 或 reject 状态 支持 对响应(resolve/reject)分别做统一的额外处理 支持 转换请求数据和响应数据 支持 请求缓存(内存或本地缓存),可设置缓存标记.过期时间 u

微信小程序:封装全局的promise异步调用方法 一:封装 function POST(url, params) { let promise = new Promise(function (resolve, reject) { wx.request({ url: url, data: params, method: 'POST', success: function (res) { resolve(res.data); } }) }); return promise } 二:调用 const n

微信小程序请求数据,在页面展示,可以在onLoad生命周期中进行请求. 1.新建目录http,新建文件http.js 2.在js文件中暴露需要使用的变量 var baseUrl = 'http://101.89.144.168'; export const httpUrl = { "getContentList": baseUrl + "/api/portals/content/getContentsList", "contentType": &

微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用,于是乎,看了官方文档,自己封装一个组件. 我是谁 直接上主题 在根目录下创建components文件夹 在components下开始创建自己的组件 效果图如下: 由于我使用的是flex布局,所以 我从哪里来 # wxml <view class="images-box"> &l

下面将封装http请求服务部分的服务以及引用部分 // 本服务用于封装请求 // 返回的是一个promisepromise var sendRrquest = function (url, method, data, header) { var promise = new Promise(function (resolve, reject) { wx.request({ url: url, data: data, method: method, header: header, success:

最近做小程序在调用后台接口的时候感觉总写很长一串,很冗杂.非常想念vue中promise封装的写法,于是自己初步封装了一下. 1.url 接口地址 2.headers请求头 3. params 请求参数 4.host 服务端地址 POST: export function httpPost(url, params,params,) { let promise = new Promise((resolve, reject) => { wx.request({ url: host + url, he

在我们做小程序时,数据请求数据请求是避免不了的,然而我们用官方自带的请求方式,会给我们带来很多重复的工作,所以我就借鉴大神们的博客,写了一个简单的请求方式. 1.首先我们在utils中新建一个api.js文件,将一下代码粘贴进去: const host ='http://localhost:8081/activity/web/loginFrom/';//这个是你们的接口域名 const api = { getClickNum: host +'reading'//接口进行拼接 } module.e

相信大家在做微信小程序的时候会有很多地方需要调用接口,就和pc以及手机端一样,多个页面多次调用会有很多状态,那为了节省大家的开发时间就会需要给请求的接口做一些简单封装,便于开发,在这里我用了两个js,一个js封装的是方法名,另外一个是接口名,统一管理 下面这个是统一的接口方法封装 const baseURL = "接口名"; const request = params => { const token = wx.getStorageSync("token")

目录 1,前言 2,代码实现 3,使用 3.1,初始化 3.2,发送消息 3.3,接收消息 1,前言 最近在做IOT的项目,里面有个小程序要用到webSocket,借这个机会,封装了一个uniapp小程序适用的Socket类,具体实现如下. 2,代码实现 class webSocketClass { constructor(url, interval) { this.url = url this.data = null this.isCreate = false // WebSocket 是否创

废话引言 小程序虽然出世很久了,但一直没怎么接触到小程序开发.吉他兴趣班老师想弄一个小程序发布课程信息和打卡功能,作为IT一员就自愿加入了这个小程序开发小组中.虽然小程序面向的是前端工程师,但作为移动端程序猿感觉甚是友好,加上有点前端基础就更是觉得入手很easy啦. 微信小程序的网络请求很便捷,直接调用就可以了.但最好还是根据需求,处理一些参数回调信息,进行二次封装,为整个小程序应用直接提供调方法接口岂不是更好? 利用网络请求的一贯思维,分三个回调:onStart:开始请求, onSuccess

一.问题描述: 在小程序的项目中,封装公共的饼图组件,并在需要的页面引入使用.要求一个页面中有多个饼图,动态渲染不同的数据. 二.效果实现: 1. 查看——小程序使用Echarts的方式 2. 封装饼图公共组件 // pie.wxml <view class="containers"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }

本人在前面的微信小程序开发<二>中提到要想在服务端保持状态需要在客户端第一次请求服务器的时候给客户端返回一个sessionid,由客户端在本地保存,下次请求的时候在header里面带上这个sessionid,写到cookie字段里.但是最近发现请求时哪怕每次在header里带上sessionid还是不能拿到同一个session,百度后终于发现坑了(也不知道微信为啥要这么做),原来微信对wx.request这个API做了修改,小程序发起的请求并不是直接请求我们的后台服务器,而是先通过微信的服务器

习惯性使用console.log打印获取到的数据,信息等,然后上星期大佬看见了说怎么那么多打印信息出来,线上那个也是吗?问我能不能线上的就不打印出来? 我就说那就封装一个打印函数呗. 重写一个没问题,问题是之前写了那么多,都不知道写去哪儿了,不想找,所以决定重写console.log算了. //重写console.log方法,判断是否开启日志调试模式,否则就不输出 console.log = (function(oriLogFunc){ return function(str){ if (Con

微信小程序开发,请求服务器API的方法使用的是微信官方提供的wx.request()方法.在开发中发现,每一个请求都会生成一个独立的PHPSESSID,如下图示: 搜索后得知,这是由于wx.request()造成的.如果直接使用浏览器请求并不会出现这种情况. 解决方式如下: 通过登录接口获取到用户的session_key 和 open_id,设置session信息如下: $3rd_session = md5(session_key . $open_id) $_SESSION[$3rd_sessi

1.创建和pages 同级的component目录新建一个myToast目录 例如: 2.myToast.wxml文件内容: <!-- 自定义toast组件 --> <!-- name 模块名称 --> <template name="toast" > <!-- catchtouchmove='xxx' 遮罩层的滚动穿透 --> <!-- isHide 显示消失 --> <view class="toast_c

<?php /** * Created by PhpStorm. * User: yangs * Date: 2019/4/26 * Time: 14:28 */ class WeixinPay { protected $appid; protected $mch_id; protected $key; protected $openid; protected $out_trade_no; protected $body; protected $total_fee; function __con

微信小程序使用wx.request API请求豆瓣公开api的时候,会报一个403(Forbidden)的错误.这是为什么呢?是由于来自小程序的调用过多,豆瓣来自于小程序的调用被禁止.这里收集以下三种方法解决此问题(设置代理): 1.使用 https://douban.uieee.com 2.使用 https://www.zhihu.com/question/265806694/answer/302894881 以上两种方法均是设置代理请求豆瓣API数据. 使用方法:把 https://www.

封装一个弹窗组件 1.新建component文件夹存放我们的组件,里边存放的就是我们所用的组件,我们今天要做的事弹出框,新建文件夹popup存放我们的组件模板,点击右键选择新建component,就会自动生成组件的模板wxss.wxml.json.js,如图: 2.我们可以写一些组件样式和布局,跟页面写法类似,我就不多说了,直接把代码贴出 : popup.wxml <view class="wx-popup" hidden="{{flag}}"> <

// 在utils-->base.js中,封装一个Base类,有一个axios方法 class Base{ constructor(){ } axios(method,url,data){ console.log("调用到了axios") let method = method || "POST"; // 不传默认为POST方式 let rootUrl ="https://api.ichongwujia.com/pet-api/"; let

http.js import utils from "../../utils/utils" var http = utils.http; const douban = "https://douban.uieee.com/v2/movie/"; onLoad:function(options){ var self = this; var count = "?start=0&count=3"; var inTheaters = douban+