微信小程序使用第三方包

1、初始化项目

npm init 

2、安装依赖包( 以vant webapp 为例 )

npm i vant-weapp -S --production

3、微信开发者工具配置

1、打开 详情 -- 选中 使用npm模板2、左上角 -- 工具 -- 构建npm 

( 之后会提示 完成构建 )

4、问题

若出现这种错误

VM6419:5 ./miniprogram_npm/[email protected]@vant-weapp/action-sheet/index.wxml
../wxs/utils.wxs not found from ./miniprogram_npm/[email protected]@vant-weapp/action-sheet/index.wxml
> 1 | <wxs src="../wxs/utils.wxs" module="utils" />
    | ^
  2 |
  3 | <van-popup
  4 |   show="{{ show }}"

解决: 

https://github.com/youzan/vant-weapp  克隆后,复制dist文件夹中所有内容,替换掉 miniprogram_npm下 vant-weapp 里所有内容即可

原因: 

未知原因

5、使用, 以按钮为例

// app.json 配置如下

"usingComponents": {
    "van-button": "../miniprogram_npm/vant-weapp/button"
  }

// wxml

  <van-button type="primary">按钮</van-button>

原文地址:https://www.cnblogs.com/-roc/p/12149155.html

时间: 2024-10-31 02:45:49

微信小程序使用第三方包的相关文章

微信小程序使用npm包步骤

这里以npm引入小程序官方UI组件库weui-miniprogram为例 1.在小程序根目录内,初始化npm(官方文档上是没写出这一步,这里做个补充) npm init 2.在小程序中执行命令安装 npm 包(这里使用了weui-miniprogram): npm install --save weui-miniprogram 3.在微信开发者工具中的菜单栏:工具 --> 构建 npm (这里记得先安装 npm 包,即步骤2): 完成构建后可以在目录树里看到了miniprogram_npm以及里

微信小程序-分包 -每包2M

限制在2M以内.如果超过2M,可以通过分包加载实现,在app.json中配置即可, 小程序划分成不同的子包,在构建时打包成不同的分包,用户在使用时按需进行加载. 在构建小程序分包项目时,构建会输出一个或多个分包.每个使用分包小程序必定含有一个主包.所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本:而分包则是根据开发者的配置进行划分. 在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再

微信小程序使用第三方组件库

使用vant weapp来快速构建小程序 1.首先在项目文件夹下使用npm init 生成一个package.json的配置文件 2.然后输入组件提供的快速初始化的命令 npm i vant-weapp -S --production 3.工具---构建npm 4.在最右边详情里勾选上使用npm模块 5.在需要引用组件库的页面json文件里,添加:"usingComponents": { "van-button": "/path/to/vant-weapp

微信小程序免费SSL证书https、TLS版本问题的解决方案

微信小程序与第三方服务器通讯的域名5个必要条件 1.一个已备案的域名,不是localhost.也不是127.0.0.1,域名不能加端口 2.加ssl证书,也就是https://~~~ 4.HTTPS 服务器的 TLS 版本支持1.2及以下版本,一般就是1.0.1.1.1.2要同时支持这三个版本,一个也不能少,要不然就会出现下面这种情况 5.微信小程序后台加上合法域名设置(一个月内改的次数是有限的,且行且珍惜)如下图 以上5个条件,必需全满足,要不然你手机预览的时候就会发现通讯不了~~~ 另外说一

微信小程序学习 动手撸一个校园网小程序

动手撸一个校园网微信小程序 高考完毕,想必广大学子和家长们都在忙着查询各所高校的信息,刚好上手微信小程序,当练手也当为自己的学校做点宣传,便当即撸了一个校园网微信小程序. 效果预览 源码地址:Github??求你的小星星- 准备工作 微信小程序开发者工具:腾讯开放了小程序个人开发平台,只需要一个微信号就可以成为小程序开发者了. 微信小程序设计指南:由于小程序是一个平台,所以平台上的开发者必须要遵守规范. ?easy-mock:使用easy-mock模拟后端数据,后面会简单介绍配置. 七牛云:使用

微信小程序 免费SSL证书https、TLS版本问题的解决办法

这篇文章主要介绍了微信小程序 免费SSL证书https.TLS版本问题的解决办法的相关资料,需要的朋友可以参考下 微信小程序 免费SSL证书https.TLS版本问题的解决办法 微信小程序与第三方服务器通讯的域名5个必要条件 1.一个已备案的域名,不是localhost.也不是127.0.0.1,域名不能加端口 2.加ssl证书,也就是https://~~~ 4.HTTPS 服务器的 TLS 版本支持1.2及以下版本,一般就是1.0.1.1.1.2要同时支持这三个版本,一个也不能少,要不然就会出

想做微信小程序第三方代理,各位觉得一键生成平台能赚到钱吗?

这几年生意不景气,这是很多人的共识.从2009年开始,各种专家就判断"明年经济是最差的一年."然后,这个明年,一直"明"到了2018年,到最后,我们发现,经济就没好过,一年比一年差. 工厂倒闭.商店关门.电商企业倒闭:虚拟经济都是泡沫,实体经济都是累赘:产品越来越难卖.消费者个性化需求越来越多,售后体验和服务要求越来越高--实体店倒闭潮,这几个词,已经在新闻上被用了好几年. 一边是马云的搞的电商,淘宝,打价格战,压低利润空间,一边是房地产飙升,房租涨涨涨~好不容易出

微信小程序编译包的获取与解压还原1——在手机中获取小程序编译包wxapkg

准备工作: 微信关注需要下载编译包的小程序,然后点进去看一下,微信就会自动下载相应的编译包到手机上了. 获取小程序编译包: 据说root手机可以直接在手机的文件管理中查找wxapkg文件,自己尝试了下,无法通过搜索查找到,对应的文件夹路径也找不到相关文件,所以这里就采用比较通用的方法来获取了. 大部分智能手机都有备份功能,这样就可以在手机重装系统或恢复出厂设置之后快速恢复手机应用和数据.对的,就是这个手机备份功能,当你对一个应用进行备份的时候,除了应用本身,应用的数据也会直接被备份下来.微信也不

记录如何发布微信小程序npm包

1.初始化项目 在项目根目录下使用一下命令 npm init 这时终端会提示你输入诸如包名,版本号等信息,如下: 2.新建src文件夹 新建src文件夹之后,把微信小程序自定义组件的index.js.index.wxss.index.json.index.wxml四个文件都拉到src文件夹里面即可.文件目录如下图: 3.修改package.json文件 在 package.json 文件中新增一个 miniprogram 字段,指向src文件即可.这是官方文档发布npm的约束条件.npm支持 微