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

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

1.2. 微信公众号配置

  登录微信公众号，点击【小程序管理】：

  点击【添加】：

  点击【关联小程序】：

  输入小程序进行关联：

1.2. 微信小程序配置

  登录微信小程序，点击【设置】：

  打开 “引导关注公众号”，设置需要关注的公众号：

1.3. 添加代码

  首页添加代码：

<official-account></official-account>

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

<web-view src="https://mp.weixin.qq.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. 举例：

（1）小程序版本：

<image show-menu-by-longpress="{{true}}" :src="src" mode="widthFix" />

（2）uniapp版本：

<image :src="src" mode="widthFix" :show-menu-by-longpress="true"></image>