原生微信小程序脚手架(支持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
  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代码检查
  • 使用命令行快速创建pagetemplatecomponent
  • 支持生产环境打包

原文地址:https://www.cnblogs.com/lightsong/p/11405652.html

时间: 2024-09-28 09:01:54

原生微信小程序脚手架(支持npm)的相关文章

微信小程序脚手架及html转译GUI工具

微信小程序出现引发了很多讨论,许多开发者都跃跃欲试尝试了小程序的开发.它重新定义了自身的一套开发规范,对于现有的html页面是不支持了. 为此我们设想了一套方案,怎么最快速的把现有的开发流接入到小程序中,并能快速的修改现有html项目以符合微信小程序的规范?于是写了一套html暴力转译成wxml的方案,以及搭配了初始模板的脚手架.结构沿用feWorkflow,大部分改动是针对目录的gulp工作流. 1. 脚手架 小程序有一套默认的文件结构,根目录下必须存放有以下3个文件: . ├──app.js

原生微信小程序数据渲染

一直在写vue,第一次接触微信小程序,还是原生,最开始做的时候真的很闹心啊啊啊啊啊啊啊啊啊啊啊啊!!所以最近大概更新的都是微信小程序原生的内容了~~么么哒!!一定会继续努力的!!tips:在小程序项目中,app.json文件里的 { //页面配置路径 "pages":[ "page/index/index", //默认首页 "page/index/logs", ] } 正题:微信小程序原生数据渲染条件渲染:wx:if wx:elif wx:els

原生微信小程序 wepy mpvue对比

小程序支持的是 WXML + WXSS + JS 这样的组合,所以,wepy 和 mpvue 都是将文件构建到 dist 目录,转换为小程序支持的文件类型,然后将微信开发者工具指向 dist 目录下,进行调试开发,并且两者都提供了热更新. 原文地址:https://www.cnblogs.com/ceceliahappycoding/p/10952092.html

微信小程序原生开发简介

简介: 总结: 1. 逻辑层使用js引擎,视图层使用webview渲染 2. 微信小程序已经支持了绝大部分的 ES6 API 3. 可以自动补全css的兼容语法 文档:https://developers.weixin.qq.com/miniprogram/dev/framework/details.html 一. 设计 总结: 设计图750px, 1px =  1rpx,方便计算 二. 小程序页面结构 wxml: 功能类似html,描述节点,但小程序的 WXML 用的标签是 view, but

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

使用gulp构建微信小程序工作流

前言 刚入门微信小程序的时候,一切都基于微信web开发者工具,没有使用其他框架,也没有工程化的概念.当时做的项目都比较简单,单单用微信web开发者工具倒也得心应手.学了些东西后,就按捺不住地想跳出原生工具的条条框框,把近些日子学的东西都拿出来熬一熬. 已有的一个小程序项目使用了github上一个使用webpack.babel.sass开发的小程序脚手架(wxapp-boilerplate),我需要在不变动原有项目代码的基础上,使用gulp来重构项目的工作流. 使用体验:使用vscode配合各种插

微信小程序底层实现原理

一. wa的运行环境 根据微信官方的说明,wa的运行环境有3个平台,IOS的webkit(苹果开源的浏览器内核),Android的X5(QQ浏览器内核),开发时用的nw.js(C++实现的web转桌面应用): 二.为什么wa不直接运行在浏览器(webview)中,而要绕过浏览器直接调用内核呢? 因为运行在浏览器中的webapp是做不了监控的,而wa的表现是半native app,半web app,而native app与web app和一个很重要的区别就是native app有自己的生命周期,在

自定义 radio 样式(微信小程序)

在一般 web 开发中,常用的思路有两种(纯CSS): 1. 隐藏原生 radio,使用 :checked 选择器和 + 兄弟选择器,给兄弟元素 label 添加伪元素样式(::before / ::after) 2. 还是隐藏原生 radio,使用 :checked 选择器和 + 兄弟选择器,不过是给 label 加一个背景图片(雪碧图),控制 background-position 来实现 传送门:http://ife.baidu.com/note/detail/id/28 但是,微信小程序

Taro开发微信小程序

Taro开发微信小程序 https://www.cnblogs.com/rynxiao/p/9230237.html 了解Taro 听说Taro是从几个星期前开始的,在一次饭桌上,一个小伙伴说:"Hey, 你听说了Taro么,听说只需要写一套程序就可以生成H5,小程序以及RN的代码模板,并且类似于React的语法.""哦?还有这么好的事,赶紧研究一下." Taro初体验 去官网,Github了解了一下,Taro是由京东·凹凸实验室团队开发的,在掘金上看到他们的发稿,