微信小程序如何跳转微信公众号、长按识别图片进入公众号

大家好，欢迎来到IT知识分享网。

1. 微信小程序如何跳转微信公众号

1.2. 微信公众号配置

1.2. 微信小程序配置

1.3. 添加代码

首页添加代码：

<official-account></official-account>

如果关联的公众号为已认证企业号，可以添加如下代码：

<web-view src="https://mp.weixin..com/mp/profile_ext?action=home&__biz=Mzg2NzczNDk3NA%3D%3D==&scene=110#wechat_redirect"></web-view>

url 为公众号链接或公众号引导文章，公众号链接可以通过网上转码工具从公众号二维码转换出来。

2. 微信小程序长按识别图片二维码功能

2.1. 说明

（1）添加长按事件：在需要添加长按事件的元素上，加入bindlongpress事件属性，后面跟上事件处理函数名称，例如：
（2）定义长按事件处理函数：在页面的js文件中，定义长按事件处理函数longPressHandler，例如：
（3）获取图片路径：在长按事件处理函数中，可以通过e.target.dataset.src获取到图片路径。如果是在image标签中长按识别，可以使用e.currentTarget.dataset.src来获取图片路径。
（4）调用微信扫码接口：使用wx.scanCode接口进行二维码识别。在长按事件处理函数中，调用wx.scanCode接口，并传入scanType参数为['qrCode']，即只识别二维码。例如：
（5）完整示例代码：
需要注意的是，微信小程序中的扫码功能需要用户授权，因此在使用该功能之前，需要先在app.json中添加"permission"字段，并在"permission"字段中添加扫码功能的权限声明，例如：
在以上示例中，我们实现了微信小程序中的长按识别图片二维码功能。通过添加长按事件，并调用微信扫码接口，我们可以实现对图片中二维码的识别功能。

2.2. 完整代码

2.2.1. qrcodeLong.wxml

<view class="container" bindlongpress="longPressHandler"> <image class="img-layout" show-menu-by-longpress="{ 
   {true}}" src="../../image/icon/icon_qrcode.jpg" data-src="../../image/icon/icon_qrcode.jpg" mode="aspectFit" /> </view> <view class="title-layout">长按图片二维码扫描</view>

2.2.2. qrcodeLong.js

 longPressHandler: function(e) { 
    var src = e.currentTarget.dataset.src; wx.scanCode({ 
    scanType: ['qrCode'], success: function(res) { 
    console.log(res.result); } });

2.2.3. 需要注意的是，微信小程序中的扫码功能需要用户授权，因此在使用该功能之前，需要先在`app.json`中添加`"permission"`字段，并在`"permission"`字段中添加扫码功能的权限声明，例如：

{ 
    "permission": { 
    "scope.userLocation": { 
    "desc": "获取您的地理位置以提供更好的服务" }, "scope.address": { 
    "desc": "收货地址" }, "scope.invoiceTitle": { 
    "desc": "发票抬头" }, "scope.invoice": { 
    "desc": "获取发票" }, "scope.werun": { 
    "desc": "微信运动步数" }, "scope.record": { 
    "desc": "麦克风" }, "scope.writePhotosAlbum": { 
    "desc": "保存到相册" }, "scope.camera": { 
    "desc": "拍照" }, "scope.scanCode": { 
    "desc": "扫码" } } }

3. 小程序长按识别二维码

3.1. 说明

（1）小程序版本：

show-menu-by-longpress="{ 
   {true}}"

（2）uniapp版本：

:show-menu-by-longpress="true"

3.2. 举例：