微信开发者工具修改编译后的启动页面
概述微信小程序开发一个新页面时,我们需要把它设置为编译后的启动页面,设置方法有两个:
到app.json中设置
修改微信开发者工具的编译设置,推荐使用这种方式
实现过程到app.json中修改添加一个entryPagePath属性(优先级比较高),其值为页面的路径,或者把页面的定义放在pages数组的第一个,下面代码的启动页面是index
12345678{ "entryPagePath": "pages/index/index", "pages": [ "pages/index/index", "pages/category/category", "pages/cart/cart" ]}
修改编译设置首先添加一个编译模式
编译模式的设置
解决Git的代码合并冲突
概述两个人都修改了同一个文件,第一个人进行push操作后,如果第二个人也进行push操作,那么第二个人就会出现代码合并冲突同时push失败
情景复现本地仓库和远程GitHub仓库都有一个名为bbb.txt的文件,先在GitHub仓库中修改这个文件,然后在本地修改这个文件
本地的bbb.txt文件内容如下:
123bbbbbb本地库修改bbb
GitHub仓库的bbb.txt文件内容如下:
123bbbbbbbbb远程库修改
进行add操作
1git add .
进行commit操作
1git commit -m "修改bbb.txt"
进行push操作
1git push origin master
会出现下图的错误,提示我们在再次push前先进行pull操作
解决过程根据上面的提示进行pull操作
1git pull origin master
然后查看本地的bbb.txt文件的内容,多了一些东西,<<<<<<< HEAD和=======之间的内容是本地仓库和远程GitHub仓库冲突的内容(属于本地仓库),= ...
Git将代码添加到暂存区时忽略一些文件
概述对于一些文件,如果我们不希望它们被Git提交的话,可以通过.gitignore文件配置规则,让这些文件不能添加到暂存区进而不能被提交到本地仓库
实现过程新建文件首先在仓库的根目录新建一个名为.gitignore的文件,我们可以在里面配置一些规则,让某些文件不能被提交
规则说明如何测试看规则有没有效果,可以通过git status命令来查看
单个文件直接在.gitignore内加上这个文件的名称,例如我们要忽略根目录的test.txt文件,规则如下:(一行写一个规则,注释用#号)
12345# 忽略根目录下的test.txttest.txt# 忽略根目录下的test文件夹内的1.txttest/1.txt
整个文件夹忽略根目录下的test文件夹
1test/
取反对于一些文件或文件夹,Git默认是不添加的,我们在忽略规则前面加上!即可
12# 我们假定test文件夹是默认不添加的,但是我们需要添加test文件夹的test.txt!test/test.txt
另外,如果规则配置了忽略test文件夹,那么上面的规则是不会生效的,文件夹的优先级比较大
过滤过滤某种类型文件,例如过 ...
Vant Weapp实现Area省市区选择组件的使用
概述官网建议省市区选择组件和弹出层组件配合使用,但是官网没有详细的例子,对于新手不是很友好,网上的博客也没有详细的教程,所以我把实现过程记录下来,方便以后使用
代码实现设计思路点击输入框会打开弹出层,在弹出层选择省市区并确认后,会把地址显示到输入框中
引入省市区数据通过npm命令安装官方默认的省市区数据
1npm i @vant/area-data
在页面js文件中引用,在代码的最上面加入下面代码
1import {areaList} from '@vant/area-data';
引入组件需要引入的三个组件分别是:输入框、弹出层、省市区选择
123"van-field": "@vant/weapp/field/index","van-popup": "@vant/weapp/popup/index","van-area": "@vant/weapp/area/index"
页面wxml代码123456<van-ce ...
Spring Boot配置本地文件映射路径
概述Spring Boot项目只能访问项目static文件夹内的文件,如果想访问磁盘上的其它文件,就需要配置一下本地文件映射路径了
实现代码新建一个配置类,实现WebMvcConfigurerAdapter接口,然后在重写的方法中添加映射的路径和真实的文件路径,本地路径的格式有两种:(即下面代码的第二个字符串的内容)
格式一:file:E:\\data\\mall\\images\\swiper\\
格式二:file:E:/data/mall/images/swiper/
123456789101112131415161718192021package com.ledao.config;import org.springframework.context.annotation.Configuration;import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;import org.springframework.web.servlet.config.annotation.Web ...
让微信开发者工具支持Less
概述Less可以让我们的代码更加简洁,尤其是可以使用嵌套代替层叠或与层叠结合使用
微信开发者工具要支持Less,需要安装一个名为Easy LESS的扩展
实现过程VS Code安装扩展虽然微信开发者工具没有Easy LESS这个扩展,但是它支持我们从VS Code的已安装扩展中导入扩展,所以我们需要先在VS Code中安装这个扩展
导入扩展打开微信开发者工具,去扩展页操作,如下图所示
选择mrcrowl.easy-less-1.7.4这个文件夹,然后就开始安装了
修改扩展配置首先打开更多编辑器设置
搜索Easy LESS,打开该扩展的配置文件
在下图的位置加上代码"outExt": ".wxss",然后保存,这段代码是为了告诉微信开发者工具:目标文件的后缀名是wxss,默认是css
测试我创建了一个名为search-bar.less的文件,那么它的目标文件就是search-bar.wxss,在search-bar.less中输入代码并保存后search-bar.wxss会自动生成代码
PS.Less的中文文档地址为:Less 快速入 ...
微信小程序引入iconfont矢量图标样式
生成Font class具体步骤查看博客:Hexo 的 Butterfly 主题使用 iconfont 图标 | LeDao’s Blog (zoutl.cn),看到生成 Font class就行,然后接着看本博客
在小程序中使用复制样式代码点击链接,会打开一个页面,页面内容就是我们需要的样式代码,然后把它复制下来
复制到小程序首先新建一个名为styles的文件夹(和pages的位置是同一级),在这个文件夹里面新建一个名为iconfont.wxss的文件,把上一步复制到的样式代码复制进去
全局使用样式在app.wxss里面加入以下代码,然后就可以全局使用引入的iconfont图标了
12/* 全局引入iconfont样式 */@import "./styles/iconfont.wxss";
使用图标1<text class="iconfont icon-cart"></text>
PS.每次加入一个新图标或修改后,都需要重新获取样式代码
Hexo博客报错: "ENOENT: no such file or directory, open E:\hexo-blog\db.json"
问题描述我把14.17.1稳定版本的Node.js卸载并安装最新版的Node.js后,使用hexo algolia命令上传Algolia索引时就报这个错误,报错原因是:E:\hexo-blog\db.json这个文件不存在
报错原因执行hexo g命令后会自动生成一个db.json文件,但是执行完hexo algolia命令后,这个文件就被删除了,从而导致文件不存在而报错
解决办法把Node.js卸载重新安装回原来的14.17.1稳定版本,如果有其它办法欢迎到最下面的评论区给我留言!!
使用Vite创建Vue3项目
概述和Vue CLI相比,Vite创建和启动项目都非常快,Vue.js的官方也推荐使用Vite
创建过程
打开CMD,进入存放项目的文件夹
输入下面命令,然后填项目名称、选择Vue、选择JavaScript,项目几乎瞬间创建好了
1npm init vite@latest
执行一下提示的3条命令以安装依赖和启动项目,启动后通过http://localhost:5173访问
成功运行的界面如下图,如果要停止项目的运行,在CMD窗口按下复制的快捷键(CTRL+C),然后确认即可
修改项目启动配置接下来修改一下项目的默认端口以及项目启动后自动打开浏览器,在vite.config.js中修改,server.port是端口号,server.open的值为true时启动项目会自动打开浏览器
1234567891011import {defineConfig} from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export ...
Vue CLI3.x及以上版本创建Vue项目
概述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
项目 ...