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

这篇具有很好参考价值的文章主要介绍了微信小程序 ---- 慕尚花坊 项目初始化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

项目介绍

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. 手机号不是微信号 (除非将手机号设置为了微信号)

如何查看自己的微信号:

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

 

在将微信号发送给管理以后,管理员会登录微信公众后台,进行添加:微信小程序 ---- 慕尚花坊 项目初始化,apache

 

在管理员将自己设置为项目成员以后,开发者自己也可以登录当前小程序管理后台,获取 AppId微信小程序 ---- 慕尚花坊 项目初始化,apache

 

在获取到小程序 AppId 以后,就可以使用 AppId 新建小程序项目 或者 切换小程序项目的 AppId微信小程序 ---- 慕尚花坊 项目初始化,apache

 

项目初始化

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

创建项目

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

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

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

📌 注意

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

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

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

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

 

 

项目初始化

  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 中配置了 pageswindowtabBar
  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": 2 tab缩进为4个空格字符
"printWidth": 80 一行的字符数,如果超过会进行换行,默认为80
"trailingComma": "none" 尾随逗号问题,设置为none 不显示 逗号
"overrides": [] overrides 解析器:默认情况下,Prettier 会根据文件文件拓展名推断要使用的解析器

📌:注意事项:

项目根目录 .vscode 文件夹中 settings.json 文件只对当前项目生效❗

如果想配置项生效,还需要注意:

在 VsCode 中只能打开当前一个小程序项目,不能同时打开多个小程序项目❗ 且项目目录请勿嵌套打开 ❗文章来源地址https://www.toymoban.com/news/detail-836722.html

到了这里,关于微信小程序 ---- 慕尚花坊 项目初始化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 黑马程序员前端 Vue3 小兔鲜电商项目——(二)初始化项目

    Vue3是Vue.js最新的主要版本,它已经于2020年9月18日发布。它提供了许多新功能和性能改进,这些改进使得Vue更易于使用和更具可扩展性。 以下是Vue3的一些主要特性: 更快的渲染:Vue3使用重写的响应式系统,它使用Proxy对象来解决Vue2中的性能瓶颈问题。这使得Vue3的渲染速度比

    2024年02月11日
    浏览(41)
  • 第五节、项目支付功能实战-证书获取、微信支付集成初始化配置、sdk统一下单、api安全源码解读

    本节首先会讲解商户证书、私钥、微信平台证书的获取、APIv3密钥的生成。然后将我们微信支付需要的参数配置信息初始化出来,为后面的业务代码使用。结合微信平台证书下载案例和微信统一下单api来讲解请求和响应都做了什么操作。上一节中我们提到的那些证书又是如何

    2024年02月03日
    浏览(43)
  • Spring初始化项目

    访问地址:https://start.spring.io idea配置:https://start.spring.io 访问地址:https://start.aliyun.com/bootstrap.html idea配置:https://start.aliyun.com 官网 阿里巴巴 版本 最新 稍旧 国内软件 大部分没有(mybatis plus) 有的支持(如:mybatis plus)

    2024年02月09日
    浏览(45)
  • 第九节 初始化项目

    目录 系列文章目录 前言 操作方法 总结 初始化项目,导入默认reset.scss 、variables.scss及mixins.scss等并修改main.js引入样式 将默认样式表文件导入到项目。样式文件已经放到资源里请自行下载(

    2024年01月20日
    浏览(41)
  • 外卖项目初始化01

    项目的搭建 创建项目 仓库(把代码上传上去,切换个人分支) 工程化scss reset.scss main.scss [统一的出口] common.scss [公共的样式] vant.scss [覆盖vant的样式] var.scss 【变量的文件, 新 】 css3 的变量 一键切换皮肤 【了解一下】 mixin.scss 屏幕适配 【 新 】 px 转换成 vw axios的配置(

    2024年02月09日
    浏览(47)
  • git初始化项目上传

    步骤1:创建远程仓库 平台上建好项目,并copy远程仓库的URL 步骤2:初始化本地Git 首先,进入您本地的项目根目录下,然后,打开命令行界面,导航到该目录并执行以下命令: 执行完之后我们可以看到根目录下会多出一个.git文件。 如果是java项目可以在这个项目根目录下加个

    2024年02月10日
    浏览(58)
  • 多级缓存架构(一)项目初始化

    克隆此项目到本地 https://github.com/Xiamu-ssr/MultiCache 来到 start 目录下,分别有以下文件夹 docker :docker相关文件 item-service :springboot项目 在 docker/docker-compose.yml 中已经定义好如下 mysql 块 my.cnf 如下 运行以下命令启动 docker-compose 之后使用数据库连接工具连接 mysql 容器,创建 he

    2024年02月02日
    浏览(62)
  • Vue初始化项目加载逻辑

    项目创建 我们只需要创建项目即可,剩余的依赖都没必要安装 我们先来看main.js,咱们加了一行备注 通过备注可知,我们首先加载的是App.vue 我们再来看一下App.vue 里都有啥 也就是下面这个红框里的内容才是 那下面的内容是哪里来的呢 那就需要看一下路由设置了 我们看到/目

    2024年02月08日
    浏览(102)
  • 初始化git仓库(已存在项目)

    1.创建git仓库,获取仓库git地址 2.进入已存在项目根目录,打开git bash,执行命令,初始化仓库 3.添加文件 4.配置gitignore文件,排除部分文件 5.提交到本地 6.配置远端仓库 7.push到远程仓库某分支,完成代码上传

    2024年02月11日
    浏览(56)
  • 1、前端项目初始化(vue3)

    安装npm,(可以用nvm管理npm版本)npm安装需要安装node.js(绑定销售?)而使用nvm就可以很方便的下载不同版本的node,这里是常用命令 配置npm源 命令: 设置镜像源: npm config set registry https://registry.npm.taobao.org 查看当前使用的镜像地址: npm config get registry 参考 :https://www.cnbl

    2024年01月20日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包