Vue开发微信公众号
关注
分享
扫一扫
在微信公众号web开发时总会遇到一些效率问题，因此采用vue SPA的开发模式，但是经常会遇到调用微信的一些接口和相关权限问题，很困扰，本博文是经过一个vue结合微信sdk开发的项目总结而来，权当提供一个思路，请作为参考，涉及代码质量和表述逻辑问题请大家忽略.
Museions
带着目的去思考！预谋即将发生的事情！
展开
-
自带光环（vConsole）！移动端F12调试工具
iPhone IOS和安卓Android网页调试工具，模拟F12调试工具-微信开源调试工具vConsole，针对html统一的调试工具，方便好用快速上手，以下是使用方式：1.普通引入使用方式<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>vConsole</title></head><body> <原创 2020-05-25 09:37:26 · 888 阅读 · 0 评论 -
移动端WEB网页开发之webview-开发必读
微信小程序web-view网页开发：一.开发准备小程序帐号（需审核认证通过） 微信公众号（需审核认证通过） 小程序配置好白名单，可信域名等 公众号做同样配置白名单，可信域名防止授权错误 一台服务器或者使用内网穿透将本机ip映射成域名解析二.微信SDK授权服务端把微信公众号的appId和secret作为授权依据来配合小程序开发 小程序内web-view授权调用可信域名下的网页地址生成签名也就是当前的url-包含完整地址 调用微信sdk API之前务必保证签名无误：：如有签名问题，原创 2020-05-22 12:25:52 · 654 阅读 · 0 评论 -
vue cli引入微信sdk,完成微信接口调用——引入微信sdk（一）
导：为确保能够正常的引入微信sdk，准备工作一定要做好！准备：1.vue cli项目准备，这个是前提条件。在初始化vue项目后务必要将项目启动，项目依赖正常下载安装2.假设已经可以启动vue项目了，接下来是下载 微信 sdknpm install weixin-js-sdk --save3.下载完成后需要引入到项目中我的做法是全局引入微信sdk并且挂载到vue原型上。以下是实现之前过程的代码：vu...原创 2018-03-19 18:35:31 · 4390 阅读 · 3 评论 -
vue cli引入微信sdk,完成微信接口调用——配置公众平台测试帐号（二）
导：接一，在完成了将微信sdk挂载到vue原型上后代码暂且放下。开始对微信公众号开始做准备了。当然本篇的步骤你也可以放在第一步完成，也可以与第一步同时进行，基本没有什么影响。开发注意事项-关于微信开发文档的使用：1.注意申请微信公众号，这里最好申请一个企业公众号并且认证，在开发者工具中找到 公众平台测试帐号 链接，使用微信管理员验证登录。2.在测试号之内还需要做两件事情，第一：设置安全域名，第二：...原创 2018-03-19 18:35:48 · 1614 阅读 · 0 评论 -
vue cli引入微信sdk,完成微信接口调用——使用natapp配置本机ip映射（三）
现在开始设置js接口安全域名！本章节也是非常重要的，安全域名如果可以正常的配置好的话，那么接下来的过程就会很顺利！好了开始配置js安全域名：1.首先需要一个内网穿透的网络配置，笔者使用的是natapp 可以注册使用他的免费隧道来做本地ip映射，从而完成域名绑定设置。2。在网页上面注册设置好ip与端口后，记得复制他提供的token的token下载他的客户端并且使用管理员身份运行。以下...原创 2018-03-19 18:35:57 · 2900 阅读 · 5 评论 -
vue cli引入微信sdk,完成微信接口调用——配置开发环境访问限制（四）
vue cli的单页项目很可能是无法直接代理就能够访问到，例如使用域名访问项目时报不合法的主机头，但是修改一个配置就可以使用ip映射访问了！笔者是使用的webpack2.xx，在项目初始化时，根目录中有一个文件夹，找到build/webpack.dev.conf.jsdevServer: { clientLogLevel: 'warning', historyApiFallback: ...原创 2018-03-19 18:36:07 · 1602 阅读 · 0 评论 -
vue cli引入微信sdk,完成微信接口调用——模块化复用封装微信sdk（五）
完成了上述几个步骤之后呢，现在回到项目代码中。因为是VUE SPA，所以需要单独写一个模块，是关于调用微信sdk和初始化微信sdk配置的模块。以下是代码，因为微信配置代码太长了，所以稍微做了一下封装：然后在任意页面都可以使用微信对象来调用相关接口了。如有需要请留言邮箱地址.... 如果没及时回复又急需的话请花费1分直接下载这个资源吧，上传资源分最少得选择1分，还请谅解。地址 ht...原创 2018-03-19 18:36:17 · 1871 阅读 · 31 评论 -
vue cli引入微信sdk,完成微信接口调用——获取微信access_token和jsapi_ticket（六）
本章节：在webapp入口页面完成微信access_token和jsapi_ticket初始化。然后就可以在任意页面去签名注入微信配置中。 created(){ this.getAccessToken(Bus.appid,Bus.secret); }, methods:{ getAccessToken(appid,secret){ this.$http.g...原创 2018-03-19 18:36:30 · 2872 阅读 · 0 评论 -
vue cli引入微信sdk,完成微信接口调用——初始化签名调用微信接口（七）
当应用有了access_token和jsapi_ticket后，在任意需要调用微信接口的页面实现签名逻辑。来初始化微信接口调用。代码如下：getSignature(){ //初始化签名 var url = location.href.split('#')[0]; this.$http.post('weixin/getsign',{jsapi_ticket:Bus.jsapi...原创 2018-03-19 18:36:44 · 2211 阅读 · 0 评论 -
Vuex模块化使用,单页应用
Vuex是Vue技术栈中常用的技术,他集中管理数据状态,同时也可以借助其他库实现数据持久化存储。Vuex在SPA APP中应用方式(开发代码)是什么样的呢？这是Vuex官网介绍地址,参考这里可以写出简单的DEMO,在实际项目中的完整应用会是什么呢？简单的项目可以使用Vue Bus,来实现数据共享和事件传递,较为复杂并且完全遵循Vue模块化的状况下Vuex是不二之选...1.引入Vuex到项目准...原创 2019-09-16 17:20:49 · 246 阅读 · 0 评论