LeDao's Blog

概述最近想升级一下电脑上的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就不 ...

概述和微信官方的tabBar标签栏相比，Vant Weapp的tabBar标签栏更加美观，还有徽标提示 实现过程引入tarBar组件引入步骤查看：微信小程序引入 Vant Weapp 组件库 | LeDao’s Blog (zoutl.cn) 1234"usingComponents": { "van-tabbar": "/dist/tabbar/index", "van-tabbar-item": "/dist/tabbar-item/index"} 新建页面要新建的页面和上一篇博客一样，博客链接为：微信小程序实现 tabBar 标签栏 | LeDao’s Blog (zoutl.cn) 添加tarBar配置在app.json中添加tarBar配置，"custom": true用来声明这个tarBar是定制的 123456789101112131415161718192021"tabBar": { ...