什么是微信公众号？它的本质是什么

什么是微信公众号

微信公众平台，简称公众号。曾命名为“官号平台”、“媒体平台”、微信公众号，最终定位为“公众平台”。

微信公众号包含了：订阅号，服务号和企业号，各自的功能如下

一、服务号功能

公众平台服务号，是公众平台的一种帐号类型，旨在为用户提供服务。
1、1个月（自然月）内仅可以发送4条群发消息。
2、发给订阅用户（粉丝）的消息，会显示在对方的聊天列表中，相对应微信的首页。
3、服务号会在订阅用户（粉丝）的通讯录中。通讯录中有一个公众号的文件夹，点开可以查看所有服务号。
4、服务号可申请自定义菜单。

二、订阅号功能

公众平台订阅号，是公众平台的一种帐号类型，旨在为用户提供信息。
1、每天（24小时内）可以发送1条群发消息。
2、发给订阅用户（粉丝）的消息，将会显示在对方的“订阅号”文件夹中。点击两次才可以打开。
3、在订阅用户（粉丝）的通讯录中，订阅号将被放入订阅号文件夹中。

三、企业号功能

公众平台企业号，是公众平台的一种帐号类型，旨在帮助企业、政府机关、学校、医院等事业单位和非政府组织建立与员工、上下游合作伙伴及内部IT系统间的连接，并能有效地简化管理流程、提高信息的沟通和协同效率、提升对一线员工的服务及管理能力。

需要申请什么样的公众号？

根据业务需求来申请公众号分为订阅号和服务号订阅号没有登录权限服务号有授权登录

它的本质是什么

微信公众的本质其实就是 H5 开发过程中就当作H5来开发微信公众号里面菜单是，在公众号后台进行配置的，菜单的链接就是我们开发的内容

开始准备

搭建vue 开发环境（这里不废话）
使用 HBuilder X 初始化 uniapp 项目选择合适自己项目的 UI框架，还原布局时会很有很
申请测试公众号申请地址微信测试公众号申请地址

申请测试微信公众号说明

在使用一些特殊权限时需要使用申请的 appId 如以下都会使用到申请的appid：

微信授权登录
微信分享好友朋友圈
获取当前位置
使用地图导航
微信支付

appID 在微信授权登录的使用会用，在用到微信相关功能会用如分享

appsecret 用于后端服务使用使用用途在于生成签名签名后内容用于微信JSSDK配置（前端无需关注这 appsecret）

页面内容开发

跟开发H5页面一摸一样如要同时兼容小程序需要使用条件判断

编译为小程序代码时需要注意一下

H5代码必须使用条件包裹，否则编译到小程序会出错，
在 pages.json 中 path 必须是指定对应页面
错误

正确
所有图片建议使用CDN 方式应用因为小程序中有包的大小限制

微信小程序分包说明

小程序分包官方说明

微信 6.6.0 版本开始支持分包加载

对于老版本的客户端，编译后台会将所有的分包打包成一个整包，老版本的客户端依然按照整包的方式进行加载

目前小程序分包大小的限制

单个分包/主包大小不能超过 2M
整个小程序所有分包大小不超过 4M

微信授权登录

微信测试公众号申请地址

授权登录只有微信服务号才有此功能

注意需要关注公众号后才能进行授权登录

微信授权登录，原理重定向到微信去授权用户信息，在重定向的时候需要传递微信授权重定向回来的链接，注意该链接只能是域名和端口，或者是IP和端口，重定向回来IP或端口需要在公众号上面配置

根据自己业务来在合适的地方进行授权登录（一般是一进入的时候）

B站完整得微信授权登录流程(Node.js)

授权登录前端所需要做的

重定向到微信去用户授权（用户授权完成后微信会回调我们的地址，当然这个地址是需要配置得，上面已经说过），微信重定向回来后在URL地址栏上面有一个code 参数和另外一个参数，我们只需要这个code,去微信那边换取换取access_token 回来，在通过access_token 获取当前用户信息

微信授权登录，我这里只去拿了当前授权后返回回来得code,其他的是后端去实现

*注意 code 只能用一次如果一个code用了二次就会出现

{“errcode”:40163,“errmsg”:“code been used, rid: 61eab4fe-55ee5172-05ca2a6f”}

await xxx 是封装的请求

获取code

 // App.vue
<script>export default {onLaunch: function() {localStorage.setItem('wxIosUrl',,window.location.href)},onShow: function() {// 当前有没有用户信息  如果没有就去授权登录[null, undefined, '', ' '].includes(getStorage('WxUserInfo')) && this.checkWeChatCode()},onHide: function() {},methods: {/*** 获取当前URL参数* @param {Object} name*/getUrlCode(name) {return Object.fromEntries(window.location.search.slice(1).split('&').map((item) => item.split('=')))[name]},//检查浏览器地址栏中微信接口返回的codecheckWeChatCode() {if (this.$isWxH5) {const code = this.getUrlCode('code')if (code) {this.getOpenidAndUserinfo(code)}}},// 用code 走后端换用户信息async getOpenidAndUserinfo(code) {const wxuserInfo = await getwxUserInfo({code}) || {};// 存储当前用户信息setStorage('WxUserInfo', wxuserInfo);},// 微信授权登录getWeChatCode() {// 判断当前是否是微信内置浏览器const isWXh5 = String(navigator.userAgent.toLowerCase().match(/MicroMessenger/i)) === "micromessenger"if (isWXh5) {const {origin,pathname} = window.location;const u = origin + pathname;let local = encodeURIComponent(u || origin); //获取当前页面地址作为回调地址// 通过微信官方接口获取code之后，会重新刷新设置的回调地址【redirect_uri】window.location.href =`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${process.uniEnv.appid}&redirect_uri=${local}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`}}},}
</script>

当前页面（用户自己刷新）微信自带按钮刷新问题，导出请求异常的解决思路

当用户点击刷新按钮，其实是刷新整个页面，相当于 F5 刷新，使用 vue 和uniapp 会存在，存储数据丢失问题（vuex 或者是Vue.prototype.xxx 上面数据丢失）

当然也可以屏蔽刷新按钮，需要用微信JSSDK

解决思路

用户登录后，存储当前用户信息
当打开应用的时候，就看当前有没有用户信息（需要在 onLaunch 钩子函数，判断，因为它是最开始执行，并且只执行一次的钩子函数，在授权登录之前执行）
如果有用户信息就拿（存储或者微信授权返回的参数）到用户信息在去重新登录一次
*注意一个申请的appid 获取用户的openid是唯一的不会改变得，也可以用过这个openid 去判断
如果没有用户信息，那就是才进入应用，或者第一次使用，

使用微信相关服务需要使用微信JSSDK

在使用以以上部分功能如分享，或获取当前微信都需要使用微信JSSDK 微信JSSDK1.6.0
uniapp 使用微信JSSDK 有二种方式

第一种 npm 下载

npm i weixin-js-sdk

第二种直接使用JS包
在对应页面直接

import wx from 'jweixin-1.6.0.js'

或者

const wx  = require('jweixin-1.6.0.js')

使用 from 或者 require 引用会报错

解决微信JSSDK引用出错

出错原因，使用 from 或者 require 当前引用的文件默认为严格模式，this 只想为null 所有会导致后面使用使用出问题

在工具上初始化不成功问题

在微信开发工具也能够初始化SDK成功（如果初始化不成功就让后端检测返回的SDK初始化配置信息，一般初始化不成功报invalid signature的错误都是SDK初始化后端返回的配置信息问题）

微信官方有提供对应的Demo 包含 PHP Java Node.js

微信官方demo 链接

[扫码体验微信提供相关SDK功能]

以微信分享为例

初始化配置失败分享出去的

初始化成功分享出去的

安卓调用微信sdk正常，ios报invalid signature的错误

安卓SDK初始化配置错误

存在原因：在 H5 中调用JSSDK相关方法微信内部会匹配当前页面调用SDK页面路径是否跟初始化配置得路径一样，不一样就会出现 invalid signature 的错误
解决办法：传入后端URL参数必须是当前连接整个地址必须使用这个 window.location.href 否是会出现SDK 初始化配置错误

IOS初始化配置错误

安卓初始化成功。但是IOS初始化配置错误原因：

跟上安卓使用SDK相关功能一样，微信内部回去验证当前SDK初始化配置信息和调用SDK相关方法去验证当前URL地址是否跟配置信息一样，不一样就SDK初始化配置错误

vue和uni-app 解决方案

vue 里面解决办法

//main.js
router.beforeEach((to, from, next) => { // beforeEach是router的钩子函数，在进入路由前执行/* vue-router用的history模式，在微信签名验证的时候iOS验证URL第一次进来的URL */if (isIOS()) {if (from.path === '/') {localStorage.setItem('wxIosUrl',location.href.split('#')[0])}}if (to.meta.title) { // 判断是否有标题document.title = to.meta.title}next()// 执行进入路由，如果不写就不会进入目标页
})

uni-app 解决方案
在 uni-app 中 onLaunch 是最开始触发得，全局也只触发一次

 // App.vue
<script>export default {onLaunch: function() {localStorage.setItem('wxIosUrl',,window.location.href)},onShow: function() {},onHide: function() {},methods: {},}
</script>

微信公众号使用地图导航问题

在H5 中或者webApp 中使用导航可以直接一个链接，和经纬度就可以唤醒第三方应用进行导航

window.location.href="androidamap://viewMap?sourceApplication=appname&poiname=abc&lat=36.2&lon=116.1&dev=0";window.open('androidamap://viewMap?sourceApplication=appname&poiname=abc&lat=36.2&lon=116.1&dev=0')

在公众号里面不能使用以上方法

使用微信内置地图查看位置接口

同样也要使用微信JSSDK

wx.openLocation({latitude: 0, // 纬度，浮点数，范围为90 ~ -90longitude: 0, // 经度，浮点数，范围为180 ~ -180。name: '', // 位置名address: '', // 地址详情说明scale: 1, // 地图缩放级别,整型值,范围从1~28。默认为最大infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
});

微信JSSDK封装使用

import wxshare from '@/util/jweixin-1.6.0.js'// 获取当前微信配置信息
const getWXconfig = (type = '', data = {}) => {// 判断当前系统是否是IOS const isIOS = /(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent),wxIosUrl = isIOS ? getStorage('wxIosUrl') : window.location.href;// 自定义http 请求 获取当前URL地址去初始化const wxConfig = await getWeJsTicket({url: wxIosUrl})WXJSBridge(wxConfig, type, data)
}/*** 使用WXJSSDK 先关功能* @param {*} data 后端返回SDK初始化配置信息* @param {*} type 策略模式需要得类型 来调用对应得方法* @param {*} obj 对应函数所需要的参数*/
function WXJSBridge (data, type, obj) {const fg = {debug: false, //是否打开调试appId: data.appId, // 公众号的唯一标识  timestamp: parseInt(data.timestamp), // 生成签名的时间戳  nonceStr: data.nonceStr, // ，生成签名的随机串  signature: data.signature, // 签名  },// 所需要得权限jsApiList = ['onMenuShareAppMessage', 'updateAppMessageShareData', 'chooseImage', 'uploadImage','downloadImage', 'openLocation', 'getLocation', 'updateTimelineShareData', 'updateTimelineShareData','scanQRCode', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'chooseImage','previewImage', 'checkJsApi', 'hideAllNonBaseMenuItem', 'hideMenuItems',]// SDK 初始化配置wxshare.config({ ...fg, jsApiList });// 初始化配置失败wxshare.error((res) => {console.error(res, 'jsSDK初始化错误');});// 初始化配置成功会执行wxshare.ready(() => {// 批量隐藏功能按钮接口wxshare.hideMenuItems({menuList: ["menuItem:copyUrl", "menuItem:editTag","menuItem:delete", "menuItem:originPage","menuItem:readMode", "menuItem:openWithQQBrowser","menuItem:openWithSafari", "menuItem:share:email","menuItem:share:brand", "menuItem:share:qq","menuItem:share:QZone", "menuItem:refresh","menuItem:setFont"] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮})// 使用策略设计模式const strategy = {'OPENMAP': () => { // 使用微信内置地图查看位置接口wxshare.openLocation({latitude: obj.latitude || 29.560693, // 纬度，浮点数，范围为90 ~ -90longitude: obj.longitude || 106.565501, // 经度，浮点数，范围为180 ~ -180。name: obj.name || '位置名', // 位置名address: obj.address || '地址详情说明', // 地址详情说明scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大infoUrl: obj.infoUrl || 'https://pica.zhimg.com/v2-97b76ddf169bfe4145e63c1c9d27c22b_250x0.jpg?source=172ae18b' // 在查看位置界面底部显示的超链接,可点击跳转});},"Location": () => {wxshare.getLocation({type: 'wgs84',success (res) {const latitude = res.latitudeconst longitude = res.longitudeconst speed = res.speedconst accuracy = res.accuracyconsole.log(res);},fail (e) {console.error(e);}})},"SHARE": () => {const { origin, search } = window.location;let obj = {title: '新人注册享福利', // 分享标题  desc: ' 新人注册享福利，保养送机油', // 分享描述  link: `${origin}?mid=${getStorage('userToken')?.memberId}`, // 当前页面链接  imgUrl: 'http://server3.miaoshare.com/static/img/sharebg.40b1c2fd.png', // 分享图标                                success: function (e) { //分享成功回调console.log(e, '分享成功');},cancel: function (e) { //取消分享回调console.error(e, '分享错误');}}// 分享朋友if (wxshare.updateAppMessageShareData){wxshare.updateAppMessageShareData(obj)} else{wxshare.onMenuShareAppMessage(obj)}//分享到朋友圈if (wxshare.updateTimelineShareData){wxshare.updateTimelineShareData(obj)} else{wxshare.onMenuShareTimeline(obj)}}}// 调用对应方法strategy[type]();})
}

使用微信JSSDK 明明配置了权限却不是能使用改权限或者SDK初始化错误

能够显示在 jsApiList 列表得是不需要使用SDK初始化的

存在此问题一定是后端返回初始化配置问题

让后端检查初始化SDK返回配置信息
让后端检查初始化SDK返回配置信息
让后端检查初始化SDK返回配置信息

本地开发时使用正式的appId 进行授权登录调试问题

正式环境appid 配置的肯定都是域名，并且都是使用得80 端口

我们本地开发时也要使用域名那如何解决此问题呢？

第一种方法，使用Nginx 代理一个域名，这个方法稍微要懂点Nginx (把一个固定的路径去映射为域名)

第二种方法比较简单

修改本机 host
路基 ** C:\Windows\System32\drivers\etc**

使用记事本或者其他打开在最后一行添加

127.0.0.1 se****.com

修改uniapp manifest.json 配置文件

保存并重新服务

使用uniapp微信公众号和小程序踩坑全过程相关推荐

Bwsaas框架基于Thinkphp6.x开发的微信公众号，小程序，app，H5等多端打通的框架
完善bwsaas框架并开源原生小程序商业版本前端应用新增 1插件安装升级,安装平台系统插件(type=admin_system)时可同时添加多个角色组(平台系统功能+租户系统功能),需要在group ...
小程序 php wecahtpay,PHP 微信公众号，小程序获取支付参数。微信支付
PHP 微信公众号,小程序获取支付参数.微信支付发布时间:2018-09-26 11:19, 浏览次数:278 , 标签: PHP 首先下载微信官方demo放入项目中地址:https://gith ...
Appium 解决微信公众号、小程序切换 webview 后无法定位元素的问题
Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题参考文章: (1)Appium 解决微信公众号.小程序切换 webview 后无法定位元素的问题 (2)https:// ...
微信公众号及小程序开发入门（二）
开发过程中一些对微信公众号和小程序的认识. 一.服务号在公众号开发入门一中提到,微信公众号分为订阅号和服务号,其中服务号功能最强,只准企业申请,并且要每年交300元认证费.如果企业想拥有自己的公众号 ...
ngrok内网穿透工具搭建，方便微信公众号，小程序、钉钉等开发【已投入使用】
前言:微信公众号,小程序.钉钉等开发需要内网穿透工具. 1.经过不断的摸索和调试,完成ngrok内网穿透的工具的搭建,对于微信公众号,小程序.钉钉等开发提供便利性. 2.搭建环境Linux cento ...
企业是先做网站，还是做微信公众号或小程序？
很多企业想开发线上业务,就开始做网站.做微信公众号.做小程序.表面看起来开发线上业务的工具,该有的都有了,结果却不是很理想.因此,有的企业就觉得网上开发客户效果不好,但还是有的企业老板希望能把线上开发 ...
【教程】微信公众号与小程序主体变更看这篇就够了
一.前言不久后公司主体将要变更,为了公司现有的公众号以及小程序能够实现丝滑切换,花了半天时间仔细研究了一下微信主体变更的操作章程.现将其中的要点以及注意点记录整理如下,可供后续有需要做微信公众号或小 ...
【微信小程序控制硬件第14篇】分享一下我在微信公众号和小程序上实现的几个颜色采集器，轻松集成到您项目实现调光。
[微信小程序控制硬件第1篇 ] 全网首发,借助 emq 消息服务器带你如何搭建微信小程序的mqtt服务器,轻松控制智能硬件! [微信小程序控制硬件第2篇 ] 开始微信小程序之旅,导入小程序Mqtt客户 ...
私域流量对比：微信公众号、小程序、APP，谁更有价值？
在数字化时代,流量已经成为了互联网企业最重要的资源之一.而对于企业来说,获取到流量只是第一步,如何将流量转化为价值才是最终目的.对于私域流量的获取和转化,微信公众号.小程序和APP是目前最常见的三种方 ...
微信公众号与小程序数据互通
背景最近做了一个有意思的功能<官网内容订阅>,用户在官网扫码后可以订阅官网栏目,订阅栏目后发送模版消息提醒用户订阅成功,模版消息关联了小程序,然后做了一个小程序来管理用户订阅的栏目,小程 ...

使用uniapp微信公众号和小程序踩坑全过程

什么是微信公众号？它的本质是什么

什么是微信公众号

需要申请什么样的公众号？

它的本质是什么

开始准备

申请测试微信公众号说明

页面内容开发

微信小程序分包说明

微信授权登录

根据自己业务来在合适的地方进行授权登录（一般是一进入的时候）

await xxx 是封装的请求

获取code

当前页面（用户自己刷新）微信自带按钮刷新问题，导出请求异常的解决思路

使用微信相关服务需要使用微信JSSDK

解决微信JSSDK引用出错

在工具上初始化不成功问题

在微信开发工具也能够初始化SDK成功（如果初始化不成功就让后端检测返回的SDK初始化配置信息，一般初始化不成功报invalid signature的错误都是SDK初始化后端返回的配置信息问题）

以微信分享为例

安卓调用微信sdk正常，ios报invalid signature的错误

安卓SDK初始化配置错误

安卓初始化成功。但是IOS初始化配置错误原因：

vue和uni-app 解决方案

微信公众号使用地图导航问题

在H5 中或者webApp 中使用导航可以直接一个链接，和经纬度就可以唤醒第三方应用进行导航

在公众号里面不能使用以上方法

微信JSSDK封装使用

使用微信JSSDK 明明配置了权限却不是能使用改权限或者SDK初始化错误

本地开发时使用正式的appId 进行授权登录调试问题

第一种方法，使用Nginx 代理一个域名，这个方法稍微要懂点Nginx (把一个固定的路径去映射为域名)

第二种方法比较简单

使用uniapp微信公众号和小程序踩坑全过程相关推荐

最新文章

热门文章

使用uniapp微信公众号和小程序踩坑全过程

什么是微信公众号？它的本质是什么

什么是微信公众号

需要申请什么样的公众号？

它的本质是什么

开始准备

申请测试微信公众号说明

页面内容开发

微信小程序分包说明

微信授权登录

根据自己业务来在合适的地方进行授权登录 （一般是一进入的时候）

await xxx 是封装的请求

获取code

当前页面（用户自己刷新）微信自带按钮刷新问题，导出请求异常的解决思路

使用微信相关服务需要使用微信JSSDK

解决微信JSSDK引用出错

在工具上初始化不成功问题

在微信开发工具也能够初始化SDK成功 （如果初始化不成功就让后端检测返回的SDK初始化配置信息，一般初始化不成功 报invalid signature的错误 都是SDK初始化后端返回的配置信息问题）

以微信分享为例

安卓调用微信sdk正常，ios报invalid signature的错误

安卓SDK初始化配置错误

安卓初始化成功。但是IOS初始化配置错误原因：

vue和uni-app 解决方案

微信公众号使用地图导航问题

在H5 中或者webApp 中使用导航 可以直接一个链接，和经纬度就可以唤醒第三方应用进行导航

在公众号里面不能使用以上方法

微信JSSDK封装使用

使用微信JSSDK 明明配置了权限 却不是能使用改权限 或者SDK初始化错误

本地开发时使用正式的appId 进行授权登录调试问题

第一种方法，使用Nginx 代理一个域名，这个方法稍微要懂点Nginx (把一个固定的路径去映射为域名)

第二种方法比较简单

使用uniapp微信公众号和小程序踩坑全过程相关推荐

最新文章

热门文章

根据自己业务来在合适的地方进行授权登录（一般是一进入的时候）

在微信开发工具也能够初始化SDK成功（如果初始化不成功就让后端检测返回的SDK初始化配置信息，一般初始化不成功报invalid signature的错误都是SDK初始化后端返回的配置信息问题）

在H5 中或者webApp 中使用导航可以直接一个链接，和经纬度就可以唤醒第三方应用进行导航

使用微信JSSDK 明明配置了权限却不是能使用改权限或者SDK初始化错误