[开盖即食]小程序那点事(2)--- 各种格式文件的存储分享和NPM引入那些坑
发布于 2 年前 作者 emo 2823 次浏览 来自 分享

一、如何下载和存储ZIP,RAR,PSB等各类文件

存储非图片、PDF文件,对于很多IOS用户是很痛苦的时候,但是可以通过文件分享的连招来解决存储的文件,微信自带的文件助手就是一个很方便的传输工具。

<code>wx.shareFileMessage</code> 必须交互后才可以触发

shareBtn() {
        wx.downloadFile({
            url: "https://sk2.nosdn.dd996.net/1/test/1.rar", // 下载url
            success(res) {
                // 下载完成后转发
                wx.shareFileMessage({
                    filePath: res.tempFilePath,
                    fileName: "dayday996.rar",
                    success() { },
                    fail: console.error,
                })
            },
            fail: console.error,
        })
    },

利用分享传输/存储文件的好处

  1. 如果你是IOS用户,可以方便把文件传给对方
  2. 利用微信自带的文件助手,还能将文件同步到电脑中
  3. 避免临时存储失效的问题

二、各种外面框架的引入方法

这里拿 weui 举例

使用 useExtendedLib的方式

官方文档:https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#useExtendedLib

在app.json中加入

{
  "useExtendedLib": {
    "kbone": true,
    "weui": true
  }
}

<font color="#dd0000"> 注意这里 不需要 多此一举在wxss中添加 </font>

@import 'weui-miniprogram/weui-wxss/dist/style/weui.wxss';

使用 NPM的引入方式

这种方式适合需要其他开源功能模块的项目,也挺方便,不过坑也挺多的,有些路径需要修改,不能直接拿官方文档来用,拿weui这个项目举例

1、命令行:

npm init
npm install --save weui-miniprogram

2、配置package.config.json

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

3、配置npm,并__重启IDE工具__(注意啊,一定要重启,不然会有很多妖怪的事情)

4、app.wxss引入

@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

5、在page对应的json中引入,注意路径,根据需要修改

{
	"usingComponents": {
        "mp-dialog": "../miniprogram_npm/weui-miniprogram/dialog/dialog"
    }
}

6、对应的html部分

<mp-dialog title="前端智酷" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>前端智酷</view>
</mp-dialog>

一些错误

1、路径问题


2、没有配置npm 初始化

npm官方文档:
https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/npm.html

weui-wxss的github地址:
https://github.com/Tencent/weui-wxss

如有疑问请留言~

觉得有用,请点个赞哦,我会继续努力分享有用的实战内容~

1 回复

路径问题怎么办

回到顶部