小程序创建与项目初始化(构建 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.rhkb.cn/news/375711.html

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

相关文章

Mysql的语句执行很慢,如何分析排查?

1、检查服务器性能是否存在瓶颈 如果系统资源使用率比较高,比如CPU,硬盘,那访问肯定会慢,如果你发现是Mysl占比比较高,说明Mysql的读写频率高,如果本身网站访问量不大,说明你的sql参数,sql语句查…

WIN10开机突然,过一会就自动重启蓝屏DRIVER_IRQL_NOT_LESS_OR_EQUAL

环境: Win10 专业版 DELL7080 问题描述: WIN10开机突然,过一会就自动重启蓝屏DRIVER_IRQL_NOT_LESS_OR_EQUAL 事件日志 解决方案: 1.找到MEMORY.DMP文件内容,分析一下 Microsoft (R) Windows Debugger Version 10…

.Net Core 微服务之Consul(二)-集群搭建

引言: 集合上一期.Net Core 微服务之Consul(一)(.Net Core 微服务之Consul(一)-CSDN博客) 。 目录 一、 Consul集群搭建 1. 高可用 1.1 高可用性概念 1.2 高可用集群的基本原理 1.3 高可用集群的架构设计 1.3.1 主从复制架构 1.3.2 共享存储架构 1.3.3 负载均衡…

k8s核心操作_k8s中的存储抽象_基本概念与NFS搭建_Deployment使用NFS进行挂载---分布式云原生部署架构搭建028

然后我们继续开始看 如果我们使用容器部署,比如我们有三个节点,一个是master,一个node1 一个是node2 那么pod 中我们可以看到,容器中的 /data 等各个目录都映射了出来了,但是 如果比如上面红色的部分,有个pod,原来在node2上,最右边那个,但是这个pod宕机了 那么,k8s会在node…

【开源 Mac 工具推荐之 1】gibMacOS:方便快捷的 macOS 完整包下载 Shell 工具

简介 gibMacOS 是由 GitHub 开发者 corpnewt 编写的一款 Shell 工具。它采用 Python 编程语言,可以让用户打开后在纯文本页面中轻松选择并下载来源于 Apple 官方的 macOS 完整安装包。 Repo 地址:https://github.com/corpnewt/gibMacOS (其…

MATLAB Gazebo联合仿真

准备仿真环境:在Gazebo中设置仿真场景,包括机器人模型、环境布局、传感器和执行器等。编写MATLAB脚本:在MATLAB中编写控制算法和数据处理脚本,用于接收Gazebo中的传感器数据,并生成控制命令。建立通信:通过…

(视频演示)基于OpenCV的实时视频跟踪火焰识别软件V1.0源码及exe下载

本文介绍了基于OpenCV的实时视频跟踪火焰识别软件,该软件通过先进的图像处理技术实现对实时视频中火焰的检测与跟踪,同时支持导入图片进行火焰识别。主要功能包括相机选择、实时跟踪和图片模式。软件适用于多种场合,用于保障人民生命财产安全…

细说MCU用定时器控制ADC采样频率的实现方法

目录 一、工程依赖的硬件及背景 二、设计目的 三、 建立工程 1.选择时钟源和Debug模式 2.配置系统时钟和ADC时钟 3.配置串口 4.配置ADC 5.设置TIM3 6.设置TIM4 7.配置中断 8.GPIO 四、代码修改 1.重新定义ADC回调函数 2.在主程序中编写数据发送代码 3.使能ADC和…

C++ 数据结构探索:构建高效程序的基础

C 数据结构探索:构建高效程序的基础 在C编程的广阔领域中,数据结构是理解和实现高效、可维护程序的核心。数据结构是计算机存储、组织数据的方式,它们使得数据访问和修改操作更加高效。本文将带您走进C中几种常见且重要的数据结构&#xff0…

关键路径-matlab

路径上边的数目称为路径长度 图的基本知识 求最短路径(Dijkstra算法) 2. 待继续尝试 ①Dijkstra ②floyd_all.m 一 二 ③ LeetCode [329. 矩阵中的最长递增路径]

ROS2 + 科大讯飞 初步实现机器人语音控制

环境配置: 电脑端: ubuntu22.04实体机作为上位机 ROS版本:ros2-humble 实体机器人: STM32 思岚A1激光雷达 科大讯飞语音SDK 讯飞开放平台-以语音交互为核心的人工智能开放平台 实现步骤: 1. 下载和处理科大讯飞语音模…

npm install 报错:PhantomJS not found on PATH

npm install 报错:PhantomJS not found on PATH 整体报错内容 npm ERR! code 1 npm ERR! path G:\work-learn\open-coding\bruno\node_modules\phantomjs-prebuilt npm ERR! command failed npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node install.…

Python应用爬虫下载QQ音乐歌曲!

目录: 1.简介怎样实现下载QQ音乐的过程; 2.代码 1.下载QQ音乐的过程 首先我们先来到QQ音乐的官网: https://y.qq.com/,在搜索栏上输入一首歌曲的名称; 如我在上输入最美的期待,按回车来到这个画面 我们首…

Ubuntu 22.04.4 LTS (linux) Auditd 安全审计rm命令 记录操作

1 audit增加rm 规则 #sudo vim /etc/audit/rules.d/audit.rules -w /bin/rm -p x -k delfile #重新启动服务 sudo systemctl restart auditd #查看规则 sudo auditctl -l -w /bin/rm -p x -k delfile 2 测试规则 touch test.txt rm test.tx 3 查看日志 sudo ausear…

配置Redis时yml的格式导致报错

报错如下 java.lang.IllegalStateException: Failed to load ApplicationContext at org.springframework.test.context.cache.DefaultCacheAwareContextLoaderDelegate.loadContext(DefaultCacheAwareContextLoaderDelegate.java:98) at org.springframework.test.context.su…

SpringCloud集成kafka集群

目录 1.引入kafka依赖 2.在yml文件配置配置kafka连接 3.注入KafkaTemplate模版 4.创建kafka消息监听和消费端 5.搭建kafka集群 5.1 下载 kafka Apache KafkaApache Kafka: A Distributed Streaming Platform.https://kafka.apache.org/downloads.html 5.2 在config目录下做…

家政服务小程序:提高家政服务,新商机!

当下,社会生活的节奏非常快,人们忙于工作,在日常生活家务清洁中面临着时间、精力不足的问题,因此对家政服务的需求日益增加,这也推动了家政行业的迅速发展。目前不少年轻人都开始涌入到了家政行业中,市场的…

C# .net6使用Hangfire

首先我们先来了解什么是Hangfire? Hangfire 是一个用于 .NET 的任务调度库,允许你在后台运行任务,而不需要依赖外部的任务队列服务或复杂的基础设施。它简化了后台任务的创建、调度和管理过程,使得在 .NET 应用程序中处理长期运行…

基于SpringBoot的校园疫情防控系统

你好,我是专注于计算机科学与技术的研究者。如果你对我的工作感兴趣或有任何问题,欢迎随时联系我。 开发语言:Java 数据库:MySQL 技术:SpringBoot框架,B/S架构 工具:Eclipse,Mav…

FastAPI 学习之路(四十七)WebSockets(三)登录后才可以聊天

之前我们是通过前端自动生成的token信息&#xff0c;这次我们通过注册登录&#xff0c;保存到本地去实现。首先&#xff0c;我们实现一个登录页面&#xff0c;放在templates目录下。 <!DOCTYPE html> <html lang"en"> <head><meta charset&quo…