需求：
小程序需要制作分享海報頁面，能夠保存圖片到手機相冊，然后分享到朋友圈
小程序的canvas可以實現，但是學習成本大，排版麻煩
所以打算使用小程序擴展組件wxml-to-canvas
原因：
由於項目使用了uniapp開發，跟小程序擴展組件的安裝邏輯沖突
正常原生小程序開發，如果要增加擴展組件wxml-to-canvas
只需要安裝
npm install --save wxml-to-canvas
后面再增加JSON組件聲明，wxml引入組件即可
執行之后，會在項目根目錄下創建node_modules目錄，但是這個node_modules 目錄不會參與小程序編譯、上傳和打包，所以要通過開發者工具“工具-構建 npm”，這樣就會在node_modules 的同級目錄下會生成一個 miniprogram_npm 目錄，里面會存放構建打包后的 npm 包，也就是小程序真正使用的 npm 包。
但是uniapp開發的小程序不一樣，首先uniapp項目里會有自己的package.json文件，安裝npm install之后，會在項目根目錄生成一個node_modules目錄，里面是所有第三方的安裝包，包括uniapp的所有包，核心、編譯、解析等等。
經過uniapp打包之后，生成的原生小程序項目（也就是我們最終給開發者工具使用的項目包），里面是不包含node_modules目錄，也就沒辦法通過開發者工具“工具-構建 npm”生成miniprogram_npm 目錄
所以解決方案是
下載官方wxml-to-canvas的代碼片段
我們在目錄里找到miniprogram_npm目錄，里面包含三個已經打包好的文件，分別是
eventemitter3、widget-ui、wxml-to-canvas
我們將其中兩個個文件
widget-ui、wxml-to-canvas
拷貝下來，
放到我們的uniapp項目里
widget-ui文件放到wxcomponents/widget-ui/miniprogram_npm/widget-ui
wxml-to-canvas文件放到wxcomponents/wxml-to-canvas/miniprogram_npm/wxml-to-canvas
最終形成的文件格式如下：
然后在全局引入wxml-to-canvas
"usingComponents": { "wxml-to-canvas": "/wxcomponents/wxml-to-canvas/miniprogram_npm/wxml-to-canvas/index", }
另外需要修改wxml-to-canvas/index.js
module.exports = require("widget-ui");
改為
module.exports = require("../../../widget-ui/miniprogram_npm/widget-ui/index");
剩下的就是按照官方api進行開發就可以了
文檔：
加我的微信號“13368375969”
免費送你珍藏的前后端視頻學習教程
一起學習交流