请问构建npm包中的map文件是否会打包到主包，删除map文件对小程序运行是否有影响？

最近在开发中，需要生成自定义的二维码，于是做了一个包出来，分享给大家一起使用。适用于微信小程序的二维码生成器，基于Canvas生成，支持中文的输入。可在原生小程序，mpvue，taro中使用。（文末有一个使用示例）[图片] github地址(wxmp-qrcode)[https://github.com/Z-HNAN/wxmp-qrcode] 安装 [代码]npm install wxmp-qrcode [代码] 使用 创建一个canvas,设置其[代码]id[代码],与[代码]canvas-id[代码]， 并设置canvas的样式，二维码基于其大小生成并居中 [代码]<canvas id="cav-qrcode" canvas-id="cav-qrcode"></canvas> [代码] 引入包并使用 [代码]import QR from 'wxmp-qrcode' QR.draw(str, canvasId, () => { console.log('draw success') } ) [代码] api [代码]/** * 根据canvas尺寸，画出合适居中的qrcode * @param {Object} str 二维码的内容 (必须) * @param {Object} canvasId canvasId的值 (必须) * @param {Object} $this 传入组件的this,兼容在组件中生成二维码 （可选，可省略该参数） * @param {Object} callback 回调函数 (可选) */ draw: function (str, canvasId, $this, callback) /** * 清除canvas内容 * @param {Object} canvasId canvasId (必须) * @param {Object} callback 回调函数 （可选） */ clear: function (canvasId, callback) [代码] 注意 canvas中 id, canvas-id必须保持一致 id 获取canvas节点，自动计算大小使用, 二维码大小基于canvas自动生成 canvas-id 绘制二维码使用 如果在组件中使用，需要传入组件的this，[代码]draw(str, canvasId, componentThis)[代码] 具体参见 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createCanvasContext.html 可以保存二维码为临时图片地址 具体可参见 https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.canvasToTempFilePath.html bug: 该方法有时保存的图片会有一个竖条。 [代码]createQrCode: function (content, canvasId) { QR.draw(content, canvasId) this.canvasToTempImage(canvasId) }, //获取临时缓存图片路径 canvasToTempImage: function (canvasId) { wx.canvasToTempFilePath({ canvasId, success: function (res) { let tempFilePath = res.tempFilePath; // 临时图片地址，可在放入图片src中使用 } }) } [代码] 原生小程序wxmp中使用 在项目设置中选择 [代码]使用npm模块[代码] [图片] 如果第一次使用npm模块，需要首先在根目录中[代码]npm init[代码], 之后再安装模块 [代码]npm i wxmp-qrcode[代码] 在工具中选择 [代码]构建npm[代码] [图片] index.wxml [代码]<view class="container"> <canvas id="{{canvasId}}" canvas-id="{{canvasId}}"></canvas> <button bindtap="creatQRCode"> 生成二维码 </button> </view> [代码] index.wxss [代码]canvas { border: 1rpx solid #eee; width: 400rpx; height: 400rpx; } button { margin-top: 100rpx; } [代码] index.js [代码]import QR from './qrcode' Page({ data: { canvasId: 'canvasId', QRdata: '你好 wxmp-qrcode' }, creatQRCode () { let str = this.data.QRdata let canvasId = this.data.canvasId QR.draw(str, canvasId) } }) [代码]

微信小程序两个view之间会有间隙<br /> 解决代码：在该图片的.wxss里加一句display: flex; 若图片是通过wxParse解析的，则在wxParse.wxss中找到.wxParse-img，加上display: flex; 原理：盒模型不同造成的 默认设置为标准盒模型，box-sizing:content-box，即采用标准模式解析计算，盒子的总宽度/高度=width/height+padding+border+margin；我们css里设置的宽高值只包括最中心的content。 当设置为box-sizing:border-box时，将采用怪异模式解析计算，盒子设置的总宽度/高度，盒子总宽度/高度=width/height + margin；我们css里设置的宽高值已经包括了content+padding+border。 display: flex;的作用就是让图片的盒模型使用怪异模式。 ios虚拟支付 ios不支持虚拟商品支付 在寻找答案中。。。 小程序checkbox调整大小 [代码].set_address checkbox{ transform: scale(0.6,0.6); vertical-align: middle; } [代码] 微信小程序中new Date()转换时间时间格式时IOS不兼容的问题 安卓手机开发手机和微信小程序编辑器测试都没有问题，唯独IOS获取的日期为不显示,原来IOS不识别2018-08-30这样的日期格式 [代码] let olddata = '2018-08-30 11:00:00'; olddata = olddata.replace(/-/g, '/'); [代码] 微信小程序弹出自定义模态框，禁止底部页面滚动事件 解决问题：添加自定义的模态框后，在上面的模态框上滑动，底部的页面也会跟着滑动<br /> 解决方案：只要在你的模态框上添加 catchtouchmove=‘true’ 注意事项：小程序编辑器中的手机模拟器看不出效果，必须使用真机测试！！！ [代码]<view class='invitation' wx:if="{{is_invitation}}" catchtouchmove='true'> <view class='invitation-bg' catchtap='closeModel'></view> <view class='invitation-main' style='padding: 53rpx 30rpx;background: #fff;box-sizing:border-box;'> // 模态框主体内容 </view> </view> [代码] 微信小程序之生成小程序码如何在开发版本调试 经过服务端的配置生成了小程序二维码之后，每次用手机一扫小程序二维码都会跳到手机已经发布的小程序中 解决方法： 1.把生成的小程序二维码保存到电脑中，然后打开开发工具 2.将编辑模式换成通过二维码编译 [图片] 微信小程序在input上放一个button点击问题 [图片] 目标描述: 点击搜索发送请求 问题描述: 点击没反应 问题原因: 搜索按钮定位在input框之上, 当我们点击的时候,input框一直是获取焦点状态,无法执行 取消事件 解决方法: 给input设置padding-right 等于取消按钮的宽度即可 微信小程序解决新发布版本，但有时候版本认为旧版本数据 目标描述: 解决新发布版本，但有时候版本认为旧版本数据 问题描述: 有时候小程序明明发布了旧版本，却发现有时候数据是旧版本的，或者有些操作没改 问题原因: 小程序本地有缓存，导致数据或者重新写的操作会报错 解决方法: 在app.js中执行一个更新函数，代码如下： [代码]// 用于检测版本更新 is_update() { console.log('已经进入更新函数') // 获取微信版本 const updateManager = wx.getUpdateManager() // 检查新版本 updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpdate) console.log(res) }) // 检测是否微信更新成功 console.log(updateManager) updateManager.onUpdateReady(function () { console.log('准备开始更新') wx.showToast({ title: "新版本已经准备好，即将重启应用", icon: 'none' }) // 0.5秒后重启应用 setTimeout(() => { updateManager.applyUpdate() }, 1000) }) updateManager.onUpdateFailed(function () { wx.showModal({ title: '更新提示', content: '新版本下载失败', showCancel: false }) }) } [代码] 在app.js的生命周期onLaunch执行这个函数

云开发·云调用生成小程序码 小程序云开发已经支持云调用，开放了很多接口，一直想要的获取小程序码也支持了。这下轻量的小程序也可以有自定义小程序码的功能。 1. 需求 获得一个带参数的小程序码，传播出去以后，用户扫码进入指定页面，根据参数做不同的处理。本文只讲小程序码生成、存储、展示部分。参数处理不多介绍，可以查看 项目代码 了解更多。 2. 开通云开发 新建小程序可以从开发工具的云开发模板初始化项目，根据云开发操作指引新建项目即可。 但是这里有个问题，已发布小程序的页面才能生成小程序码。如果现有的小程序没有开通云开发，需要做以下几步： 开发工具开通云开发，设定云开发的环境； 将原来的代码（除了[代码]project.config.json[代码]以外的所有文件）放到新建的 [代码]miniprogram[代码] 目录； 新增 [代码]cloudfunctions[代码] 目录； [代码]app.json[代码] 新增配置 [代码]"cloud": true[代码]； [代码]project.config.json[代码] 配置 [代码]"miniprogramRoot":"miniprogram/"[代码] 和 [代码]"cloudfunctionRoot":"cloudfunctions/"[代码]； 修改小程序基础库版本，最低要 2.3.0 [代码]"libVersion": "2.3.0"[代码]。 3. 生成小程序码 下面可以开始写代码开发了，开始之前，建议先看完官方教程。特别是开发工具的使用步骤，开发和调试时如果遇到奇怪的问题，可以尝试重启开发工具、重装开发工具，也可以去微信开放社区发帖。(重启和重装都是我在社区中发现的答案，能解决各种不应该存在的问题)。 3.1 准备文件 在 [代码]cloudfunctions[代码]目录右键新建Node.js云函数 [代码]getqr[代码]。 生成小程序码需要单独指定权限。在 [代码]getqr[代码] 目录新建 [代码]config.json[代码] ，里面写以下内容： [代码]{ "permissions": { "openapi": [ "wxacode.getUnlimited" ] } } [代码] 小程序码的获取方式有三种，这里只用到了接口 getUnlimited，选择这个接口的原因是漂亮的圆形小程序码，数量无限制。具体区别可以去 获取小程序码官方文档查看详情。 正常情况下，这个时候云函数可以部署测试了。如果遇到部署不成功、各种权限问题，可以尝试本地部署上传所有文件、重启试试。 3.2 生成小程序码 生成小程序码的代码如下，可以指定页面和页面参数 [代码]scene[代码]，还有小程序码的尺寸。 注意这里的 [代码]scene[代码] 有限制: 最大32个可见字符； 只支持数字，大小写英文以及部分特殊字符：[代码]!#$&'()*+,/:;=?@-._~[代码]； 注意参数格式：下面实例代码生成小程序码后，扫码获得 [代码]pages/demo/demo?scene=id%3D6[代码] 。 [代码]try { const result = await cloud.openapi.wxacode.getUnlimited({ page: 'pages/demo/demo', scene: 'id=6', width: 240, }) console.log(result) return result } catch (err) { console.log(err) return err } [代码] 直接调用，比服务端调用少了 access_token 参数。 3.3 上传到云存储 返回值中的 buffer 就是图片内容，直接上传到云存储： [代码]const uploadResult = await cloud.uploadFile({ cloudPath: 'shareqr/' + qr_name_hash + '.jpg', fileContent: result.buffer, }); [代码] 我在云存储新建了 [代码]shareqr[代码] 目录保存小程序码； 图片名根据参数取md5摘要； [代码]getUnlimited[代码] 返回的图像是 [代码]jpeg[代码] 格式，后缀硬编码写 [代码].jpg[代码]。 3.4 获取图片临时路径 直接上代码 [代码]getURLReault = await cloud.getTempFileURL({ fileList: [uploadResult.fileID] }); fileObj = getURLReault.fileList[0] return fileObj [代码] 3.5 直接从存云存储获取 生成过以后图片已经保存在云存储，用同样的参数第二次调用没必要再生成一次，去掉一次网络请求，可以节省不少时间。 前面说到文件名使用请求参数摘要，知道了目录和文件名，再加上文件bucket前缀就可以拼出来 [代码]fileID[代码]，用[代码]fileID[代码] 可以查询云存储的文件。 比如我刚刚生成的 fileID 是 [代码]cloud://dev-xxxx.8888-dev-xxxx/qr/44ea42f05091c3bec771123e6e8cd4c2.jpg[代码]， 前缀就是 [代码]cloud://dev-xxxx.8888-dev-xxxx/[代码]。再拼上目录、文件名、后缀就是 [代码]fileID[代码]。 注：此处的 [代码]fileID[代码]拼接方法并不是来自官方文档，只是在使用中发现这个前缀不会变。还需要官方解释说明[代码]fileID[代码]规则。 如果会改变，就需要再用云数据库存储[代码]fileID[代码]，更麻烦一些。 3.6 云函数完整代码 [代码]// 云函数入口文件 const cloud = require('wx-server-sdk'); const crypto = require('crypto'); const bucketPrefix = 'cloud://dev-xxxx.8888-idc-4d11a4-1257831628/qr/'; // env: 'dev-xxxx' // 云函数入口函数 exports.main = async (event, context) => { const full_path = event.page + '?' + event.scene; const qr_name_hash = crypto.createHash('md5').update(full_path).digest('hex'); const temp_id = bucketPrefix + qr_name_hash + '.jpg'; // return { // full_path, // qr_name_hash, // temp_id // } try { // 先尝试获取文件，存在就直接返回临时路径 let getURLReault = await cloud.getTempFileURL({ fileList: [temp_id] }); // return getURLReault; let fileObj = getURLReault.fileList[0]; if (fileObj.tempFileURL != '') { fileObj.fromCache = true; return fileObj; } // 生成小程序码 const wxacodeResult = await cloud.openapi.wxacode.getUnlimited({ scene: event.scene, page: event.page, width: 280 //二维码的宽度，单位 px，最小 280px，最大 1280px }) // return wxacodeResult; if (wxacodeResult.errCode != 0) { // 生成二维码失败，返回错误信息 return wxacodeResult; } // 上传到云存储 const uploadResult = await cloud.uploadFile({ cloudPath: 'qr/' + qr_name_hash + '.jpg', fileContent: wxacodeResult.buffer, }); // return uploadResult; if (!uploadResult.fileID) { //上传失败，返回错误信息 return uploadResult; } // 获取图片临时路径 getURLReault = await cloud.getTempFileURL({ fileList: [uploadResult.fileID] }); fileObj = getURLReault.fileList[0]; fileObj.fromCache = false; // 上传成功，获取文件临时url，返回临时路径的查询结果 return fileObj; } catch (err) { return err } } [代码] 4. 小程序页面调用 调用页面就比较简单了，在小程序新建一个 [代码]pages/share/share[代码] 在 [代码]onLoad[代码] 函数调用云函数。 [代码]// 使用前记得先初始化云函数，一版放到 app.js onLaunch() 中 // wx.cloud.init({env: 'dev-8888'}) wx.cloud.callFunction({ name: 'getqr', data: { page: 'pages/demo/demo', scene: 'id=6', } }).then(res => { console.log(res.result); if (res.result.status == 0) { _this.setData({ qr_url: res.result.tempFileURL }) }else{ wx.showToast({ icon: 'none', title: '调用失败', }) } }).catch(err => { console.error(err); wx.showToast({ icon: 'none', title: '调用失败', }) }) [代码] 至此完整的调用过程已经全部完成，详细代码可以到 项目代码 查看。 代码中还对入口页面和share页面的参数做了包装，云函数可以直接使用，小程序可以稍做修改适应自己业务。 写在最后 小程序云开发已经开放了很多功能，除了这次提到的生成小程序码，云调用还可以发送模板消息。有需要的开发者又一个理由可以快速上线新功能了。 云开发还开放了[代码]HTTP API[代码]，也就是用自己的服务器调用云函数。以前看完云开发介绍文章最大的疑问就是，你说的都很好，可是后台数据怎么管理呢？不能跟自己的服务器结合，只能放一些轻量的小程序。有了 [代码]HTTP API[代码] 以后就可以用自己的服务器做管理后台了。这时候你要问，都用上服务器了，还需要云开发做什么。首先，云开发免费；其次，免费功能已经够强，就差不能做Web管理后台了；最后，获取access_token（小程序及小游戏调用不要求IP地址在白名单内。）