【使用vue开发微信公众号下SPA站点的填坑之旅】的更多相关文章

使用vue开发微信公众号下SPA站点的填坑之旅

原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^_^. 我决定实现如下功能 架构上,实现前后端分离.方便以后前后端的分工 考虑到体验,前端做成SPA站点,也就是单页面应用 需要使用微信的JSSDK 需要有微信支付功能 作为一个偏后端的半专业前端人士,经过一两周的调研和学习后, 我决定使用如下技术 后端使用php搭建接口,本文主要讲前端,不细说 w…

vue开发微信公众号--开发准备

由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上安装微信web开发者工具和花生壳(内网穿透),然后有一个微信公众平台的账号 第一步: 下载安装花生壳,点击内网穿透 然后会在浏览器中打开下面这个界面 这里需要注意的是外网访问地址和内网主机地址. 第二步: 登录微信公众平台后,滚动页面到最下面,点击开发下面的开发者工具. 然后选择公众平台测试账号,会…

Vue开发微信公众号默认背景为灰色

最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调. 使用单纯的CSS没能解决这个问题,在网上查了些资料也没发现特别好的方法,最后还是采用了JS解决这个问题. document.documentElement.style.backgroundColor = "#fff"; this.screenH = window.screen.avail…

用vue开发一个公众号商城SPA——1.前期准备和写页面

使用vue开发公众号商城 第1篇记录项目准备.搭建,写页面遇到第问题以及总结,持续更新 公司最近接了个商城项目,包括PC端商城.微信公众号网页商城.后台管理系统.这几天在做微信公众号商城,又新接触了很多东西. 1.搭建项目 使用vue-cli初始化项目,然后就是写页面,页面通过vue-router组织,未来还会用到vuex来存储一些全局的数据比如用户信息等.项目时间比较紧张,所以没有自己做构建(其实是不会),webpack4出来也有一段时间了,webpack3还没搞明白,惭愧... 2.移动端适…

vue开发微信公众号--地图

在最近开发的微信公众号中,要实现一个打卡功能: 由于个人感觉微信SDK里面的地图不太好用,所以使用了腾讯地图. 在项目中引入腾讯地图 1,需要登录腾讯地图网站,注册一个账户,获得一个key. 2,然后找到项目根目录下面的index.html,引入需要使用到的js <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" c…

微信公众号支付备忘及填坑之路-java

一.背景 最近公司给第三方开发了一个公众号,其中最重要的功能是支付,由于是第一次开发,遇到的坑特别的多,截止我写博客时,支付已经完成,在这里我把遇到的坑记录一下(不涉及退款).不得不吐槽一下,腾讯这么大的公司,写的代码真的烂,变量命名不规范(后来又开发了公众号分享,发现对于同一个变量,两个地方的变量名不同),文档写的垃圾,而且好多时候,有返回的错误码但是文档上没说明,另外线上线下测试极其不方便. 二.参考资料 1.JSAPI支付开发文档:主要是支付开发过程中接口.流程.注意事项.常见问题等: 2…

使用vue开发微信公众号，解决微信缓存

1.页面加入标红的代码,让页面不缓存 <!DOCTYPE html> <html manifest="IGNORE.manifest"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> &l…

vux+vuex+vue+Es6开发微信公众号的坑

初次开发微信公众号遇到很多问题,可能是基础不怎么牢靠,最近几天一直在看vue的东西,现在就来慢慢介绍vux和vue这个骚东西的用法: 细看文档一步步来, npm install vux --save 安装vux这个ui框架, vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置: const vuxLoader = require('vux-loader') const webpackConfig = originalConf…

vue+node.js+webpack开发微信公众号功能填坑——v -for循环

页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox> <yd-flexbox-item>能耗排行</yd-flexbox-item> <yd-flexbox-item>房间号</yd-flexbox-item> <yd-flexbox-item>能耗程度</yd-flexbox-item&g…

vue+node.js+webpack开发微信公众号功能填坑——组件按需引入

初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/docs/#/quickstart app.vue <template> <div id="powerrank"> <yd-flexbox> <yd-flexbox-item><span style="font-size: 16…

Ionic+AngularJS 开发的页面在微信公众号下显示不出来原因查究

ionic 页面 微信浏览器遇到的坑 公司的微信公众号一部分页面是用AngularJS+Ioinc开发,发现在本地浏览器测试的时候都没问题,传到服务器在微信公众号下跑就出问题来,经查是: index-tab页面 406 not accessable http请求头问题 $httpProvider.interceptors.push(function() { return { "request": function(config) { //console.log(config.url);…

Java开发微信公众号（五）---微信开发中如何获取access_token以及缓存access_token

获取access_token是微信api最重要的一个部分,因为调用其他api很多都需要用到access_token.比如自定义菜单接口.客服接口.获取用户信息接口.用户分组接口.群发接口等在请求的时候都需要用到access_token. (一)access_token的介绍 access_token是公众号的全局唯一接口调用凭据,公众号调用各接口时都需使用access_token.开发者需要进行妥善保存.access_token的存储至少要保留512个字符空间.access_token的有效期目…

Java开发微信公众号（四）---微信服务器post消息体的接收及消息的处理

在前几节文章中我们讲述了微信公众号环境的搭建.如何接入微信公众平台.以及微信服务器请求消息,响应消息,事件消息以及工具处理类的封装:接下来我们重点说一下-微信服务器post消息体的接收及消息的处理,这个post方法定义在如何接入微信公众平台的[controller]中. /** * 接收微信消息处理并做分发 * @param request * @param response * @throws Exception */ @RequestMapping(method=RequestMethod.…

Java开发微信公众号（一）---初识微信公众号以及环境搭建

ps:1.开发语言使用Java springMvc+Mybaits+spring maven实现 2.使用微信接口测试账号进行本地测试 https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 3.使用 路由侠 将本地地址映射到外网地址实现微信公众号的本地调试 准备工作: 工欲善其事 必先利其器,想做微信公众号开发,首先要申请一个微信公众号(有兴趣的同学可以去微信申请一个,这里就不赘述了:https://mp.weixin.qq…

Spring Boot 开发微信公众号后台

Hello 各位小伙伴,松哥今天要和大家聊一个有意思的话题,就是使用 Spring Boot 开发微信公众号后台. 很多小伙伴可能注意到松哥的个人网站(http://www.javaboy.org)前一阵子上线了一个公众号内回复口令解锁网站文章的功能,还有之前就有的公众号内回复口令获取超 2TB 免费视频教程的功能(免费视频教程),这两个都是松哥基于 Spring Boot 来做的,最近松哥打算通过一个系列的文章,来向小伙伴们介绍下如何通过 Spring Boot 来开发公众号后台. 1. 缘起…

小机器人自动回复（python，可扩展开发微信公众号的小机器人）

api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h_cent_webapi.jhtml?nav=doc 这是api提供的接口的数据格式,有了这个我们来开发微信公众号的自动回复是很简单的(自己拓展). 代码如下: # coding=utf-8 import json,urllib def zidonghuifu(content): url='http…

PHP开发微信公众号

PHP开发微信公众号:配置和部署服务器及Token认证 https://zhuanlan.zhihu.com/p/28259840…

PHP开发微信公众号（一）二维码的获取

要开发微信公众号,首先进行需要注册一个,然后认证.这就不用多说了. 当然如果没有,也可以去申请一个测试号来使用,地址:https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login 申请成功后,你会得到一个appID 和 appsecret,这个就相当于你的开发者账号和密码. 开发模式如下图: 1.Access_Token的获取 对于这个access_token就是一个访问标识,其实不用想得太高深,它就好比是你进图书馆需要的图书卡:…

Java开发微信公众号（三）---微信服务器请求消息，响应消息，事件消息以及工具处理类的封装

在前面几篇文章我们讲了微信公众号环境的配置 和微信公众号服务的接入,接下来我们来说一下微信服务器请求消息,响应消息以及事件消息的相关内容,首先我们来分析一下消息类型和返回xml格式及实体类的封装. (一)封装请求信息 首先打开微信提供的开发者文档:http://mp.weixin.qq.com/wiki/home/ ,点击左侧的“消息管理”----“接收普通消息”,在右侧我们可以看到微信普通消息类型大致有:文本消息.图片消息.语音消息.视频消息.小视频消息.地理位置消息.链接消息:通过查看开发者…

Java开发微信公众号（二）---开启开发者模式，接入微信公众平台开发

接入微信公众平台开发,开发者需要按照如下步骤完成: 1.填写服务器配置 2.验证服务器地址的有效性 3.依据接口文档实现业务逻辑 资料准备: 1.一个可以访问的外网,即80的访问端口,因为微信公众号接口只支持80接口.(环境配置) 2.申请一个微信公众号测试账号. 3.编写Java基本代码. 验证服务器地址的有效性 开发者提交信息后,微信服务器将发送GET请求到填写的服务器地址URL上,GET请求携带四个参数: 参数 描述 signature 微信加密签名,signature结合了开发者填写的t…

spring-boot-route（二十三）开发微信公众号

在讲微信公众号开发之前,先来大概了解一下微信公众号.微信公众号大体上可以分为服务号和订阅号,订阅号和服务号的区别如下: 服务号可以申请微信支付功能. 服务号只能由企业申请,订阅号可以有企业或个人申请. 订阅号和服务号每月推送消息次数不同,订阅号每天可以推送一次,服务号每月可以推送四次. 服务号推送的消息会出现在用户的聊天列表中,而订阅号推送的消息显示在订阅号文件夹中. 还有一些其他接口功能的区别和限制,总的来说服务号支持更高级的功能开发. 订阅号更加偏向于向用户传递咨询,一般各种技术类公众号都属…

NodeJs 开发微信公众号（五）真实环境部署

在测试环境下开发完成代表着你离正式上线的目标不远了.接下来本章就主要谈一谈把测试环境的公众号升级为正式的公众号. 服务器和域名 目前为止我们只是在自己的电脑上完成了测试环境.真实的线上环境当然需要自己购买服务器和域名了.卤煮买的是阿里云的ecs云服务器,配置是单核1G内存,硬盘是40g.对于卤煮这样自娱自乐的小项目,六十多块钱一个月的服务器都算太贵了.域名的话非常便宜,不过正式的域名需要备案,比较麻烦.卤煮是在某宝上购买的一年的备案域名,虽然名字很丑,但无关紧要,在微信中域名对于用户来说是没有任…

NodeJs 开发微信公众号（四）微信网页授权

微信的网页授权指的是在微信公众号中访问第三方网页时获取用户地理.个人等信息的权限.对于开发了自己的网页app应用时,获取个人的信息非常重要.上篇博客讲到了注册时可以获取用户的信息,很多人会问为什么还需要网页授权这种方式去获取呢,直接从数据库中读取不就可以了吗?这样的做的原因是服务器会话时间终究是有限的,关注后我们设置的会话一般在半个月左右,半个月后就需要重新生成会话,而这时就需要网页授权的openid帮忙了.况且,用户的信息也是会刷新的,虽然这种情况很少发生,但是我们至少应该确保信息是有一定的更…

NodeJs 开发微信公众号（二）测试环境部署

由于卤煮本人是做前端开发的,所以在做公众号过程中基本上没有遇到前端问题,在这方面花的时间是最少的.加上用了mui框架(纯css界面)和自己积累的代码,很快地开发出了界面来.接着是后台开发.卤煮选的是nodejs,作为中小型的项目开发,nodejs是前端开发人员的首选.然后是选了一些开发包,帮助快速上手.express,inspector,mysql等.卤煮不打算做nodejs教程,网上有很多.假设这些你都已经做好了,也就是说首先,你保证你已经有一份写好了的程序,并且通过本地浏览器测试.然后再开始…

用java开发微信公众号：测试公众号与本地测试环境搭建（一）

本文为原创,原始地址为:http://www.cnblogs.com/fengzheng/p/5023678.html 俗话说,工欲善其事,必先利其器.要做微信公众号开发,两样东西不可少,那就是要有一个用来测试的公众号,还有一个用来调式代码的开发环境. 测试公众号 微信公众号有订阅号.服务号.企业号,在注册的时候看到这样的信息,只有订阅号可以个人申请,服务号和企业号要有企业资质才可以.这里所说的微信公众号开发指的是订阅号和服务号. 另外,未认证的个人订阅号有一些接口是没有权限的,并且目前个人订阅…

C#开发微信公众号-学习笔记

由于最近要做微信服务号的开发,所以开始找相关说明和接口文档开始学,故把学习过程及注意事项记录一下,帮助想学习的快速上手.废话不多少了,直接上干货! 1.申请微信公众号 这个就不需要多说了吧,大家直接照着提示步骤走就行 2.建立服务器和微信端的链接 这一步的操作其实就是确认一下你的公众号跟你的服务器匹配成功了,所要做的工作其实很简单,就是微信会给你的服务器发一个请求,传过去几个参数,然后你把其中的timestamp,nonce参数获取到,在把你在微信设置服务器的页面填写的token这三个值按字典排…

Node.js+Koa开发微信公众号个人笔记（一）准备工作

本人也是在学习过程中,所以文章只作为学习笔记,如果能帮到你,那就更好啦~当然也难免会有错误,请不吝指出~ 一.准备工作 1.本人学习教程:慕课网Scott老师的<Node.js七天搞定微信公众号> ,但是有点小贵,经济条件允许的话可以支持一下. 2.文档:微信开发官方文档,必备.https://mp.weixin.qq.com/wiki 3.微信开发测试号:测试公众号,必备.https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/log…

flask开发微信公众号

1.进入微信公众号首页,进行注册登录 https://mp.weixin.qq.com/ 2.进入个人首页,进行公众号设置 可参照 公众号文档 进行开发 开发前 先阅读 接口权限列表 3.配置服务器 服务器地址(URL) 令牌(Token) import hashlib @app.route('/wx',methods=['GET','POST']) def wx(): if request.method == 'GET': signature = request.args.get('signa…

Python+Tornado开发微信公众号

本文已同步到专业技术网站 www.sufaith.com, 该网站专注于前后端开发技术与经验分享, 包含Web开发.Nodejs.Python.Linux.IT资讯等板块. 本教程针对的是已掌握Python语言基本用法并且掌握其任一Web框架的用户. 本教程使用的Python版本为3.5.0, Web框架为Tornado, IDE开发工具为PyCharm,整个开发过程是在Windows环境下测试开发,最终上线部署至centos服务器. 备注: (1) 如果您是python小白,建议参考 Pyth…

ASP.NET CORE 开发微信公众号（一、测试号管理）

一.注册账号 百度微信公众平台,点击进入. 二.公众平台测试账号 点击进入平台后居然是小程序,我也很费解.以前是找到开发->开发者工具->公众平台测试账号,现在毛都没有了. 不过可以点击这里调转. 点击这里进入. 三.进入公众平台. 这里好像要微信扫码登录. 上面的接口配置信息是给接口服务器端使用,下面的JS接口安全域名是给前端调用. 这里的坑还是多,而且官方文档含糊其辞,这点差评. 首先就是为何要有这个域名.说的直白一点,就是你要想和微信第三方接口通讯,必须要有一个能被外网访问的接口暴露出去…