mpvue——API请求封装(小程序原生)

前言能用,但不是最好的方法,最好的还是fly,因为为了以后多平台的考虑,最好使用fly.js,做之前先关闭校验合法域名,因为我没在后台进行配置后台进行配置合法域名,按着官方给的配置就OK了,这里就不写了,因为只是个测试,用的都是测试的appid https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html 目录结构 fly.js位于src下的utils目录下,最后在main.js引入封装这就…

小程序开发总结一：mpvue框架及与小程序原生的混搭开发

mpvue-native:小程序原生和mpvue代码共存问题描述 mpvue和wepy等框架是在小程序出来一段时间之后才开始有的,所以会出现的问题有:需要兼容已有的老项目,有些场景对小程序的兼容要求特别高的时候需要用原生的方式开发解决思路 mpvue的入口文件导入旧版路由配置文件公共样式字体图标迁移 app.wxss -> app.vue中less(mpvue的公共样式) 旧项目导入旧项目(native)拷贝到dist打包的根目录这个要注意的就是拷贝的旧项目不能覆盖mpvue打包文件…

记一次用mpvue框架搭建的小程序

介绍 mpvue (github 地址请参见)是一个使用 Vue.js 开发小程序的前端框架.框架基于 Vue.js 核心,mpvue 修改了Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js开发体验. 总之就是用vue的开发方法来开发小程序,对没使用过小程序,但是会用vue的开发者来说十分友好创建项目就按照官网上这几行代码,就可以创建一个mpvue项目了.下载开发者工具,导入项目,填入appid,一个mpvue…

taro 微信小程序原生作用域获取

在 Taro 的页面和组件类中,this 指向的是 Taro页面或组件实例. 但是一般我们需要获取 Taro的页面和组件所对应的小程序原生页面和组件实例,这个时候我们可以通过 this.$scope 就能访问到它们. 所以当调用一些 API 需要传入小程序的页面或组件实例时,可以直接传入 this.$scope,例如 Taro.createCanvasContext(canvasId, this) 这个 API,第二个参数就是自定义组件实例 this,在 Taro 中就可以如下使用: Ta…

利用WordPress REST API 开发微信小程序从入门到放弃

自从我发布并开源WordPress版微信小程序以来,很多WordPress网站的站长问有关程序开发的问题,其实在文章:<用微信小程序连接WordPress网站>讲述过一些基本的要点,不过仍然有不少人对一些细节不明白,于是我就想着再写一篇比较全面而基础的教程,主要针对入门级别用户,高手就不用看了. WordPress版“守望轩”微信小程序开放源码地址:https://github.com/iamxjb/winxin-app-watch-life.net 至于标题,请原谅我,我标题党了. Word…

微信小程序开发——修改小程序原生checkbox、radio默认样式

复选框: 闲话少说,这里直接介绍如何修改小程序提供的复选框的样式,如原生的是这样的: 需要的是这样的: 示例代码: /*复选框外框样式*/ checkbox .wx-checkbox-input { width: 40rpx; height: 40rpx; border: 4rpx solid #999; border-radius: 100%; } /*复选框外框选中样式*/ checkbox .wx-checkbox-input.wx-checkbox-input-checked { bor…

使用api获取数据————小程序

使用api获取数据----小程序 onLoad: function (options) { //打开页面即执行. let that = this; wx.request({ //建立链接 url: 'http://web.juhe.cn:8080/constellation/getAll', //api获取的地址 data: { consName: "巨蟹座", //给api传输的数据 type: "today", //给api传输的数据 key: app.glob…

微信小程序原生开发简介

简介: 总结: 1. 逻辑层使用js引擎,视图层使用webview渲染 2. 微信小程序已经支持了绝大部分的 ES6 API 3. 可以自动补全css的兼容语法文档:https://developers.weixin.qq.com/miniprogram/dev/framework/details.html 一. 设计总结: 设计图750px, 1px = 1rpx,方便计算二. 小程序页面结构 wxml: 功能类似html,描述节点,但小程序的 WXML 用的标签是 view, but…

[微信小程序] 微信小程序获取用户定位信息并加载对应城市信息，wx.getLocation，腾讯地图小程序api，微信小程序经纬度逆解析地理信息

因为需要在小程序加个定位并加载对应城市信息然而小程序自带api目前只能获取经纬度不能逆解析,虽然自己解析方式,但是同时也要调用地图,难道用户每次进小程序还要强行打开地图选择地址才定位吗?多麻烦也不利于用户体验我就不多说什么了,直接上代码微信小程序获取用户定位信息并加载对应城市信息 wx.getLocation 腾讯地图小程序api 微信小程序经纬度逆解析地理信息 1 //加载腾讯位置服务js文件(必须) var qqmap=require('../../utils/qq…

小程序原生js获取用户权限

1.首先要有一个按钮 <view name="authorizemodal"> <view class="drawer_screen" wx:if="{{isauthorizeModal}}"> <view class="drawer_box fishqccenter phonechoosebox"> <view> <image style="width:90%;…

[转载]使用mpvue搭建一个初始小程序

1. 初始化一个 mpvue 项目现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装. 然后打开命令行工具: # 1. 先检查下 Node.js 是否安装成功 $ node -v v8.9.0 $ npm -v 5.6.0 # 2. 由于众所周知的原因,可以考虑切换源为 taobao 源 $ npm set registry https://registry.npm.taobao.org/ # 3. 全局安装 vue-cli # 一般是要 sudo…

使用mpvue搭建一个初始小程序

request-promise post请求微信小程序云函数调用http

微信小程序不支持http调用,但是可以通过服务器或者云函数实现,云函数相当于云服务器中的一段代码,可以使用http协议首先要云函数安装request-promise,右键云函数,在终端中打开,输入npm install --save request-promise,前提是电脑安装过node.js并配置好环境变量,因为云函数是基于node调用api 然后粘贴云端代码 const cloud = require('wx-server-sdk') // var request = require('…

mpvue 生成字节跳动小程序的问题！！

初始化项目文件 $ vue init mpvue/mpvue-quickstart fuck $ cd fuck $ npm install 这个时候就初始化好了,接下来 $ npm run dev:tt 生成字节跳动的小程序项目,就是 'dist/tt/' 目录. 运行字节跳动开发者工具打开字节跳动开发者工具,导入上一步生成的目录,等待编译,结果会发现: 报错了,我把报错文本拷贝出来: Error: Unable to determine project type, microApp nee…

微信小程序带cookie的request请求代码封装(小程序使用session)

微信小程序带cookie的request请求可,以使服务端知道是同一个客户端请求. session_id会不变,从而很好的使用服务端的session. 写一个工具函数,直接导入使用即可,接口同 wx.request .会自动设置和更新 cookie. const request = function (obj) { //设置cookie缓存 if(obj.fail){ obj.fail = function(err){ wx.setStorageSync('cookie', err.header…

小程序-promise封装小程序的请求方法

// 在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…

微信小程序原生框架（分享方法封装）

封装的分享方法 function share(o,isDebug = false ) { //路径 let url = o.url || getCurrentPages()[getCurrentPages().length - 1].route; //当前路径所带参数 let urlParams = getCurrentPages()[getCurrentPages().length - 1].options; isDebug&&console.log(`当前路径所带参数:${JSON.s…

promise封装小程序的请求类（request，清爽易懂）

话不多说直接上代码,清爽易懂: import { config } from '../config.js' const tips = { 1:'抱歉出现了一个错误', 2:'网络错误', 1005:'错误1', 1006:'错误2', } class HTTP { request(params) { if (!params.method) { params.method = 'GET' } wx.request({ url: config.api_base_url + params.url, m…

超简单 Promise封装小程序ajax 超好用以及封装登录

//网络类 //封装网络请求 const ajax = (ajaxData, method) => { wx.showLoading({ title: '加载中', mask: true }); console.log('use ajax', ajaxData.url) return new Promise((resolve, reject) => wx.request({ url: ajaxData.url, method: method || 'GET', data: ajaxData.d…

uniapp封装小程序雷达图组件实现

效果图: view <canvas id="radar-canvas" class="radar-canvas" type="2d"></canvas> style .radar-canvas width 550rpx height 550rpx margin 0 auto script <script> import { toRpx } from "@/utils/common" cons…

promise封装小程序的蓝牙类

// pages/bluetooth/bluetooth.js import { BluetoothMode } from '../../models/bluetooth.js' import {System} from '../../models/system.js' const bluetooth = new BluetoothMode() const system = new System() Page({ /** * 页面的初始数据 */ data: { devicesData: [],…

微信小程序原生代码转wepy 字符串处理

import globimport os cwd = os.getcwd()sep = os.septarget = cwd + sep + 'pages' + sep + '*' + sep + '*'filelist = glob.glob(target)pageNameSet = set([i.split('\\')[1] for i in glob.glob('./pages/*/*')])pageStrDicList = {}for i in pageNameSet: pageStrD…

小程序api请求层封装（Loading全局配置）

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

全栈之路-杂篇-前端Http请求封装优化

在项目开发过程中,代码的封装是很有必要的,我觉得这是程序员进阶的一个重要的技能,不会封装代码,你的代码看起来乱的一批,基本上不能维护,像一次性塑料袋一样,用完一次就失去了价值,这同时也会无缘无故的增加项目的总体的代码量,重复代码的不断叠加,谁也是这么一步一步走过来的,但是我要学着去改变,主要是学习这其中的思想,从一个简单的http请求的处理来看看如何进行代码的封装,让你的代码优雅. 一.烂透了的代码简单说一下,这个场景是什么,就是从服务器请求接口,将数据展示到页面上,很简单,也是最常用的,最基…

小程序封装request请求，统一API

程序开发中都会调用后端工程师开发的API,小程序的开发文档提供了相对实用的APIwx.request(),但是在开发的过程中,又遇到了一些问题,在小程序的项目开发时,调用的API不止一个,同一个API调用不止一次.同时,对于调用的API的管理也十分复杂,这样的背景下,对wx.request()方法的封装变得尤为重要. 本文的解决思路为:将API的路径和方法放在一个文件里面方便管理;封装小程序的request方法,并返回promise处理(ES6). 一.units文件夹中新建request.js…

原生开发小程序和 wepy 、 mpvue 对比

1.三者的开发文档以及介绍: 原生开发小程序文档:点此进入 wepy 开发文档:点此进入 mpvue 开发文档:点此进入 2.三者的简单对比: 以下用一张图来简单概括三者的区别: 小程序支持的是 WXML + WXSS + JS 这样的组合,所以,wepy 和 mpvue 都是将文件构建到 dist 目录,转换为小程序支持的文件类型,然后将微信开发者工具指向 dist 目录下,进行调试开发,并且两者都提供了热更新. 3.开发中,该选择哪种开发方式: 1.开发方式上: 原生开发: 开发者需要全新学…

小程序开发：用原生还是选框架（wepy/mpvue/uni-app/taro）？

小程序开发:用原生还是选框架(wepy/mpvue/uni-app/taro)? 自 2017-1-9微信小程序诞生以来,历经2年多的迭代升级,已有数百万小程序上线,成为继Web.iOS.Android之后,第四大主流开发技术. 与之相随,小程序的开发生态也在蓬勃发展,从最初的微信原生开发,到wepy.mpvue.taro.uni-app等框架依次出现,从刀耕火种演进为现代化开发,生态越来越丰富. 选择多了,问题也就来了,开发小程序,该用原生还是选择三方框架? 首先,微信原生开发的槽点大多集中如…