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

Posted 2022-08-22 lightsong

微信小程序支持npm

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

 

微信小程序支持npm

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

从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 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

2. 在页面的 json 配置文件中添加 recycle-view 和 recycle-item 自定义组件的配置

     "usingComponents": 
       "recycle-view": "miniprogram-recycle-view/recycle-view",
       "recycle-item": "miniprogram-recycle-view/recycle-item"
     
   

3. 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
• 支持生产环境打包