尚硅谷微信小程序-慕尚花坊

abcde_12_q

已于 2024-09-14 17:06:34 修改

阅读量1.6k

点赞数 14

文章标签：微信小程序小程序

于 2024-09-13 18:02:11 首次发布

本文链接：https://blog.youkuaiyun.com/abcde_12_q/article/details/142215914

版权

项目初始化-申请开发权限

第一步，将可以的微信号发送给小程序的管理员
第二步，管理员添加微信号为小程序开发者
获取小程序的AppId(小程序id)
获取到小程序id 以后就可以新建小程序项目或者切换小程序项目的AppId

创建项目与项目初始化

输入自己的小程序id 直接创建即可

删除app.json中，我圈出来的这部分，不然项目跑不起来

自定义构建npm +集成 sass

第一步在小程序根目录先创建 miniprogram 目录，然后再将 components、pages、utils、app.js、app.json、app.wxss、sitemap.json 都移到 miniprogram 目录

2. 然后打开 project.config.json 配置

注意，刚开始 packNpmRelationList 配置中的 packageJsonPath 这个配置此时是没有东西的，

需要自己 npm init -y 一下，小程序包才会有 package.json这个文件，然后在将packageJsonPath 这个配置指向这个package.json 这个文件

3.安装vant 微信小程序版组件

npm i @vant/weapp

这边如果微信小程序开发工具权限不够的话是会报一个错，解决的办法就是我们关闭小程序开发工具，然后再以管理员权限运行，再进来安装就会解决这个报错。

安装完成后点工具构建npm一下，完成即可

4.集成sass

然后再将项目中wxss结尾的样式文件就可以改成后缀scss就可以在项目中使用sass

集成项目页面文件和基础配置

模板可以去下面这个地址自己提取 ,这个也是别人分享出来的

https://pan.baidu.com/s/1QqpN2bxDFBX8f8Kssyh-WA?pwd=dcgghttps://pan.baidu.com/s/1QqpN2bxDFBX8f8Kssyh-WA?pwd=dcgg

取码 dcgg，自己下载即可

vscode 开发小程序项目

第一步用vscode打开上面构建好的项目，然后在插件里面搜 WXML - Language Service

插件没装之前vscode 是不识别wx这个语法的会呈现全灰色

装之后就可以识别了

2.装 prettier 插件

3. 装微信小程序开发工具

4.装微信小程序助手-Y

5.装小程序开发助手

6.新建 .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"
  }
}

7.新增 .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"
            }
        }
    ]
}

📌：注意事项：

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

如果想配置项生效，还需要注意：

在 VsCode 中只能打开当前一个小程序项目，不能同时打开多个小程序项目❗ 且项目目录请勿嵌套打开 ❗

为什么进行模块封装

每次使用调用API，会导致代码冗余，为了减少代码冗余，可以将常用的API封装成公共方法。

消息提示模块封装

wx.showToast 和 wx.showModal

//在使用toast 方式时，可以传入参数，也可以不传入参数
//如果需要传入参数，要传入对象作为参数

//如果用户传入了对象作为参数
//在形参位置通过解构的方式获取用户传入的参数，同时设置默认值
const toast = ({ title = '数据加载中...', icon = 'none', duration = 2000, mask = true } = {}) => {
  wx.showToast({
    title,
    icon,
    duration,
    mask
  })
}
//在调用 modal方法时，可以传递参数，也可以不传递参数
//如果不传递参数，默认值就是空对象
//如果传递参数，参数需要时一个对象，对象中的属性需要和 wx.showModal 参数保持一致

const modal = (options = {}) => {
  //在方法内部需要通过Promise 返回用户的操作
  //如果用户点击了确定，需要通过 resolve 返回 true
  //如果用户点击了取消，需要通过 resolve 返回 false
  return new Promise((resolve) => {
    //默认的参数
    const defaultOpt = {
      title: '提示',
      content: '您确定执行该操作吗?',
      confirmColor: '#f3514f'
    }
    // 通过 Object.assign 方法将参数进行合并
    //需要使用传入的参数覆盖默认的参数
    //为了不影响默认的参数，需要将合并以后的参数赋值给一个空对象
    const opts = Object.assign({}, defaultOpt, options)
    wx.showModal({
      //将合并以后的参数通过展开运算符复制给wx.showModal
      ...opts,
      complete({ confirm, cancel }) {
        confirm && resolve(true)
        cancel && resolve(false)
      }
    })
  })
}

//如果有很多.js文件，都需要调用 toast 方法
//每次使用都需要导入 toast,然后进行调用，太麻烦
//可以将 toast 方法挂载到 wx 全局对象身上
//如果想挂载到wx全局对象上这种写法生效，需要让当前文件执行一下
wx.toast = toast
wx.modal = modal
//如果其他.js 文件,需要使用toast方法
//需要先导入 toast ，然后进行调用才可以
export { toast, modal }

其他页面也要用的话，直接在 app.js 引入一下

import './utils/extendApi'

App({
  
})

封装本地存储API

/**
 * @description  存储数据
 * @param {*} key  本地缓存中指定的key
 * @param {*} value  需要缓存的数据
 */

export const setStorage = (key, value) => {
  try {
    wx.setStorageSync(key, value)
  } catch (error) {
    console.error(`存储指定${key}数据发生了异常`, error)
  }
}
/**
 * @description  本地读取数据
 * @param {*} key  需要读取的key
 */
export const getStorage = (key) => {
  try {
    const value = wx.getStorageSync(key)
    if (value) {
      return value
    }
  } catch (error) {
    console.error(`读取指定${key}数据发生了异常`, error)
  }
}
/**
 * @description  从本地数据移除指定的key 的数据
 * @param {*} key
 */
export const removeStorage = (key) => {
  try {
    wx.removeStorageSync(key)
  } catch (error) {
    console.error(`移除指定${key}数据发生了异常`, error)
  }
}
/**
 * @description  从本地移除清空全部的数据
 */
export const clearStorage = () => {
  try {
    wx.clearStorageSync()
  } catch (error) {
    console.error(`清除数据发生了异常`, error)
  }
}
/**
 * @description 异步将数据存储到本地
 * @param {*} key  本地缓存中指定的key
 * @param {*} data 需要缓存的数据
 */

export const asyncSetStorage = (key, data) => {
  return new Promise((resolve) => {
    wx.setStorage({
      key,
      data,
      complete(res) {
        resolve(res)
      }
    })
  })
}
/**
 * @description  异步读取本地指定的 key 的数据
 * @param {*} key
 */

export const asyncGetStorage = (key) => {
  return new Promise((resolve) => {
    wx.getStorage({
      key,
      complete(res) {
        resolve(res)
      }
    })
  })
}

/**
 * @description  异步移除本地指定的 key 的数据
 * @param {*} key
 */

export const asyncRemoveStorage = (key) => {
  return new Promise((resolve) => {
    wx.removeStorage({
      key,
      complete(res) {
        resolve(res)
      }
    })
  })
}

/**
 * @description  异步移除本地的数据
 * @param {*} key
 */

export const asyncClearStorage = (key) => {
  return new Promise((resolve) => {
    wx.clearStorage({
      key,
      complete(res) {
        resolve(res)
      }
    })
  })
}

还是要在 app.js中引入

import './utils/extendApi'
import { setStorage, getStorage, removeStorage, clearStorage, asyncSetStorage, asyncGetStorage, asyncRemoveStorage, asyncClearStorage } from './utils/storage'
App({
  async onShow() {
   
  }
})