主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情! |
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作 |
今天给大家推荐一个我自己开发的小程序开发脚手架。 我用了快一年了,比较稳定。 我们将继续不时更新。 欢迎使用并star。
相比目前市面上的各种跨端方案,这种开发流程更加纯粹,不会引入新的开发难度,完全提升了基于原生的开发效率。 小程序~
pandora- boierpalte-wechat是一个小而美的微信小程序开发脚手架。 它不会引入任何新的复杂性,并且允许您 100% 的时间使用小程序,但与平常相比,它补充了小程序开发工具。 Web开发的弊端让开发微信小程序变得更加容易。
支持以下扩展:
预编译少的描述风格,自动转换为wxss
自动引入async/await依赖
dev/test/pre/prod多环境配置
npm 依赖项。 像使用常规 Web 项目一样使用 npm 包,然后让脚手架完成剩下的工作。
模块别名,不需要以后要使用它们,请使用相对路径引入js模块。
图标字体字体文件。 小图标直接使用字体文件。 您可以访问 IconFont 网站并下载您选择的 svg 文件。
有赞默认集成。 提供的vant-weapp是小程序组件库的一部分。 只需运行 即可将所需的组件及其依赖项安装到您的项目中。
创建模板文件
便捷的CICD功能,PA版本可一键部署到小程序控制后台,实现更语义化的版本号管理。
我们推荐使用pandora和-cli一起开发微信小程序。
少用
实际上,我们不需要进一步解释这一点。 只需创建一个 less 文件来替换它即可。wxss 文件就足够了。
自动引入 async/await 依赖项
脚手架构建脚本会自动分析您的代码中是否使用了 async 和 wait 关键字。 在这种情况下,将自动添加依赖项。 最终的构建代码中引入了第三方库,因此每个人都可以放心地使用 async/await 语法。
多环境配置
小程序项目初始化后,可以在config/app.yaml中配置多个环境。 姿势是:
app.yaml 配置包含:
appId: 'wxxxxxxxxx' appName: 'test-pandora' 版本: ' ;1.0.0 ' 开发: env: '开发' 主机: 'https://api.dev.com' 测试: env: '测试' 主机: 'https://api.test.com' 预生产: env: '预生产' 主机: 'https://api.pre.com' 生产: env : '生产' 主机: 'https://api.prod.com'
项目启动后,即pa启动后,app每次都会更新.yaml文件会触发自动编译
在需要使用的js文件中,使用如下方法引入:
import config from 'config'
配置对象是各种环境下构建的us配置文件。
例如启动pa start后,得到的配置对象是:如下。
{ appId: 'wxxxxxxxxx', appName: 'test-pandora', 版本: '1.0.0', 环境: 'development', 主机: 'https://api.dev.com' }
构建 --env 使用测试和配置对象。 这是我得到的:
{ appId: 'wxxxxxxxxx', appName: 'test-pandora', version: '1.0.0', env: 'test', host: 'https://api .test .com'}
npm 依赖
这个脚手架是由小程序完成的,因为: 没有使用官方提供的 npm 构建功能。 :
pandora-boilerpalte-开发微信脚手架时官方不支持npm
官方npm功能需要node_module为s目录位于小程序的根目录下,与目前的脚手架目录约定冲突,也与正常的Web项目结构不同。
基于上述原因,我们决定继续使用它。 专有的 npm 依赖处理机制。 他们的项目已经运行了近一年了,还没有遇到任何问题。
您可以使用以下方法将 npm 包安装到项目的根目录中:
pa i --npm 或 npm i
两者都可以以上两种方法都允许您将最新版本的 pkg 安装到您的项目中。 node_modules
组件库
集成有赞open的vant-weapp小程序组件库。 酱。 如果你想使用它,只需使用pa命令安装所需的组件即可。 所有必需的依赖项将自动安装。 您现在只需根据自己的小程序使用方式使用自定义组件,就可以最大限度地提高小程序开发效率。 效率。
例如,假设您要安装一个对话框组件。
对话框组件
此命令仅自动将 vant-weapp 库中的对话框组件及其依赖项安装到您的项目中。 来源/组件。
模块别名
在项目更新目录下的build.config.js文件中配置。 您可以为项目中的目录配置别名,并在源代码中使用别名引用。
图标字体支持
访问阿里巴巴IconFont官网,将您喜欢的图标SVG文件下载到项目根目录下的图标中。 构建会自动生成一个字体文件并将其内联到您的项目中,如下所示: 就用那个姿势吧。
图标目录包含以下文件:
wechat.svg
只需将以下类添加到 wxml 文件中的相应标记中即可。
</text>
其中,icon-font为必选,第二种由icon-font_组成
当然,你可以给这个元素添加其他样式,也可以添加。
创建模板文件
创建组件
p创建c组件演示或pa组件演示
创建的文件自动放置在项目的src/components中
创建页面
p c 创建页面demo或者页面demo
创建的文件放置在项目的src/components/pages中
CICD支持
在你的项目根目录下运行以下命令:,自动将项目释放到mini-节目背景。
pa 版本 -m ''
Version -type 是主要版本、次要版本或补丁。 您可以查看此版本的 npm 版本语义版本
评论。 描述(必填)。
这里需要注意的是,PA版本使用的是小程序开发工具HTTP接口,所以一定要启动小程序开发工具,进入【k3】>安全【k3】>安全(服务端口)打开
推荐教程:《微信小程序》
PHP快速学习视频免费教程(输入全部掌握)
如何学习 PHP?我应该从哪里开始学习 PHP?请放心。 这里有简单的 PHP 学习教程(从初学者到专家)。 您可以保存并下载您想学习的朋友。
下载
这几篇文章你可能也喜欢:
- 小程序选择器数据是一个对象数组
- 阅读本文开始使用小程序(小程序x)
- 如何使用Canvas(微信小程序中制作海报的软件)在小程序中绘制海报
- 小程序性能优化实用技巧(小程序性能优化实用技巧有哪些?)
- 微信小程序调用微信认证窗口(微信小程序微信认证)
本文由主机参考刊发,转载请注明:一个小而美的小程序脚手架,让您更顺利、更快速地开发小程序(app脚手架)。 https://zhujicankao.com/123895.html
评论前必须登录!
注册