关于微信小程序:微信小程序-Notes-｜-开发常用事例四

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

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

心愿多多少少能够帮忙到像我一样的前端小白。

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

且行且珍惜吧。

这个事件是这样的，因为韩总死乞白赖的非要列表新增转发 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 形式则是渣男，挨个宠幸。

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

简略说下步骤：

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')
  }
},

先来看个成果吧，可能我得形容不是那么精确：

思路都是一样的：

通晓以后 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,});
  }

})

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

这个比拟 easy，间接放上代码：

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

先来看个效果图，高深莫测：

这块内容绝对 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>

这块从一开始本人就进入了一个误区。其实很多事件都是循循渐进，太过于急功近利，反而有点得失相当了。无论身处何地，放弃本身沉着，条理剖析。

置信大家都遇到过如下状况，比方我定义一个 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，爽多了。哈哈哈。

对了，记得敞开「上传时进行代码爱护」

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

附上对应 wxml 内容：

<video id="videoID" bindfullscreenchange="bindFullScreenChange" 
    direction="0" controls="true" src="{{videoLink}}"
        show-fullscreen-btn="{{false}}"></video>

这里还独自给了一个款式：

video {display: none;}

而后就是对应的 js：

/**
 * 视频进入和退出全屏时触发，event.detail = {fullScreen, direction}，direction 有效值为 vertical 或 horizontal
 */
bindFullScreenChange: function (event) {this.videoContext.pause();
  this.setData({videoLink: null,});
},

function handleVideoPlay(that, videoUrl) {
  that.setData({videoLink: videoUrl});
  that.videoContext.requestFullScreen();
  setTimeout(function () {that.videoContext.play();
  }, 600);
}

这里特意说一下，这里依照官网设置 true/false，在真机上有效，须要用 {{}} 去包裹每个 Boolean 值即可。

这点官网文档体验性不太好。

成果如下所示：

一起来看看这万恶的资本主义：

一时怒怼一时爽，爽完还得去撸码，谁让咱是底层低微的打工人呢？

最后的想法是，依照 Android 之前间接替换标签加款式的计划，后果小程序间接把替换的标签展现进去了。

度娘了一波，失去的计划简直差不多，最终都是拆分 title，而后去匹配搜寻的 key，并设置对应的高亮 CSS，有的大佬间接一把梭，手撸自定义组件，尔等间接拜服拜服，告辞～

好啦，俏皮话不多说，先附上 wxml 文件，已省略其余无关代码片段：

<view class="container">
  <van-search 
      bind:search="onSearchClick" 
      clearable input-align="center" 
      value="{{searchKey}}" 
      shape="round" focus
      placeholder="请输出搜寻关键词" /> 
  <block 
      wx:if="{{exhResultList.length}}" 
      wx:for='{{exhResultList}}' 
      wx:for-index="index" wx:key="exh">
    <view 
      class="tab_item" 
      catchtap="onActionItemClick" 
      data-itemid="{{item.exh_id}}"> 
      <view class="tab_info">
          <!-- 要害是这块 -->
        <view class="title">
          <!-- 循环遍历匹配搜寻关键字，并设置高亮 CSS -->
          <text 
            wx:for="{{item.exh_name}}" 
            class="{{item == searchKey ?'searchHigh':''}}">{{item}}</text>
        </view> 
      </view>
    </view>
    <van-divider wx:if="{{index != exhResultList.length -1}}" />
  </block> 
</view>

随后简略附上对应高亮的 CSS，其实就是个设置字体色彩：

.searchHigh {color: red;}

最初的 js 要害代码：

data: {searchKey:'',},    
  
onSearchClick: function (event) {
  var that = this; 
  // 搜寻关键字记得去除前后空格
  that.setData({exhResultList: [],
    searchKey : that.trim(event.detail)
  });
  // ...
},

/**
 * 去除前后空格
 * @param {} s 
 */
trim: function (s) {return s.replace(/(^\s*)|(\s*$)/g, "");
},

成果如下：

要害就是 float:left 间接附上 wxml 代码：

<view class="header">
  <image src="{{mHeaderImage}}" mode="aspectFit"></image>
  <label>
    疏忽泛滥文字内容...
  </label>
</view>

对应 CSS：

.header {}

.header image {
  float: left;
  width: 180rpx;
  height: 180rpx;
}

.header label {font-size: 24rpx;}

简略举个成果，到时候大家触类旁通即可。实现原理一样，业务需要则比较复杂咯。

次要用到了 vant 提供的 Layout 组件，它将一行气氛 24 列栅格，临时称为栅格布局吧。

间接丢代码咯：

<view class="hot_line_class">
  <van-row>
    <block wx:for="{{mHotAuthorList}}" wx:key="*this">
      <van-col span="6"> 
        <view class="item_hot_line">
          <image class="avatar" src="{{item.avatar}}" mode="aspectFit"></image>
          <text class="name">{{item.jobName}}</text>
          <text class="mobile">{{item.name}}</text>
        </view>
      </van-col>
    </block>
  </van-row>
</view>

span=”6″ 这里代表一行 4 列，24 / 6 = 4。剩下诸如此类。

还有个比拟要害的中央是千万记得给 item 设置宽度 100%，不然当列表内容为奇数时，最初一位显示比拟奇怪，别问我咋晓得的。

总感觉每个小例子尽量配一个演示成果，不便间接上手，用最快捷的形式证实是否和预期统一，转过头来看，是减少了不少麻烦。一分耕耘一分收获，心愿能够帮忙到和我一样的前端小白白。

暴力解法也好，最优解也好，首先我感觉是先解进去，随后逐渐优化。一段看似简洁高效的代码，背地谁人能知作者心血。

没必要力求最优，挨个击破也未尝不是一种好形式。

ummm，96 年的都被叫叔叔了，应该是前端老白白了（手动滑稽～）。

一起致力呀，万一一不小心和我鸡老大肩并肩了呢～

微信官网文档

关于微信小程序:微信小程序-Notes-｜-开发常用事例四

前言

1、List item 和 button 抵触怎么玩？

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

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

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

5、map 如何自定义气泡窗口，反对动静切换，并且反对点击？

6、对于那些烦人的相对路径解决

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

8、搜寻后果高亮显示

9、文字盘绕图片成果

10、记录个列表展现形式实现

后记

参考资料

Just My Socks（注册教程内含优惠码）

关于微信小程序:微信小程序-Notes-｜-开发常用事例四

前言

1、List item 和 button 抵触怎么玩？

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

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

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

5、map 如何自定义气泡窗口，反对动静切换，并且反对点击？

6、对于那些烦人的相对路径解决

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

8、搜寻后果高亮显示

9、文字盘绕图片成果

10、记录个列表展现形式实现

后记

参考资料

Just My Socks（注册教程 内含优惠码）

Just My Socks（注册教程内含优惠码）