微信小程序使用npm构建


1.在微信小程序中使用Vant Weap  (http://vant-contrib.gitee.io/vant-weapp/#/quickstart

 

npm init -y # 初始化npm (必须先初始,不然先构建不成功   -y全是yes)

npm i @vant/weapp -S --production      (安装--production 目的是减少安装一些业务无关的包,从而减少整个小程序的大小。)

2.微信开发者工具中设置

 

 

3.必须在小程序根目录中创建

此处并没有强制要求 node_modules 必须在小程序根目录下(即 project.config.js 中的 miniprogramRoot字段),也可以存在于小程序根目录下的各个子目录中。 但是不允许 node_modules 在小程序根目录外。

所以:npm包应放在小程序根目录下,而我搞混了小程序目录和项目根目录
  小程序根目录(为 /project.config.json 中 miniprogramRoot字段指定)
  项目根目录(为 / )是两个不同位置

 构建成功:

 

 

 4.如何引入

// 全局引入app.json 或 单个文件内的xx.json文件
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}


1:js中引入npm包

 
 
const myPackage = require( 'packageName' )
const packageOther = require( 'packageName/other' )
 
 

2:使用 npm 包中的自定义组件

 
 

在json文件的usingComponents参数加上:

 
 
{
  "usingComponents" : {
   "myPackage" "packageName" ,
   "package-other" "packageName/other"
  }
}
 
 

使用npm实例:

 
 

1:js中引入npm包:

 
 

此例使用js-base64包实现,在你需要使用此包的js文件中引入npm包

 
 
const jsBase64 = require( 'js-base64' );
 
 

使用:

 
 
console.log(jsBase64.Base64.encode( "haha" )); //编码
console.log(jsBase64.Base64.decode( "aGFoYQ==" )); //解码
 

 

转:https://segmentfault.com/a/1190000021349598?utm_source=tag-newest

转:https://www.jb51.net/article/167545.htm


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM