微信小程序 ---- 慕尚花坊 项目初始化

目录

项目介绍

01. 项目概述

02. 项目演示

03. 项目技术栈

04. 接口文档

申请开发权限

项目初始化

01. 创建项目与项目初始化

02. 自定义构建 npm + 集成Sass

03. 集成项目页面文件

04. VsCode 开发小程序项目

项目介绍

01. 项目概述

[慕尚花坊] 是一款 同城鲜花订购 的小程序，专业提供各地鲜花速递、鲜花预定、网上订花、包月鲜花等服务。最快3小时送花上门，保证花材新鲜和鲜花质量，可先送花后付款，专业花艺师傅精美包扎，品质保证，至诚服务。

02. 项目演示

[慕尚花坊] 项目涵盖电商项目常见功能模块，包含：

  1. 项目首页
  2. 商品分类
  3. 商品列表
  4. 商品详情
  5. 用户管理
  6. 收货地址
  7. 购物车
  8. 结算支付
  9. 订单管理
  10. 等……

03. 项目技术栈

[慕尚花坊] 项目使用原生小程序进行搭建开发，项目涵盖小程序开发所有常用的知识点

  1. 小程序内置组件：采用小程序内置组件 结合 Vant 组件库实现页面结构的搭建

  2. 项目中使用了 css 拓展语言 Scss 绘制页面的结构

  3. 小程序内置API：交互、支付、文件上传、地图定位、网络请求、预览图片、本地存储等

  4. 小程序分包加载：降低小程序的启动时间、包的体积，提升用户体验度

  5. 小程序组件开发：将页面内的功能模块抽象成自定义组件，实现代码的复用

  6. 网络请求封装：request 方法封装、快捷方式封装、响应拦截器、请求拦截器

  7. 骨架屏组件：利用开发者工具提供了自动生成骨架屏代码的能力，提高了整体使用体验和用户满意度。

  8. UI 组件库：使用 Vant 组件库实现小程序 结构的绘制

  9. LBS：使用腾讯地图服务进行 LBS逆地址解析，实现选择收货地址功能

  10. miniprogram-licia：使用 licia 进行函数的防抖节流

  11. async-validator：使用 async-validator 实现表单验证

  12. miniprogram-computed: 使用 miniprogram-computed 进行计算属性功能

  13. mobx-miniprogram：使用 mobx-miniprogram 进行项目状态的管理

    ​

04. 接口文档

慕尚花坊系统-API文档

 

申请开发权限

在开始开发一个小程序项目之前，需要先申请开发权限。

需要将自己的微信号发送给对应小程序账号的管理员，在小程序微信公众后台添加我们自己为开发者。

📌：注意事项：

  1. 需要将自己的 微信号 发送给对应小程序账号的管理员

  2. 手机号不是微信号 (除非将手机号设置为了微信号)

如何查看自己的微信号：

 

在将微信号发送给管理以后，管理员会登录微信公众后台，进行添加：

 

在管理员将自己设置为项目成员以后，开发者自己也可以登录当前小程序管理后台，获取 AppId

 

在获取到小程序 AppId 以后，就可以使用 AppId 新建小程序项目 或者 切换小程序项目的 AppId

 

项目初始化

01. 创建项目与项目初始化

创建项目

在微信开发者工具的开始界面左侧检查项目类型，需要为 [小程序]

然后在右侧点击 [+] 开始新建项目

最后在弹出的界面中输入项目相关的信息，点击确定即可

📌 注意：

在新建项目的时候，[填写的 AppId 需要是自己的 AppId]

不能填写老师的 AppId，因为同学们不是当前小程序的开发成员

 

 

 

项目初始化

  1. 重置 app.js 中的代码
  2. 删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs 文件夹
  3. 删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段
  4. 重置 app.wxss 中的代码
  5. 删除 components 中的自定义组件
  6. 重置 pages/index 文件夹下的 index.js 、index.wxss、 index.html 以及 index.json 文件
  7. 更新 utils 下 util.js 的文件名为 formatTime.js

02. 自定义构建 npm + 集成Sass

随着项目的功能越来越多、项目越来越复杂，文件目录也变的很繁琐，为了方便进行项目的开发，开发人员通常会对目录结构进行调整优化，在慕尚花坊项目中，我们就需要将小程序源码放到 miniprogram 目录下。

自定义构建

  1. 首先在 project.config.json 配置 miniprogramRoot 选项，指定小程序源码的目录

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

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

    • packageJsonPath 表示 node_modules 源对应的 package.json
    • miniprogramNpmDistDir 表示 node_modules 的构建结果目标位置

  4. 安装 vant ，然后进行 npm 构建，测试是否能够正常 vant 构建成功

    npm i @vant/weapp

📌 注意：

​ 配置后如果没有生效，需要 [ 重启微信开发者工具 ] ❗ ❗

集成 Sass

在 project.config.json 文件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"]，即可开启工具内置的 sass 编译插件。

03. 集成项目页面文件

思路分析：

打开 [慕尚花坊项目素材] 中的 [模板文件] 文件夹

复制该文件中全部的文件和文件夹，在项目的 miniprogram 目录下进行粘贴

代码分析：

  1. app.json 中配置了 pages、window、tabBar
  2. app.json 中对项目中会使用到的 Vant 组件进行了全部的注册
  3. app.wxss 文件中导入了阿里巴巴使用图标库
  4. components 文件夹中定义了两个公共的组件
  5. pages 目录下存放了项目中所有页面的文件，后续我们会进行分包的处理

04. VsCode 开发小程序项目

知识点：

在进行项目开发的时候，部分同学可能不习惯微信开发者工具进行开发，而是习惯使用 VSCode 等编辑器

但是 VsCode 对小程序开发支持的不是非常友好，如果想通过 VSCode 开发小程序项目，需要安装以下插件：

  1. WXML - Language Service
  2. prettier
  3. 微信小程序开发工具
  4. 微信小程序助手-Y
  5. 小程序开发助手(可选)
  6. 其他......

💡 Tip：

使用 VsCode 开发小程序项目时，如果需要预览、调试小程序，依然需要借助微信开发者工具

配置详细插件：

  1. 在【项目的根目录】下创建 .vscode 文件夹，注意：文件夹名字前面带 . 点❗

  2. 在 .vscode 文件夹下，创建 settings.json，用来对安装的插件属性进行设置，具体属性设置从下面复制即可

    • 注意：.vscode 文件夹下的 settings.json 文件只对当前一个项目生效

  3. 在【项目的根目录】下创建 .prettierrc 文件，进行 Prettier 代码规则的配置，规则从下面复制即可

  4. 为了让 Prettier 配置项在微信开发者工具生效，需要在微信开发者工具中也安装 Prettier 扩展插件。

➡️ .vscode/settings.json

 

{// 保存文件时是否自动格式化"editor.formatOnSave": true,// ---------------- 以下是 [ prettier ] 插件配置 ----------------// 指定 javascript、wxss、scss、less、json、jsonc 等类型文件使用 prettier 进行格式化"[javascript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[wxss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[scss]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[less]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[json]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},// Prettier 的一个配置项，用于指定哪些文件类型需要使用 Prettier 进行格式化"prettier.documentSelectors": ["**/*.wxml", "**/*.wxss", "**/*.wxs"],// ---------------- 以下是 [ WXML - Language Service ] 插件配置 ----------------// wxml 文件使用 prettier 进行格式化"[wxml]": {// "qiu8310.minapp-vscode" 是 WXML - Language Service 插件提供的配置项// 此插件主要是针对小程序的 wxml 模板语言，可以自动补全所有的组件、组件属性、组件属性值等等// 如果是 VsCode 需要开启这个配置"editor.defaultFormatter": "qiu8310.minapp-vscode"// 如果是微信小程序，需要开启这个配置，通过 esbenp.prettier-vscode 对代码进行格式化// "editor.defaultFormatter": "esbenp.prettier-vscode"},// 创建组件时使用的 css 后缀"minapp-vscode.cssExtname": "scss", // 默认 wxss，支持 styl sass scss less css// 指定 WXML 格式化工具"minapp-vscode.wxmlFormatter": "prettier",// 配置 prettier 代码规范"minapp-vscode.prettier": {"useTabs": false,"tabWidth": 2,"printWidth": 80},// ---------------- 以下是 [ 微信小程序助手-Y ] 插件配置 ----------------// 新增、删除小程序页面时，是否自动同步 app.json pages 路径配置，默认为 false"wechat-miniapp.sync.delete": true,// 设置小程序页面 wxss 样式文件的扩展名"wechat-miniapp.ext.style": "scss",// ---------------- 其他配置项 ----------------// 配置语言的文件关联，运行 .json 文件时写注释// 但在 app.json 和 page.json 中无法使用"files.associations": {"*.json": "jsonc"}
}

 

➡️ .prettierrc
 

 

{"semi": false,"singleQuote": true,"useTabs": false,"tabWidth": 2,"printWidth": 180,"trailingComma": "none","overrides": [{"files": "*.wxml","options": { "parser": "html" }},{"files": "*.wxss","options": { "parser": "css" }},{"files": "*.wxs","options": { "parser": "babel" }}]
}
 

配置项配置项含义
"semi": false不要有分号
"singleQuote": true使用单引号
"useTabs": false缩进不使用 tab,使用空格
"tabWidth": 2tab缩进为4个空格字符
"printWidth": 80一行的字符数，如果超过会进行换行，默认为80
"trailingComma": "none"尾随逗号问题，设置为none 不显示 逗号
"overrides": []overrides 解析器：默认情况下，Prettier 会根据文件文件拓展名推断要使用的解析器
 

 
📌：注意事项：
 
项目根目录 .vscode 文件夹中 settings.json 文件只对当前项目生效❗
 
如果想配置项生效，还需要注意：
 
在 VsCode 中只能打开当前一个小程序项目，不能同时打开多个小程序项目❗ 且项目目录请勿嵌套打开 ❗
 

 










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


如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！











相关文章










js设计模式:依赖注入模式








js设计模式:依赖注入模式




作用: 
在对象外部完成两个对象的注入绑定等操作 
这样可以将代码解耦,方便维护和扩展 
vue中使用use注册其他插件就是在外部创建依赖关系的 
示例: class App{constructor(appName,appFun){this.appName  appNamethis.appFun  appFun}}class Phone{constructor(app) {this.nam…




阅读更多...

















【C++初阶】类和对象（中）








【C++初阶】类和对象（中）




目录 一.类的6个默认成员函数 
1.知识引入  
​编辑 2.构造函数  
(1)概念  
(2)语法特性 
(3)特征  
①问题引入1 
②问题引入2  （缺少默认构造函数） 
3.析构函数 
(1)概念 
(2)特性 
4.拷贝构造函数  
(1)概念 
(2)特征 
①拷贝构造函数是构造函数的一…




阅读更多...

















pclpy SOR去除异常值(统计滤波)








pclpy SOR去除异常值(统计滤波)




pclpy SOR去除异常值-统计滤波 一、算法原理1.背景2.原理 二、代码三、结果1.原点云2.sor处理后的点云（内点）3.sor处理后的点云（外点） 四、相关数据 一、算法原理 
1.背景 
激光扫描通常会生成不同点密度的点云数据集。此外&#…




阅读更多...

















【OpenSSH+Jenkins搭建项目自动化部署】








【OpenSSH+Jenkins搭建项目自动化部署】




OpenSSHJenkins搭建项目自动化部署 一、Windows安装OpenSSH1.下载2.解压3.安装4.启停服务5.SSH免密登录 二、Jenkins安装1.下载2.安装启动3.登录 三、项目自动化部署1.SSH配置2.项目配置3.权限控制 一、Windows安装OpenSSH 
1.下载 
https://github.com/PowerShell/Win32-0penS…




阅读更多...

















常见的排序算法整理








常见的排序算法整理




1.冒泡排序 
1.1 冒泡排序普通版 
每次冒泡过程都是从数列的第一个元素开始，然后依次和剩余的元素进行比较，若小于相邻元素，则交换两者位置，同时将较大元素作为下一个比较的基准元素，继续将该元素与其相邻的元素进行比…




阅读更多...

















用于扫描机密的开源解决方案








用于扫描机密的开源解决方案




TruffleHog 最初是在 2016 年独立创作的一个研究工具。当发布它时，没有工具扫描 Git 修订历史记录以获取秘密。我的预感是旧版本的代码中隐藏着很多秘密，但没有工具可以查找它们。 
我的预感是对的。该工具迅速流行并变得非常流行。如今，它在…




阅读更多...

















数据库管理-第153期 Oracle Vector DB  AI-05（20240221）








数据库管理-第153期 Oracle Vector DB  AI-05（20240221）




数据库管理153期 2024-02-21 数据库管理-第153期 Oracle Vector DB & AI-05（20240221）1 Oracle Vector的其他特性示例1：示例2 2 简单使用Oracle Vector环境创建包含Vector数据类型的表插入向量数据 总结 数据库管理-第153期 Oracle Vecto…




阅读更多...

















启动node服务报错Error: listen EACCES: permission denied 0.0.0.0:5000








启动node服务报错Error: listen EACCES: permission denied 0.0.0.0:5000




启动node服务报错： 解决方案： 
将监听端口改成3000或者其他 修改后结果： 参考原文： 
Error: listen EACCES: permission denied_error when starting dev server: error: listen eacc-CSDN博客




阅读更多...

















板块一 Servlet编程：第八节 文件上传下载操作 来自【汤米尼克的JavaEE全套教程专栏】








板块一 Servlet编程：第八节 文件上传下载操作 来自【汤米尼克的JavaEE全套教程专栏】




板块一 Servlet编程：第八节 文件的上传下载操作 一、文件上传（1）前端内容（2）后端内容 二、文件下载（1）前端的超链接下载（2）后端下载 在之前的内容中我们终于结束了Servle…




阅读更多...

















【云原生】Docker 安全与CA证书生成








【云原生】Docker 安全与CA证书生成




目录 
容器的安全行问题 
Docker 容器与虚拟机的区别 
Docker 存在的安全问题  
1.Docker 自身漏洞 
2.Docker 源码问题 
Docker 架构缺陷与安全机制 
1. 容器之间的局域网攻击  
2. DDoS 攻击耗尽资源  
3. 有漏洞的系统调用 
4. 共享root用户权限 
Docker 安全基线标准 
1. 内…




阅读更多...

















sympy奇异函数








sympy奇异函数




文章目录 简介SingularityFunctionrewrite 简介 
奇异函数是一类不连续函数&#xff0c;可用麦考利括号表示为 f ( t )  < t − t 0 > n f(t)\lt t-t_0\gt^n f(t)<t−t0​>n 
当 n < 0 n\lt 0 n<0时&#xff0c;记 N  − n − 1 ≥ 0 N-n-1\geq0 N−n−1≥0&…




阅读更多...

















【云原生】持续集成持续部署








【云原生】持续集成持续部署




本文主要总结CI/CD的流程&#xff0c;不会详细介绍每个知识点。 啥是集成&#xff1f;啥是部署&#xff1f; 
集成&#xff0c;就是把应用程序、相关环境、配置全局打包放在一个容器中的操作。部署就不解释了。 
CI/CD 
如果是自己手动部署的话&#xff0c;流程应该是这样的&am…




阅读更多...

















Android 沉浸式状态栏








Android 沉浸式状态栏




过时的API //设置默认隐藏虚拟按键&#xff0c;虚拟按键显示后为半透明protected open fun hideNavigationBarAndFullScreen() {val flags: Int// This work only for android 4.4flags  if (Build.VERSION.SDK_INT > Build.VERSION_CODES.KITKAT) {// This work only for a…




阅读更多...

















【算法与数据结构】797、LeetCode所有可能的路径








【算法与数据结构】797、LeetCode所有可能的路径




文章目录 一、题目二、解法三、完整代码 所有的LeetCode题解索引&#xff0c;可以看这篇文章——【算法和数据结构】LeetCode题解。 一、题目 二、解法 思路分析&#xff1a;有向无环图&#xff08;Directed acyclic graph, DAG&#xff09;是图论中的一个概念&#xff0c;它指…




阅读更多...

















SQL注入之DNSLog外带注入








SQL注入之DNSLog外带注入




一、认识&#xff1a; 
什么是dnslog呢&#xff1f; 
DNS就是域名解析服务&#xff0c;把一个域名转换成对应的IP地址&#xff0c;转换完成之后&#xff0c;DNS服务器就会有一个日志记录本次转换的时间、域名、域名对应的ip、请求方的一些信息&#xff0c;这个日志就叫DNSLog。…




阅读更多...

















2.21作业








2.21作业




使用多进程完成两个文件的拷贝&#xff0c;父进程拷贝前一半&#xff0c;子进程拷贝后一半&#xff0c;父进程回收子进程的资源。 
程序代码&#xff1a; 
#include <myhead.h>typedef struct 
{int start;//拷贝的起始位置int end;//拷贝的结束位置int source_fd;//被拷…




阅读更多...

















什么是正定矩阵？Positive Definite Matrices (done)








什么是正定矩阵？Positive Definite Matrices (done)




正定矩阵的定义&#xff1a;https://baike.baidu.com/item/%E6%AD%A3%E5%AE%9A%E7%9F%A9%E9%98%B5/11030459 
正定矩阵的作用、验证视频&#xff1a;https://www.bilibili.com/video/BV1Ag411M76G/?spm_id_from333.337.search-card.all.click&vd_source7a1a0bc74158c6993c…




阅读更多...

















详解 IT/OT 融合的五层架构（从PLC/SCADA到MES/ERP）








详解 IT/OT 融合的五层架构（从PLC/SCADA到MES/ERP）




作为一个电气自动化的从业者&#xff0c;有必要搞懂下面术语的意思。 
IT&#xff1a;Information Technology的缩写&#xff0c;指信息技术&#xff1b; 
OT&#xff1a;Operational Technology的缩写&#xff0c;指操作层面的技术&#xff0c;比如运营技术&#xff1b;CT&…




阅读更多...

















5、电源管理入门之 arm-scmi和mailbox核间通信








5、电源管理入门之 arm-scmi和mailbox核间通信




目录 
1. 整体架构介绍 
2 Linux中reset模块 
2.1 Reset consumer 
2.2 Reset provider 
3. Linux SCMI reset通信 
3.1 SCMI reset协议初始化 
3.2 SCMI reset消息收发 
4. SCP中reset 
4.1 固件新增module 
4.2 scmi_reset_domain初始化 
4.3 scmi_reset_domain消息处理 
4.3…




阅读更多...

















JavaScript数据类型学习脑图








JavaScript数据类型学习脑图




字符串&#xff08;String&#xff09;、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空&#xff08;Null&#xff09;、未定义&#xff08;Undefined&#xff09;




阅读更多...











































最新文章





























Copyright @ 2022~2023