微信小程序 Notes ｜开发常用事例（四）

前言

那啥，关于小程序整理了几篇笔记，多多少少对个人而言有点作用，下面附上对应的文章链接：

微信小程序｜开发常用事例（一）
微信小程序｜开发常用事例（二）
微信小程序 Notes ｜开发常用事例（三）

希望多多少少可以帮助到像我一样的前端小白。

这年头，挣钱不易，小作坊生存不易！

且行且珍惜吧。

1、List item 和 button 冲突怎么玩？

这个事情是这样的，由于韩总死乞白赖的非要列表新增转发 PDF 功能，由于微信小程序限制只有 button 才具有开放的一些权限，所以直接采用 button 包裹 image 的方案，如下：

<view class="news"> <block wx:for="{{ newsList }}" wx:for-index="index" wx:key="news"><view class="news-item" bindtap="onNewsItemClick" data-newsID="{{ item.newID }}"><text class="content">{{ item.content }}</text><view class="item_new_bottom"><text class="createTime">{{ item.createTime }}</text><button open-type="share" bindtap="onShareAppMessage" hover-stop-propagation="true"data-shareid="{{ item.newID }}"><image src="/images/ic_share.svg" mode="aspectFit"></image></button></view></view><van-divider wx:if="{{ index != newsList.length -1 }}" /></block>
</view>

效果如下：

有个比较尴尬的问题是，当点击分享图标时，对应的 item 事件也会执行，查阅了官方手册后。

将 button 事件类型调整为：catchtap 即可。

针对这两种方式，这里简单理解下。

使用 catchtap 方式暖男，且只对你一个人暖，也就是说事件不会再次向上传递，自我消费；
bindtap 方式则是渣男，挨个宠幸。

2、如何分享页面并携带参数？

这个需求是真恶心，先来看下效果图：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0dbPW4U6-1607304985403)(https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/af80ce2169564e93aa6c1c504eb54ded~tplv-k3u1fbpfcp-watermark.image)]

简单说下步骤：

button 设置 open-type 为 share；
onShareAppMessage() 中设置 title、path 以及 imageUrl；
onLoad 中接收到解析即可。

下面附上关键 js 代码：

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {let sharePDFId = parseInt(options.sharePDFId);if (sharePDFId >= 0) {var newFilePath = wx.env.USER_DATA_PATH + '/' + this.data.newsList[sharePDFId].content + '.pdf';let downloadPDFUrl = this.data.newsList[sharePDFId].pdfUrl;handleLoadPDF(newFilePath, downloadPDFUrl);}
},/*** 用户点击右上角分享*/
onShareAppMessage: function (res) {let that = this;let sharePDFId = parseInt(res.target.dataset.shareid);return {title: that.data.newsList[sharePDFId].content + '.pdf',path: '/pages/index/index?sharePDFId=' + sharePDFId,imageUrl: urlUtils.getComposeUrl('/images/img_share_pdf.png')}
},

3、如何实现列表点击 item title 变色，markers 同时变色？

先来看个效果吧，可能我得描述不是那么准确：

思路都是一样的：

知晓当前 item 点击位置；
更新 markers 中对应的 marker。

给出部分页面代码：

<view class="port_desc"><map id="map" bindmarkertap="onMarkersClick" setting="{{ setting }}" show-location markers="{{ markers }}"/><scroll-view scroll-y><block wx:for="{{ portList }}" wx:key="port"><view class="item_port" bindtap="onPortItemClick" data-portid="{{ item.portId }}" data-index="{{ index }}"></block></scroll-view>
</view>

对应的 js 文件：

Page({/*** 页面的初始数据*/data: { mCurPosititon: 0,  markers: [{iconPath: "/images/icon_prot.png",id: 0,latitude: 19.731021,longitude: 109.205006,width: 30,height: 36}, {iconPath: "/images/icon_prot.png",id: 1,latitude: 20.022159,longitude: 110.283528,width: 30,height: 36}], },/*** 生命周期函数--监听页面显示*/onShow: function () {this.refreshMarkers(0);},/*** 港口 item 点击 - 地图 markers 平移*/onPortItemClick: function (event) {let that = this;let currentId = event.currentTarget.dataset.portid;let portBean = that.data.portList[currentId];// 平移 markers 到地图中心this.mapContext.moveToLocation({longitude: portBean.longitude,latitude: portBean.latitude,success(res) {console.log('---> 平移成功 ', res);},fail(err) {console.log('---> 平移失败 ', err);}});that.refreshMarkers(1);that.setData({mCurPosititon: event.currentTarget.dataset.index,});that.refreshMarkers(0);},/*** 刷新当前选中的 Markers 点*/refreshMarkers: function (type) {let that = this;var tempMarkers = that.data.markers;tempMarkers[that.data.mCurPosititon].iconPath = type == 0 ? '/images/icon_prot_sel.png' : '/images/icon_prot.png';that.setData({markers: tempMarkers,});}})

有时候想想，这东西真的是相通的。遇到问题，静下心来，慢慢梳理，别慌。

4、wxml 中的三元运算符使用

这个比较 easy，直接放上代码：

<text class="title" style="color:{{ mCurPosititon == index ? 'red' : 'black' }}">{{ item.title }}</text>

5、map 如何自定义气泡窗口，支持动态切换，并且支持点击？

先来看个效果图，一目了然：

这块内容相对 easy，直接放上代码咯。

首先是 js 关键代码：

/*** 页面的初始数据*/
data: { portName: '',markerId: 0, markers: [{id: 0, iconPath: "/images/icon_prot.png",latitude: 19.731021, longitude: 109.205006,width: 30, height: 36, customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}}, {id: 1, iconPath: "/images/icon_prot.png",latitude: 20.022159, longitude: 110.283528,width: 30, height: 36, customCallout: {anchorX: 0,anchorY: 0,display: "ALWAYS"}}, ],portList: [{portId: 0, markerId: 0, title: '洋浦港',desc: '洋浦港....',avatar: 'https:/xxxx9e.jpg',latitude: 19.731021, longitude: 109.205006,}, {portId: 1, markerId: 1, title: '海口港',desc: '海口港xxx',avatar: 'https://xxxae.jpeg',latitude: 20.022159, longitude: 110.283528,}, ]
},/*** 生命周期函数--监听页面显示*/
onShow: function () {let that = this; // 初始化数据let portBean = that.data.portList[0];that.setData({portName: portBean.title,markerId: portBean.markerId});
},/*** 港口 item 点击 - 地图 markers 平移*/
onPortItemClick: function (event) {let that = this;let currentId = event.currentTarget.dataset.portid;let portBean = that.data.portList[currentId];// 平移 markers 到地图中心this.mapContext.moveToLocation({longitude: portBean.longitude,latitude: portBean.latitude,success(res) {console.log('---> 平移成功 ', res);},fail(err) {console.log('---> 平移失败 ', err);}});that.refreshMarkers(1);that.setData({mCurPosititon: event.currentTarget.dataset.index,});that.refreshMarkers(0);// 更新气泡数据that.setData({portName: portBean.title,markerId: portBean.markerId});
},/*** Markers 点击查看详情*/
bindcallouttap: function (event) {let markerId = parseInt(event.detail.markerId); // 其实这就是 id，为了实现对应的详情切换wx.navigateTo({url: '/pages/portDetail/portDetail?portId=' + markerId})
},/*** 刷新当前选中的 Markers 点*/
refreshMarkers: function (type) {let that = this;var tempMarkers = that.data.markers;tempMarkers[that.data.mCurPosititon].iconPath = type == 0 ? '/images/icon_prot_sel.png' : '/images/icon_prot.png';that.setData({markers: tempMarkers,});
}

然后就是对应的 wxml 关键代码：

<map bindcallouttap="bindcallouttap" id="map" setting="{{ setting }}" show-location markers="{{ markers }}"><cover-view slot="callout"><cover-view marker-id="{{ markerId }}"><cover-view class="map_custiom_callout"><cover-view class="portName">{{ portName }}</cover-view></cover-view></cover-view></cover-view>
</map>
<scroll-view scroll-y><block wx:for="{{ portList }}" wx:key="port"><view class="item_port" bindtap="onPortItemClick" data-portid="{{ item.portId }}" data-index="{{ index }}"><!-- ... --></block>
</scroll-view>

这块从一开始自己就进入了一个误区。其实很多事情都是循循渐进，太过于急功近利，反而有点得不偿失了。无论身处何地，保持自身冷静，条理分析。

6、关于那些烦人的相对路径处理

相信大家都遇到过如下情况，比如我定义一个 urlUtils 工具类，那么在对应使用的 js 中就需要通过如下方式引用：

const urlUtils = require(’…/…/utils/urlUtils.js’)

看到前面的 …/ 就说烦不烦？

咨询大佬，大佬提供了一种使用绝对路径方案，如下：

Step 1: app.js 新增 require 方法：

require: function ($url) { return require($url) },

Step 2: 替换原有很 low 的方式。

//获取应用实例
const app = getApp();
const urlUtils = app.require('utils/urlUtils.js');

ummm，爽多了。哈哈哈。

对了，记得关闭「上传时进行代码保护」

7、如何实现点击图片弹出并播放视频？

还是老规矩，放个效果图，稍等，等我录制，