小程序创建与项目初始化(构建 npm + 集成 Sass)

一、打开微信开发者工具

  1. 确认 左侧导航栏是否选中的 小程序
  2. 点击 【+】创建小程序
    在这里插入图片描述

二、创建小程序
在这里插入图片描述
在这里插入图片描述

三、初始化

  1. 清空 app.wxss、app.js

  2. 去掉 rendererOptions 和 componentFramework 不需要最新的搜索引擎

  3. 留下以下文件
    在这里插入图片描述
    四、自定义构建 npm + 集成 Sass

  4. 首先 先把小程序源码文件 放到 新建的 miniprogram 文件夹下
    在这里插入图片描述

  5. 在 project.config.json 配置 miniprogramRoot 选项,指定小程序源码的目录

  6. 然后配置 project.config.json 的 setting.packNpmManually 为 true,开启自定义 node_modules 和 miniprogram_npm 位置的构建 npm 方式

  7. 在项目右键 点击 【在内建终端中打开】在终端中 输入 【npm init -y】生成package.json 文件
    在这里插入图片描述

  8. 最后配置project.config.json 的 setting.packNpmRelationList 项,指定 packageJsonPath 和 miniprogramNpmDistDir 的位置

  9. 修改后的 project.config.json 文件

{"compileType": "miniprogram","libVersion": "trial","packOptions": {"ignore": [],"include": []},"miniprogramRoot": "miniprogram/","setting": {"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "/package.json","miniprogramNpmDistDir": "./miniprogram"}],"useCompilerPlugins": ["sass"],"coverView": true,"es6": true,"postcss": true,"minified": true,"enhance": true,"showShadowRootInWxmlPanel": true,"babelSetting": {"ignore": [],"disablePlugins": [],"outputPath": ""}},"condition": {},"editorSetting": {"tabIndent": "auto","tabSize": 2},"appid": "wx34f339ffd16a69e5","srcMiniprogramRoot": "miniprogram/"
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/45668.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Go 高效Web开发框架 Echo

💝💝💝欢迎莅临我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

WEB前端01-HTML5基础(01)

一.WEB相关概念 软件架构 C/S: Client/Server (客户端/服务器端):在用户本地有一个客户端程序,在远程有一个服务器端程序 优点:用户体验好 缺点:开发、安装,部署,维护麻烦 B/S: Br…

Qt Qml编程 基础部分 认识qml

学习目标:认识Qml编程 学习内容 qml介绍 Qt QML 是一个用来设计和开发Qt应用程序用户界面的声明性语言。QML 是 Qt 的元对象语言(Meta-Object Language)的缩写。它与 C 一起使用,来为 Qt 应用程序创建用户界面。 QML 是一个标记语言,它允许开发人员使用类似 HTM…

Chapter 1:数据结构前言

在数字化的世界里,我们每天都在与数据打交道。然而,你是否曾想过,这些数据是如何被组织、存储和处理的?这就是数据结构的魅力所在。 数据结构,简单来说,就是数据的组织方式。它决定了我们如何高效地访问和操…

sublime text中的配置好用的报错插件,代码检查插件sublimelinter,cppcheck,对C++的环境进行配置-2024.7.13版

文章目录 一,sublimelinter能实现什么?二、sublimelinter 的安装教程配置sublime text 的基础环境配置cppcheck的环境变量配置sublimelinter的配置文件 一,sublimelinter能实现什么? 因为sublime 不自带任何的代码检查工具&#…

理解CNN中的Batch Normalization (补充 知乎博主)

理解CNN中的Batch Normalization - 知乎 (zhihu.com) https://zhuanlan.zhihu.com/p/403073810 BN层常见有针对1d特征(全连接层后面的) 举一个简单的例子吧 解释在全连接层(Fully Connected Layer, FC Layer)后加 BN 层时&#…

基于Adaboost的数据分类算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于Adaboost的数据分类算法matlab仿真,分别对比线性分类和非线性分类两种方式。 2.测试软件版本以及运行结果展示 MATLAB2022A版本运行 (完整程序…

更新商品前端接口编写

文章目录 新增页面书写写表单价格符号的显示然后状态的书写后端枚举书写时间书写使用组件 新增页面书写 书写直接复制页面 写表单的绑定信息 然后绑定表单 表单绑定还有表单数据的绑定 标签中ref的作用就是将 该组件注册到vue对象的ref属性中 那么在vue运行的时候,会加载所…

fullcalendar基础使用

fullcalendar日历插件&#xff0c;下面是实现的一个基础模版实现任务的添加修改操作。 <div><div id"calendar" ref"calendarRef"></div><el-dialogv-model"dialogTableVisible"title"添加任务"width"500&…

Golang:数据科学领域中的高性能并发编程新星

文章目录 📖 介绍 📖🏡 演示环境 🏡📒 文章内容 📒📝 并发性能的卓越表现📝 系统级工具的便捷性📝 语言设计的简洁性📝 强类型系统的严格性📝 版本兼容性的稳定性📝 内置工具的全面性⚓️ 相关链接 ⚓️📖 介绍 📖 在数据科学和机器学习的广阔天地…

Web3 社交领域的开发技术

Web3 社交领域的开发技术主要包括以下几种&#xff0c;随着 Web3 技术的不断发展&#xff0c;Web3 社交领域将会出现更多新的技术和应用场景。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1. 区块链技术 区块链技术是 Web3 社交的…

Arcgis横向图例设置

想把这个图例改成横向的 点击图例的属性&#xff0c;找到样式

虚幻引擎ue5游戏运行界面白茫茫一片,怎么处理

根剧下图顺序即可调节游戏运行界面光照问题&#xff1a; 在大纲里找到post&#xff0c;然后选中它&#xff0c;找到Exposure 把最低亮度和最高亮度的0改为1即可

C# Winform 系统方案目录的管理开发

在做一个中等复杂程度项目时&#xff0c;我们通常有系统全局配置&#xff0c;还要有对应的方案目录的管理和更新。 比如我们有如下需求&#xff1a;开发一个方案管理&#xff0c;可以新建、打开和保存方案&#xff0c;同时还需要保存方案中的各种文件。我设计的采用目录管理和…

在Linux上部署Java项目过程

文章目录 1、ps -ef | grep java2、杀死指定的.jar程序3、此时再查看java进程4、找到.jar包在linux上存储的位置5、切换到存放.jar目录5、把相应的.jar包放入这个目录6、启动指定的java程序 1、ps -ef | grep java [rootiZuf6332h890vozldoxcprZ bailian]# ps -ef | grep java…

fastadmin 如何通过权限组来控制列的显示与隐藏

方法1 以版本控制&#xff08;application/admin/controller/Version.php&#xff09;为例子 需求 就是在有时候&#xff0c;有些列不想让这个权限组的人看到&#xff0c;只给制定的权限组的人看 1.给权限组创建一个字段 ALTER TABLE lt_auth_group ADD COLUMN isBoothView T…

IDEA 中的调试方式(以 java 为例)

文章目录 IDEA 中的调试方式(以 java 为例)1. 基本介绍2. 断点调试的快捷键2.1 设置断点并启动调试2.3 快捷键 IDEA 中的调试方式(以 java 为例) 在开发中查找错误的时候&#xff0c;我们可以用断点调试&#xff0c;一步一步的看源码执行的过程&#xff0c;从而发现错误所在。 …

iPhone删除所有照片的高效三部曲

苹果手机用久了&#xff0c;系统缓存包括自己使用手机留下的内存肯定会越来越多。其中&#xff0c;相册中的照片数量可能会急剧增加&#xff0c;占据大量的存储空间。当用户们想要对相册进行彻底清理&#xff0c;实现iPhone删除所有照片时&#xff0c;不妨跟随以下详细的三部曲…

数据结构(3.9_1)——特殊矩阵的压缩存储

总览 一维数组的存储结构 如果下标从1开始&#xff0c;则a[i]的存放地址LOC (i-1)*sizeof(ElemType); 二维数组的存储 二维数组也具有随机存储的特性 设起始地址为LOC 在M行N列的二维数组b[M][N]中&#xff0c;若按行优先存储&#xff0c; 则b[i][j]的存储地址的LOC (i*…

百度2025校园招聘内推开始啦

百度2025校园招聘内推开始啦&#xff0c;快来投递你心仪的职位吧&#xff08; 网申链接地址&#xff1a;https://talent.baidu.com/jobs/list?recommendCodeIZB4S3&recruitTypeGRADUATE &#xff09;填入内推码&#xff0c;完成投递&#xff0c;get内推绿色通道~我的内推码…