h5嵌入微信小程序webView长按识别二维码

原创已于 2023-07-02 21:28:40 修改 · 4.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #javascript #小程序

于 2023-03-16 17:46:22 首次发布

这篇文章介绍了如何使用H5页面通过v-for指令渲染图片，并结合点击事件实现链接跳转。同时，展示了微信小程序中利用view和image组件展示图片，配合长按事件实现二维码的识别功能，特别是在小程序内提供了便捷的用户交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、h5页面用于渲染图片

 <div id="app">
      <div class="priview-img">
        <img
          v-for="(imgs, imgids) in content"
          :src="imgs.url"
          :key="imgids"
          class="autoimg"
          @click="toLink(imgs.linkUrl)"
        />
      </div>
    </div>

2、微信小程序接收图片

<view class="detail" style="margin-top: 148rpx;">
			<image show-menu-by-longpress v-for="(item,index) in list.content" :key="index" :src="item.url" 
				 mode="widthFix" @click="clickImg(item)"/>
		</view>

3、在小程序内就可以实现长按识别二维码啦。