开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 使用uniapp微信公众号和小程序开发全过程 -> 正文阅读

[移动开发]使用uniapp微信公众号和小程序开发全过程

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

什么是微信公众号

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

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

一、服务号功能

公众平台服务号，是公众平台的一种帐号类型，旨在为用户提供服务。
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]
			},
			//检查浏览器地址栏中微信接口返回的code
			checkWeChatCode() {
				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 ~ -90
  longitude: 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 ~ -90
          longitude: 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.latitude
            const longitude = res.longitude
            const speed = res.speed
            const accuracy = res.accuracy
            console.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]();
  })
}