原生微信小程序脚手架（支持npm）

古城微笑少年丶 2023-08-17 15:34 149阅读 0赞

# 微信小程序支持npm #

为了支持生态扩展，社区贡献者可以提供更加丰富的功能，已经支持了第三方小程序开发功能，见如下地址。

微信小程序支持npm

https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html

> 从小程序基础库版本 [2.2.1][] 或以上、及[开发者工具][Link 1] 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。
> 
> 此文档要求开发者们对 npm 有一定的了解，因此不会再去介绍 npm 的基本功能。如若之前未接触过 npm，请翻阅[官方 npm 文档][npm]进行学习。
> 
> ## ##

只要开发符合小程序的规范， 就可以通过npm安装并使用。

例如小程序IO接口库  flyio

https://www.npmjs.com/package/flyio

扩展组件见官方组件库：

https://github.com/wechat-miniprogram

例如：

https://github.com/wechat-miniprogram/recycle-view

> ## 使用方法 ##
> 
> 1.  安装组件
> 
>     npm install --save miniprogram-recycle-view
> 
> 1.  在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置
>     
>         {
>           "usingComponents": { "recycle-view": "miniprogram-recycle-view/recycle-view", "recycle-item": "miniprogram-recycle-view/recycle-item" } }
> 2.  WXML 文件中引用 recycle-view
>     
>         <recycle-view batch="{ {batchSetRecycleData}}" id="recycleId"> <view slot="before">长列表前面的内容</view> <recycle-item wx:for="{ {recycleList}}" wx:key="id"> <view> <image style='width:80px;height:80px;float:left;' src="{ {item.image_url}}"></image> { {item.idx+1}}. { {item.title}} </view> </recycle-item> <view slot="after">长列表后面的内容</view> </recycle-view>

# 脚手架推荐 #

为了方便开发者构建带npm的工程，开源社区有提供， 使用者也可以自行修改。gulp配置文件比较简单。

https://github.com/fanqingsong/wx-miniprogram-boilerplate

> ### 特性 ###
> 
>  *  基于`gulp+less`构建的微信小程序工程项目
>  *  项目图片自动压缩
>  *  ESLint代码检查
>  *  使用命令行快速创建`page`、`template`和`component`
>  *  支持生产环境打包

转载于:https://www.cnblogs.com/lightsong/p/11405652.html

[2.2.1]: https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html
[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[npm]: https://docs.npmjs.com/getting-started/what-is-npm