微信小程序单页开发之 min-cli
转载自:https://www.diycode.cc/projects/meili/min-cli?sync=1
Min Cli
令小程序组件的开发和使用变得愉悦
○ 最佳实践
MinUI,是基于 Min 平台产出的一套 UI 组件库,同时也是蘑菇街小程序在应用的 UI 组件库。通过下面的小程序二维码,可以在手机中体验 MinUI(微信基础库版本 1.6.3 以上支持):
○ 环境安装
$ npm install -g @mindev/min-cli
○ 组件开发
☞ 初始化组件开发环境
$ cd ~/your-custom-project
$ min init# 创建完毕后,执行下 $ min dev,生成 dist/ 目录。
# 在 "微信开发者工具" 中新建一个小程序项目,项目目录指向 dist/。如此,组件就能在开发者工具中进行预览了。
☞ 新建组件
$ min new [name]name]
☞ 调试组件
通过设置一个组件名 *name,来开启组件的调试。任何组件的改动,都会触发实时编译,并在 "微信开发者" 工具中显示改动后的效果。
$ min dev [name]name]
# 支持英文逗号分隔,来同时调试多个组件
$ min dev [name1],[name2]name2]# 无组件名,则监听整个工程环境的改动
$ min devmin devd
☞ 发布组件
发布后的组件即为一个随时可用的 npm 包:
# 例如发布 loading 组件
$ cd ~/your-weapp-project/packages/wxc-loading
$ npm publish# 发布 scope 的 npm 包到外网,需带上 `--access=public`
$ npm publish --access=public
其实也可以采用
$ min publish
方法发布组件,支持单个发布和批量发布,支持自动升级版本号、远程仓库更新推送、自动打 tag 等。只不过某些情况下还有点小坑,最近几天会解决。如果您看到本文档时这段话还存在,可以先选择上面的 npm publish 方式发布 :p
○ 组件应用
☞ 安装组件
在小程序项目中安装一个组件,这里用 MinUI 的 loading 和 toast 组件举例:
$ cd ~/your-weapp-project
$ min install @minui/wxc-loading
批量安装:
$ min install @minui/wxc-loading @minui/wxc-tast
注:通过 min install
安装组件NPM包后同 npm install 一样放入到 node_modules 目录下,此时cli会将其进行编译并保存到小程序开发的目录下,默认在 dist/packages
目录下,用户可以进行自定义设置,使用姿势参考如下:
在 ~/you-weapp-project 目录下,有个 min.config.json 配置文件,如果不存在将其创建
{"npm": {"dest": "custom-path"}
}
☞ 使用组件
按照微信小程序组件化文档所示,引入组件并使用即可。
使用已注册的自定义组件前,首先要在页面的 json
文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:
{"usingComponents": {"component-tag-name": "path/to/the/custom/component"}
}
注:在不同场景下用户提供的自定义组件文件路径存在区别。场景1)在已有的小程序应用里使用自定义组件,用户提供的文件路径必须是相对于当前文件,并指向到 min install 组件编译后的保存路径,上面的演示代码所示;场景2)通过 min init 创建小程序应用,用户提供的文件路径可以是场景1的使用姿势,也可以是一个组件NPM包名称,在 min dev 构建过程中会将其更改为NPM包编译后的保存路径,这里用 MinUI 的 loading 组件举例
{"usingComponents": {"wxc-loading": "@minui/wxc-loading"}
}
这样,在页面的 wxml
中就可以像使用内置组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。
代码示例:
<view><!-- 以下是对一个自定义组件的引用 --><component-tag-name inner-text="Some text"></component-tag-name>
</view>
自定义组件的 wxml
节点结构在与数据结合之后,将被插入到引用位置内。
☞ 更新组件
# 全部更新
$ min update# 选择性更新
$ min update @minui/wxc-loading @minui/wxc-tast
○ 工程说明(可选阅读)
☞ 关于单文件
Min 采用单文件的方式来开发组件,后缀为 .wxc
,即 weixin component 的简写。
采用单文件的方式开发一个组件,是因为通过 Min 提供的插件化能力,在编译环节可以做一些渐进增强的事情。
同理,Min 还提供了 .wxp
和 .wxa
,来为 page 和 app 的开发提供一些额外的赋能。如果您已经在本地尝试基于 Min 的开发,就会发现本地的组件开发环境这个小程序,就是基于 .wxp 和 .wxa 实现的。
☞ 关于结构
组件工程结构
- /- dist // 打包目录,在微信开发者工具中添加这个目录来运行项目- src- packages // 组件源码- loading // loading 组件源码- src- index.wxc // 组件单文件- .npmignore- package.json- README.md- LICENSE- ...- pages // 组件 Demo 示例- loading // loading 组件示例- demos- demo-default.wxc // 一个 demo 示例,在 index.wxp 中引入- ...- docs // 组件文档- index.wxp // demo 页- ...
*.wxc 组件结构
<template><view class="loading"><view>Loading Component</view></view>
</template><script>export default {config: { ... },properties: {isShow: {type: Boolean,value: false}},data: { }}
</script><style>.loading { }
</style>
*.wxp 页面结构
<template><view class="loading"><wxc-loading is-show="{{true}}"></wxc-loading></view>
</template><script>export default {config: {navigationBarTitleText: 'Loading',usingComponents: {'wxc-loading': '@minui/wxc-loading'}},data: {}}
</script><style>.loading { }
</style>
*.wxa 文件结构
<!-- *.wxa 单文件里的 template 模块定义为全局公共模板概念,编译后会应用到所有的 .wxp 页面 -->
<template><view><wxc-head></wxc-head><!-- wxp template --><page></page><wxc-foot></wxc-foot></view>
</template><script>export default {config: {usingComponents: {'wxc-head': 'components/head','wxc-foot': 'components/foot'},pages: [],window: { ... },...},globalData: { },onLaunch: function () { },onShow: function () { },onHide: function () { }}
</script><style>
</style>
☞ 关于编译
编译策略
- 从
src
源码目录下的文件编译到dist
目录; - 非单文件的文件在编译期间会自动从
src
关联到dist
目录下; - 单文件
.wxc
和.wxp
格式,编译成小程序原生的.wxml
、.wxss
、.js
、.json
多文件
<template>
<!-- template模块编译后,提取到 *.wxml 文件里 -->
</template><script>
// script模块编译后,将逻辑部分的代码提取到 *.js,将配置部分的代码 *.json 文件里
</script><style>
/* style模块编译后,提取到 *.wxss 文件里 */
</style>
脚本的编译
script 模块导出一个简单的对象,不同扩展的单文件在编译阶段会将在 export default
导出对象的外部嵌套 Component
or Page
or App
构造器
单文件模块源码结构
<script>export default {...}
</script>
*.wxc 文件的script
模块编译后生成 *.js 文件结构
export default Component({...})
*.wxp 文件的script
模块编译后生成 *.js 文件结构
export default Page({...})
*.wxa 文件的script
模块编译后生成 *.js 文件结构
export default App({...})
样式的编译
- 支持
px单位
转换,1px 自动转成 1rpx - 支持
rem单位
转换,1rem 自动转成 100rpx - 支持
bem
命名方法书写,分别@b、@e、@m定义,前提在style标签上增加lang="pcss" 就能使用此能力了。 - 支持 @import 文件动态编译,非
*.wxss
后缀的文件经过预编译插件生成.wxss
文件 - 支持 less 和 postcss 预编译插件
// 源码
<style>
@import './a.wxss';
@import './b.pcss';
@import './c.less';.search {border: 1px solid #ddd;width: 1rem;
}
@b search {padding: 0;@e submit{padding: 1rem;@m button{border: 1px solid #ccc;}}
}
</style>// 编译后
<style>
@import './a.wxss';
@import './b.wxss';
@import './c.wxss';.search {border: 1rpx solid #ddd;width: 100rpx;
}
search {padding: 0;
}
.search__submit {padding: 100rpx;
}
.search__submit--button {border: 1rpx solid #ccc;
}
</style>
配置的编译
小程序原生的 *.json
配置项,放在单文件 <script></script>
模块中的 config
字段里:
<!--.wxc 组件文件的 script 模块 -->
<script>export default {// 组件的配置config: {component: true,usingComponents: {}}}
</script>
<!--.wxp 页面文件的 script 模块 -->
<script>
export default {// 页面的配置config: {navigationBarTitleText: 'Title',usingComponents: {'example': '@minui/wxc-example','example-demo': '@minui/wxc-example-demo','wxc-loading': '@minui/wxc-loading'}}
}
</script>
<!--.wxa 应用文件的 script 模块-->
<script>export default {// 应用的配置config: {pages: [],window: {backgroundTextStyle: 'dark',backgroundColor: '#efefef',navigationBarBackgroundColor: '#ffffff',navigationBarTitleText: 'MinUI',navigationBarTextStyle: 'black'},networkTimeout: {request: 10000}}}
</script>
☞ 关于编辑器的支持
VS Code 代码高亮
- 在 Code 里先安装 Vue 的语法高亮插件 Vetur
- 打开任意
.wxc
或.wxp
文件 - 点击右下角的选择语言模式,默认为纯文本
- 在弹出的窗口中选择
.wxc
或.wxp
的配置文件关联... - 在选择要与
.wxc
或.wxp
关联的语言模式 中选择 Vue
Sublime 代码高亮
- 文件后缀为
.wxc
或.wxp
,可共用vue高亮,但需要手动安装。 - 打开 Sublime > Preferences > Browse Packages.. 进入用户包文件夹。
- 在此文件夹下打开 cmd,运行
git clone git@github.com:vuejs/vue-syntax-highlight.git
,无 git 用户可以直接下载 zip包,解压至当前文件夹。 - 关闭
.wxc
或.wxp
文件重新打开即可高亮。
WebStorm 代码高亮
- 打开 Preferences,搜索 Plugins,搜索 Vue.js 插件并安装。
- 打开 Preferences,搜索 File Types,找到 Vue.js Template,在 Registered Patterns 添加
*.wxc
或*.wxp
,即可高亮。
Atom 代码高亮
- 在 Atom 里先安装 vue 的语法高亮 - language-vue,如装过就忽略此步。
- 打开 Atom > Config 菜单。在 core 键下添加:
customFileTypes:"text.html.vue": ["wxc","wxp"]
VIM 代码高亮
- 安装 vue 的 VIM 高亮插件,如 posva/vim-vue。
- 配置
.wxc
或.wxp
后缀名的文件使用 vue 语法高亮
au BufRead,BufNewFile *.wxc setlocal filetype=vue.html.javascript.cssau BufRead,BufNewFile *.wxp setlocal filetype=vue.html.javascript.css
微信小程序单页开发之 min-cli相关推荐
- 超市微信小程序怎么做_微信小程序便利店怎么开?便利店和百货超市怎么开发小程序?...
微信小程序便利店怎么开?便利店和百货超市怎么开发小程序?下面跟随小编一起来看看吧! 现在很多商家还在小程序是什么,流行的说法是开店到微信,创建一个互联网离线模式,将近五公里的小程序显示出来,只要别人用 ...
- 小程序+单页+需要服务器,小程序单页设计
小程序单页设计 内容精选 换一换 I/O分析以存储块设备为分析对象,分析得出块设备的I/O操作次数.I/O数据大小.I/O队列深度.I/O操作时延等性能数据,并关联到造成这些I/O性能数据的具体I/O ...
- PHP更新小程序,微信小程序Tab页切换更新数据详细介绍
这篇文章主要介绍了微信小程序 Tab页切换更新数据的相关资料,需要的朋友可以参考下 微信小程序 Tab页切换更新数据 微信小程序还处于内测阶段,最不方便的莫过于官方在不停的更新,前几天写的功能隔个几天 ...
- Android 仿微信小程序开屏页加载loading
Android 仿微信小程序开屏页加载loading 废话不多说,先上效果图~ 首先就是底层有一个灰色的圆,然后按照圆形的轨迹进行绘制. 啊~说那么多也没用,还是直接上代码吧,哈哈哈哈 绘制底部圆形及 ...
- 分享一个微信小程序编辑页面的WXML模板
分享一个微信小程序编辑页面的WXML模板 最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...
- 微信小程序:二开版优化新紫色UI云开发新款壁纸小程序源码
这是一款由旧版https://airymz.com/3387.html进行优化二开的一个新版本 本壁纸表情包头像小程序采用(dcloud云开发)所以无需服务器与域名 无需服务器.无需域名.云开发直接上 ...
- 微信小程序登录页验证与页面跳转
微信小程序登录页实现验证登录和页面跳转 利用js实现验证登录和页面跳转,开发工具是微信开发者工具. wxml部分 登录页面的代码,需要再创建一个主页. <view class="wel ...
- 微信小程序开发开篇词 自顶向下,云端赋能:小程序的高效开发之道
你好,我是周俊鹏,做前端开发已经 6 年多了,目前我就职于腾讯云 TCB 团队,负责腾讯云开发 CloudBase 前端相关的研发和生态建设工作.我可以说是第一批次的微信小程序开发者,2016 年 9 ...
- 微信小程序列表页分页加载功能
微信小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面. 代码如下: wxml代码 ...
最新文章
- 如何搭建一个拖垮公司的技术架构?
- Jmeter之创建Kafka生产者和消费者进行性能测试
- python第三天(dictionary应用)转
- In-Sat:今年全球VoIP用户将达5500万
- Go的GAPATH详解
- 删除用户的命令是什么mysql_mysql新添加用户与删除用户具体操作命令_MySQL
- 【资料整理】proftpd安装配置
- 【思考】一次交付项目小结
- argv python 提示输入_Python解释器
- springboot+前端实现文件(图片)上传到指定目录
- Android Studio 修改项目包名(任意级)
- 牛津3000释义词典_常见英语词典集锦
- Java并发编程基础(一篇入门)
- 刚体转动惯量c语言计算程序,Tracker软件在三线摆测量刚体转动惯量实验中的应用...
- 先进先出队列,优先级队列以及后进先出队列
- hackRF--初步实战(ubuntu环境)
- Oracle日期转换成格林威治时间
- 使用pytest 出现collected 0 items解决
- Docker容器的数据卷(volumes)
- 使用Canvas HTML5画出时钟
热门文章
- 使用jedis连接redis,关闭连接问题
- mysql 五舍六入_四舍六入五成双(适用于MYSQL)(最大支持小数点第9位)
- win10远程连接服务器出现“这可能是由于credssp加密……”的原因及解决办法,win10家庭版无法找到gpedit.msc或者组策略或安全组策略
- Java转化音频格式 m4a-wav
- 计算机二级ms真题及答案网盘,全国计算机二级MS Office考试真题及答案
- @程序员,请掌握这些核心生存技能
- 专科的计算机跨专业考研,专科生考研心路:跨学历都不怕,怕什么三跨?
- Matlab代码实现SOM(自组织映射)算法
- MATLAB动画绘制
- 阿里云服务器设置swap交换分区