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

微信小程序支持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
• 支持生產環境打包