LeDao's Blog

概述3.x及以上版本的Vue CLI创建Vue项目有两种方法： 使用命令创建，更方便 使用图形化界面，更人性化 版本说明主要看vue-cli的版本，如果版本是2.x，那么创建项目的命令为vue init webpack 项目名称；如果版本是3.x及以上，那么创建项目的命令为vue create 项目名称 名称 版本 Node.js 14.17.1 npm 6.14.13 vue-cli 5.0.8 创建过程使用命令创建 打开CMD，进入存放项目的文件夹 使用vue create命令创建项目，下面命令是创建一个名为hello-world的项目 1vue create hello-world 然后选第三个，手动搭建环境 接下来安装一些插件，按空格键选择或取消选择，选好后按回车键进行下一步 选择Vue.js的版本，可以选择3.x或2.x 选择router的模式，后期可以更改，这里填y 然后把一些配置放在package.json（个人习惯，选哪个都没问题） 是否将当前选择的配置作为预设，下次新建项目时可以直接自动选择这些配置，我填n 项目 ...

概述最近想升级一下电脑上的Node.js和Vue CLI，看了许多技术博客，基本上都是使用命令行安装，我试了一下老是出问题，最后还是卸载重装更加简单暴力。卸载Node.js后，Vue CLI也会被卸载 不过以前使用npm命令安装过的一些东西都要重新安装，卸载前先去看看安装过什么，以方便安装回来，安装路径看下图 升级过程卸载建议使用Geek Uninstaller来卸载Node.js，和使用控制面板卸载相比，Geek Uninstaller卸载得更干净，官网下载地址为：Geek Uninstaller - Download 安装Node.js安装Node.js步骤查看博客：安装 vue-cli 脚手架 | LeDao’s Blog (zoutl.cn)，安装好Node.js就行，先不安装Vue CLI（这是因为安装命令不一样） 安装Vue CLI首先以管理员身份打开CMD，然后执行下面命令安装Vue CLI 1npm install -g @vue/cli 使用vue -V或vue --version查看Vue CLI的版本号，出现版本号说明安装成功了

概述微信小程序可以通过wx.request函数发起HTTPS网络请求，从Java后端接口动态获取数据，官方文档链接为：RequestTask | 微信开放文档 (qq.com) 实现过程跳过域名检测使用localhost或其他开发环境接口时，控制台报错，我们需要跳过服务器域名的校验 Java代码新建Spring Boot项目新建项目时，最少要添加一个Spring Web依赖 application.yml配置文件123456server: port: 80 servlet: context-path: / tomcat: uri-encoding: utf-8 HelloWorldController.java下面接口可以通过localhost/helloWorld进行访问 123456789101112131415161718package com.ledao.controller;import org.springframework.web.bind.annotation.GetMapping;import org.springframework.web.b ...

概述微信小程序组件通过使用slot标签，可以让使用这个组件的页面向slot标签按需插入一些内容，情况可分为使用单个slot和多个slot，本博客的代码是在微信小程序自定义组件 | LeDao’s Blog (zoutl.cn)的基础上进行修改 代码实现单个slot直接在组件的wxml文件里加上一个slot标签 1234<!--components/input/input.wxml--><text style="color: red;font-size: 18px;">自定义组件</text><input type="text" style="border: 2px solid red;" value="{{inputValue}}"/><slot></slot> 使用组件时，只需要在组件标签内加上要插入的内容 123456<!--pages/demo/demo.wxml-->< ...

概述开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护，自定义组件在使用时与基础组件非常相似 类似于页面，一个自定义组件由 json、wxml、wxss、js 4个文件组成 代码实现新建Component首先新建一个文件夹，命名为components，和pages文件夹的位置同级，用于管理所有组件 在components文件夹内新建一个文件夹，命名为input，右键点击这个文件夹并选择新建Component，也命名为input，项目结构如下图所示 组件wxml代码123<!--components/input/input.wxml--><text style="color: red;font-size: 18px;">自定义组件</text><input type="text" style="border: 2px solid red;" value="{{inputValu ...

概述事件是视图层到逻辑层的通讯方式，可以将用户的行为反馈到逻辑层进行处理 事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递（触发父节点的事件） 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递 代码实现简单事件绑定 页面wxml代码，text标签实时显示num的值，两个按钮分别绑定num加1和num减1事件 1234567<view style="text-align: center;"> <text style="color: red;font-size: 18px;">{{num}}</text></view><view style="text-align: center;"> <button bindtap="add" size="mini">加1</button> <but ...

概述微信小程序每个页面的数据都来自其对应的js文件的data 数据简单绑定就是，当data中的数据改变时，页面的数据也会实时改变（前者影响后者） 数据双向绑定就是，页面的数据和data中与之对应的数据只要有一个改变了，另一个就会改变（互相影响） 简单绑定数据绑定使用 Mustache 语法（双大括号）将变量包起来 初始数据123456/** * 页面的初始数据 */data: { num: 5}, 页面wxml代码1<text>{{num}}</text> 效果初始数据的num是多少，页面的数据就是多少 双向绑定目前微信小程序的双向绑定只能是一个单一字段的绑定，下面以input输入框为例，和值双向绑定的格式为model:value="{{num}}"（num为绑定的数据） 初始数据和上面一样 页面wxml代码1234<!-- 单向绑定 --><text style="color: red;font-size: ...

修改AppId如果新建项目时没有输入自己的AppId，而是使用测试号，那么就需要修改AppId了，否则跳过此步骤（上传按钮不可用就需要修改，和下图一样） 修改成自己的AppId，如何查看自己的AppId查看博客：微信开发者工具创建小程序 | LeDao’s Blog (zoutl.cn) 开始上传如果多次上传，只会保留最后一次上传的版本 查看结果到https://mp.weixin.qq.com登录后，找到版本管理，到最下面的开发版本中查看

查看所有项目 删除记录 删除本地文件上面只是删除了项目在微信开发者工具的记录而已，本地磁盘上的文件是没有删除的，我们需要找到项目的文件夹然后删除即可

概述对于一些重复使用的代码，我们可以将它封装成模板，以减少代码量 定义定义一个名为template1的模板 123<template name="template1"> <text>{{myName}}</text></template> 初始数据，写在使用模板的页面js中 12345678/*** 页面的初始数据*/data: { templateData:{ myName: 'ledao' }} 使用is属性动态决定具体需要渲染哪个模板，data属性是要引用的数据，在定义模板的页面使用时不用import 1<template is="template1" data="{{...templateData}}"/> 引用import在一个页面引用定义在其它页面的模板时，这个模板本来的js和css就不 ...