前言

我之前涉足小程序，并简要记录了开发过程中遇到的点点滴滴：

现在，我再次负责小程序。很长一段时间后，这确实令人生畏。由于以前的记录很短，这里将继续记录和改进开发过程中遇到的一系列小问题。

始终努力。直到现在我别无选择，只能买车。从国庆节回来的时候好像整个人都不好。我必须迅速调整，否则梦想永远只是梦想。

来吧〜

小案件摘要

对于不熟悉前端的Android，前端确实很烦人，并且很难分辨出属性之间的冲突。更好的方法是在线调试，调整参数样式并直接复制。只要Android可以有这样的工件，就可以了，哇，我期待我的Android越来越好〜

1.微信小程序如何构建npm？

在主要使用Android之前，我突然发现我需要在官方网站上通过npm进行构建，我有些困惑。在此处记录步骤，以便您下次可以在几分钟内完成操作〜

步骤1：输入小程序根目录并执行npm初始化

package.json文件将在成功后生成。

步骤2：然后执行相应的npm安装依赖项

例如，您需要使用vant库，因此相应的npm命令如下：

这两个步骤对应的示意图如下：

第3步：选择在小程序开发工具中构建npm。

在这里，您需要注意在项目本地设置中打开npm：

成功后，将生成miniprogram_npm目录，其中包含我们通过npm下载的vant代码，如下所示：

2.如何升级npm相应的依赖软件包？

有一天，当我访问官方网站时，我感到非常困惑。我看到人们的版本得到了一些改进，并且没有开始的方法。这是升级方法。实际上，它与前一个相同。下面的升级实例图：

实际上，复制并运行官方网站提供的npm安装方法。

3.如何单击图像进入客户服务会话？

首先附加效果图：

因为微信小程序 Api表示只有按钮具有某些打开功能，并且单个图像无法实现单击跳转到客户服务消息对话的功能。前端个人感觉是每个元素都通过不同的属性样式无所不包，因此我可以通过将按钮与图像包装在一起来间接实现此效果吗？一起看吧〜

样式文件如下：

.model { display: flex; justify-content: space-between; margin-top: 30rpx;}.model button { height: 180rpx; width: 49%; background-color: transparent !important; margin: 0; padding: 0 !important;}.model button::after { border: 0px solid rgba(0, 0, 0, 0.2) !important;}.content .model button image { width: 100%;}

4.如何打开/预览云平台PDF？

先看看粗糙的效果图：

这可能意味着：

实际上，请在本地下载它，然后将其打开。高大上的闪烁支持预览在线PDF，

首先查看我的本地模拟的基本数据：

newsList: [{ newID: 0, title: '最新活动', content: '游艇xx活动', pdfUrl: urlUtils.getDownloadPDFUrl('/pdf/xxn.pdf'), createTime: '2020 年 4 月 1 日' }, { newID: 1, title: '产业政策', content: '海南省xxx通知', pdfUrl: urlUtils.getDownloadPDFUrl('/pdf/xx.pdf'), createTime: '2019 年 12 月 30 日' }, { newID: 2, title: '最新内容', content: '游艇xx名单', pdfUrl: urlUtils.getDownloadPDFUrl('/pdf/xx.pdf'), createTime: '2020 年 4 月 1 日' } ],

然后附上关键代码：

/** * 加载 PDF 文档 */onLoadItempDF: function(event) { wx.showLoading({ title: '文件缓冲中...', }) var itemId = parseInt(event.currentTarget.dataset.newsid); var saveTempFilePath = wx.env.USER_DATA_PATH + '/temp.pdf'; var newFilePath = wx.env.USER_DATA_PATH + '/' + this.data.newsList[itemId].content + '.pdf'; wx.downloadFile({ url: this.data.newsList[itemId].pdfUrl, filePath: saveTempFilePath, success: function(res) { if (res.statusCode == 200) { var fileSystemManager = wx.getFileSystemManager(); fileSystemManager.ｒｅｎａｍｅ({ oldPath: saveTempFilePath, newPath: newFilePath, success: function(res) { wx.openDocument({ filePath: newFilePath, fileType: 'pdf', showMenu: 'true', success: function(res) { console.log("----> 打开文档成功 "); wx.hideLoading() }, fail: function(res) { console.log("----> 打开文档失败 "); console.log(res); wx.hideLoading() wx.showToast({ title: '文档打开失败，请稍后再试！', icon: 'none' }) } }) }, fail: function(res) { console.log("----> 重命名文档失败 " + res); wx.hideLoading() wx.showToast({ title: '重命名文档失败，请稍后再试！', icon: 'none' }) } }); } }, fail: function(res) { console.log(res); wx.hideLoading() wx.showToast({ title: '文档打开失败，请稍后再试！', icon: 'none' }) } })},

代码相对简单，因此在此不再赘述。细心的朋友注意到，下载完成后会使用重命名，主要是为了避免打开PDF时出现临时字符，如下所示：

这段代码实际上并不完美，至少表明它可以封装在一个单独的层中，所以我们在这里偷懒吧。

哦，是的，还有一件事，请记住复制云平台PDF地址的下载地址！

5.转换vant标签以实现放大/缩小标签切换

让我们先看一下效果，Android端现有的TabLayout非常方便快捷。在这里，嘿。

怪我，我不懂前端。

无话可说，仅基于vant-tabs转换，完整的代码直接附在下面。

123 123

样式文件如下：

.van-ellipsis { margin: 6rpx 0rpx 6rpx 14rpx;}.tab-class { display: contents !important; padding: 0 12px !important; color: var(--tab-text-color, #646566) !important; font-size: var(--tab-font-size, 14px) !important; line-height: var(--tabs-line-height, 112rpx) !important;}.tab-active-class { font-weight: var(--font-weight-bold, 800); font-size: var(--tab-font-size, 16px) !important; color: var(--tab-active-text-color, #323233); line-height: 105rpx !important;}.nav-class { height: auto !important; background-color: #f5f5f5;}

除了第一个非常特殊的样式外，其余所有样式均基于官方提供的自定义样式。这是一个简单的屏幕截图，用于以后查看的说明：

6.如何用标签内容高度填充屏幕？

如果要在选项卡中嵌套地图，则应将宽度和高度设置为100％以填充屏幕。结果就是这种悲惨的样子：

下面仍然有很多空间。我突然想到了PHP以前使用的vh。据说是动态屏幕尺寸。调整后如下：

map { width: 100%; height: 94.5vh;}

这将填满整个屏幕。朋友可以考虑为什么不设置100vh？

7.如何实现文本显示最多两行，超出显示范围？

样式如下：

.item_action_title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; text-overflow: -o-ellipsis-lastline; }

8.如何在地图上添加相应的浮动图层？

首先让我们看一下最终结果：

这里是微信小程序 diss下的官方上帝逻辑。很明显，我可以在模拟器中像老虎一样操作，为什么在运行真实计算机时却没有显示？逗我吗为什么不仅仅在模拟器上禁止它？好玩吗？

让我们先谈几件事：

让我们首先看一下我在此处简单模拟的数据格式：

portList: [{ title: '会所 - 001', desc: '会所介绍', avatar: 'http://www.china-rendezvous.com/Index/Tpl/Public/images/index/banner.jpg' }, { title: '会所 - 002', desc: '会所介绍', avatar: 'http://www.china-rendezvous.com/Index/Tpl/Public/images/index/banner.jpg' }, { title: '会所 - 003', desc: '会所介绍', avatar: 'http://www.china-rendezvous.com/Index/Tpl/Public/images/index/banner.jpg' }, ]

稍后将附上地图的关键代码：

对应于js：

// 地图基本配置setting: { skew: 0, // 倾斜角度 rotate: 0, // 旋转叫丢 scale: 8, // 缩放级别，取值范围为3-20 showLocation: true, // 显示带有方向的当前定位点 showScale: true, // 显示比例尺 subKey: '', // 个性化地图使用的key layerStyle: 1, // 个性化地图配置的 style，不支持动态修改 longitude: 109.76685421005249, latitude: 19.207716690636587, enableZoom: true, // 是否支持缩放 enableScroll: true, // 是否支持拖动 enableRotate: true, // 是否支持旋转 showCompass: true, // 显示指南针 enable3D: false, // 展示3D楼块 enableOverlooking: true, // 开启俯视 enableSatellite: false, // 是否开启卫星图 enableTraffic: true, // 是否开启实时路况 markers: [{ iconPath: "/images/img_position_flag.png", id: 0, latitude: 20.045611, longitude: 110.181885, width: 30, height: 30 }, ],},

最终的CSS样式文件：

map { width: 100%; height: 94.5vh;}.port_class { display: flex; flex-direction: column; margin: 30rpx; background: #fff; border-radius: 8rpx; position: absolute; bottom: 0; left: 0; right: 0; max-height: 45vh;}.port_class .item_port { display: flex; flex-direction: rows; padding: 30rpx; justify-content: space-between;}.port_class .item_port .item_port_content { display: flex; flex-direction: column; flex: 1;}.port_class .item_port .item_port_content .title { font-size: 30rpx; font-weight: bold;}.port_class .item_port .item_port_content .desc { font-size: 26rpx; color: gray; margin-top: 22rpx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; text-overflow: -o-ellipsis-lastline;}.port_class .item_port cover-image { height: 120rpx; width: 120rpx; margin-left: 30rpx;}.port_class .pider_line { background-color: #f5f5f5; width: 100%; height: 3rpx;}

9.如何实现地图翻译标记？

请记住要添加权限，有关详细信息，请查看文章末尾的异常摘要。

看效果图

关键js代码附在这里：

/** * 生命周期函数--监听页面初次渲染完成 */onReady: function() { this.mapContext = wx.createMapContext('map');},/** * 港口 item 点击 - 地图 markers 平移 */onPortItemClick: function(event) { let that = this; let currentId = event.currentTarget.dataset.portid; // 获取 markers 目标经纬度 let destination = { longitude: that.data.portList[currentId].longitude, latitude: that.data.portList[currentId].latitude }; // 平移 markers this.mapContext.translateMarker({ markerId: 0, destination: destination, autoRotate: true, rotate: 0, duration: 1000, success(res) { console.log('---> 平移成功 ', res) }, fail(err) { console.log('---> 平移失败 ', err) } });}

哦，是的，html文件如下：

10.如何将标记移至地图中心？

请记住要添加权限，有关详细信息，请查看文章末尾的异常摘要。

首先查看效果图：

html文件如下：

关键js代码如下：

/** * 港口 item 点击 - 地图 markers 平移 */onPortItemClick: function(event) { let that = this; let currentId = event.currentTarget.dataset.portid; // 平移 markers 到地图中心 this.mapContext.moveToLocation({ longitude: that.data.portList[currentId].longitude, latitude: that.data.portList[currentId].latitude, success(res) { console.log('---> 平移成功 ', res) }, fail(err) { console.log('---> 平移失败 ', err) } });}

11.关于静态/动态标题设置

一般来说，对于某些固定页面，我将直接在与该页面相对应的json文件中指定：

"navigationBarTitleText": "详情",

可以动态设置某些动态，如下所示：

// 设置标题wx.setNavigationBarTitle({ title: portBean.title,});

1 2.关于获取用户公共信息

我在这里使用的是前向按钮和按钮，没有区别，内容如下：

登录/注册

对应的js：

/** * 生命周期函数--监听页面加载 */onLoad: function(options) { wx.getSetting({ success: function(res) { if (res.authSetting['scope.userInfo']) { wx.getUserInfo({ success: function(res) { console.log(res); } }) } } })},/** * 获取用户信息 */bindGetUserInfo: function(res) { console.log(res); },

获得的数据：

第一次会弹出一个框，如下所示：

1 3.如何在地图上绘制叠加层？

先看看效果：

让我们看看另一波官方API：