开发中复用的代码通常会封装成npm包，发布到npm源，项目中再依赖这个包。如果包的源码改动，需要先发布到npm上再使用项目更新依赖。本文则是不发布到外网，只在本地开发。包的源码通过内网的svn或者git进行同步。并且这个npm也是直接用小程序开发工具进行开发，方便包里的组件修改完之后，在这个包自身的工程里编写示例代码查看效果。
创建npm项目
- 新建一个小程序，根目录通过命令创建package.json目的是可以设置自己的模块名称，版本，作者等一系列信息。
npm init 需要一步步指定参数，加上[-y]使用默认参数快捷生成
npm init -y
生成的package.json文件:
{
"name": "wx-js-demo",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {}
}
- 通常npm包需要在根目录下创建入口文件（package.json中指定的main字段），如index.js，可自定义名字。但是小程序有自己的规则，这步可以不用。
-
小程序npm约束。在package.json里添加miniprogram 字段指定对外暴露的资源目录，小程序工具构建npm后才能使用这个目录下的代码。如图dist目录下代表该npm对外可见的内容
image.png
使用本地npm项目
- 再建一个实际开发的项目，同样执行第一步生产package.json文件。在dependencies依赖字段指定引用的npm项目，下面的代码分别举例本地和远程。其中本地的路径使用file开头加上npm项目的路径，因为我直接放在上一层目录，所以值就是"../"开头
{
"name": "wx-js-demo",
...
"dependencies": {
"sino-miniprogram": "file:../sino-miniprogram",
"weui-miniprogram": "^1.0.3"
}
}
- 安装npm。运行npm install 命令安装这些依赖，生成node_modules目录。
-
构建npm。小程序开发工具中，菜单栏里找到’构建npm‘功能，生成小程序平台实际使用的目录miniprogram_npm，如图所示。在目录结构里可以看出引用的本地npm多了个箭头图标。
image.png
- 项目中引入npm里的组件。
在app.json或者某个页面的json文件里添加usingComponents字段
{
"pages": [
"pages/index/index"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"style": "v2",
"sitemapLocation": "sitemap.json",
"usingComponents": {
"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog",
"sino-list-box": "/miniprogram_npm/sino-miniprogram/listBox/listBox"
}
}
样式也是同样的道理。在app.wxss或者页面的wxss文件中import文件目录
/**app.wxss**/
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';
@import '/miniprogram_npm/sino-miniprogram/sino-style/snui.wxss';
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
网友评论