自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(20)
  • 收藏
  • 关注

原创 Vue环境安装配置

1、安装git工具2、安装node,检查是否安装成功,在git工具中输入 node -v3、检查npm是否安装成功,在git工具中输入npm(npm一般随node一起安装在电脑中,node如果成功了,npm基本都会没问题)4、cnpm安装参考网站:https://developer.aliyun.com/mirror/NPM?from=tnpm在git工具中输入:npm install -g cnpm --registry=https://registry.npm.taobao.org检验是否安

2020-07-21 15:51:04 280

原创 微信小程序之获取当前位置到目标位置之间的距离

1、WXML{{item2.address}}{{item2.distance}}定位中2、JS部分(1)定义当前定位位置latitude: null,longitude: null,(2)定义目的地坐标latitude2: 116.403119,longitude2: 39.913607,(3)在生命周期函数–监听页面加载onLoad书写代码**(4)计算距离函数...

2020-07-09 15:38:03 5408 1

原创 uni-app如何创建并运行微信小程序项目

1、点击文件,选择新建下面的项目,如下图所示2、接着选择uni-app类型,起个名字即可,如下图所示3、然后就建好了小程序的目录,如下图所示4、接着点击工具下面的设置,如下图所示5、然后在运行配置里面设置微信开发者工具的路径,如下图所示6、接着登录微信开发者工具,点击设置下面的安全设置7、然后开启服务端口,如下图所示8、接着在运行配置中填写web服务调用URL9、接着点击运行下面的运行到小程序模拟器,如下图所示...

2020-09-14 16:14:52 2425

原创 Uni-app入门及使用

1、 通过 HBuilderX 可视化界面创建uni-app运行uni-app1、浏览器运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器,即可在浏览器里面体验uni-app 的 H5 版。2、真机运行:连接手机,开启USB调试,进入hello-uniapp项目,点击工具栏的运行 -> 真机运行 -> 选择运行的设备,即可在该设备里面体验uni-app。3、在微信开发者工具里运行:进入hello-uniapp项目,点击工具

2020-09-14 14:41:25 1107

原创 bilibili登录注册页面

效果图main.jsapp.vuerouter.js登录页面(父组件)注册页面(父组件)子组件

2020-09-06 16:09:26 1822

原创 小程序弹出框

1、提示弹出框点击提交效果wxml部分JS部分2、模拟框showModal实例效果wxml部分JS部分

2020-08-24 21:21:00 208

原创 h5、css3面试题

**1、问答知道的网页制作会用到的图片格式有哪些?Webp:WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%2、问答1.SGML(标准通用标记语言)和HTML(超文本标记语)解析:①HTML是SGML的一个实例,它的DTD作为标准被固定下来,因此,HTML不能作

2020-08-24 19:47:09 726

原创 flex布局(弹性布局)

FLEX布局(弹性布局)flixible Boxflex容器:使用display: flex就是flex容器项目:flex容器中的子元素就是项目,不包括孙子元素默认主轴方向排列,即横向Flex-容器的属性1、display属性作用:指定flex属性取值:flex | inline-flexflex:将对象作为弹性伸缩盒展示,相当于块级属性,有默认宽度100%inline-flex:将对象作为内联块级弹性伸缩盒展示,即行级元素,没有默认宽度2、flex-direction作用:指定容

2020-08-22 22:13:33 402

原创 Vue-router的安装使用及切换

1、在vscode终端安装三种方法:(1)、npm install vue-router(2)、cnpm install vue-router(3)、yarn add vue-router2、src下新建router.js中引入以下代码3、在src中新建views文件夹,在views新建例如:Home文件夹,在文件夹中新建index.vue4、设置router.js5、在App.vue中的div内引入6、设置main.js切换1、在commponents中引入切换的文件

2020-07-29 22:49:50 324

原创 安装vue-router

1、首先通过git新建一个vue项目2、把新建的项目用vscode工具打开,在终端输入以下命令:npm install vue-router或cnpm install vue-router或yarn add vue-router3、在src下新建一个router.js并引用以下代码4、在src中新建views文件夹,在view新建例如:Home文件夹,在文件夹中新建index.vue5、index.vue内容6、在router.js中设置如下两步7、在App.vue中的div内引入

2020-07-24 11:38:22 2151 1

原创 vue父传子、子传父、非父子组件传值

1、父传子父子组件的关系可以总结为 prop 向下传递,事件向上传递。父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息子组件父组件的代码父传子的实现方式就是通过props属性,子组件通过props属性接收从父组件传过来的值,而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可2、子传父子组件子传父的实现方式就是用了 this.emit来遍历getData事件,首先用按钮来触发setData事件,在setData中用this.em

2020-07-23 18:19:36 282

原创 Vue生命周期

一共8个阶段1、beforeCreate(创建前)2、created(创建后)3、beforeMount(载入前)4、mounted(载入前)5、beforeUpdate(更新前)6、update(更新后)7、beforeDestroy(销毁前)8、destroyed(销毁后)vue第一次页面加载会触发哪几个钩子函数?beforeCreate、created、beforeMount、mountedDOM渲染在哪个周期中就已经完成?mounted...

2020-07-22 17:27:42 161

原创 Vue声明式渲染、条件与循环、事件绑定、双向绑定

1、声明式渲染 {{ message }}运行结果2、条件与循环v-if运行结果当data中的seen: true改为false时,之前显示的信息会消失v-for 指令可以绑定数组的数据来渲染一个项目列表运行结果3、事件绑定运行结果4、双向绑定运行结果...

2020-07-22 16:38:18 161

原创 小程序调取echarts API接口

1、将axios.js放到utils下面2、home.json引入axios.js3、home.js4、预览图

2020-07-17 12:17:23 354

原创 如何在小程序中引入echarts(数据可视化)

1、首先你要先创建一个新的项目,命名为echarts,在新项目中新建home文件夹2、在home.json中引入ec-canvas组件3、WXML页面4、home.js页面,这里要注意第二行引入echarts.js5.app.wxss页面6、千万记得给ec-canvas组件添加样式哦7、柱状图效果预览8、想体验更多样式可以在官方实例中测试哦网址https://echarts.apache.org/examples/zh/index.html#chart-type-line

2020-07-16 10:31:58 846

原创 小程序收藏成功(取消收藏)弹出框

1、WXML页面2、JS页面效果预览

2020-07-15 11:13:10 947

原创 小程序轮播图组件跳转到自定义页面

1、轮播图组件wxml代码2、轮播图组件js3、在页面引入轮播图组件4、设置页面js5、未跳转之前页面6、点击轮播图跳转

2020-07-12 10:56:26 1219 1

原创 微信小程序vant栅格布局

1、wxml页面 美食 民宿 交通停车 研学 多游活动 农产 演艺游乐 <van-col span="6" custom-class="icons_col"> <image src="../img/z.png"></image><view&g

2020-07-09 19:25:34 2593

原创 微信小程序调取api

1、轮播图apiwxml2、js const app = getApp()data: {banner:[],imgUrl: app.imgURL,},请求接口onLoad: function () {const _this =this;{// 轮播图console.log(‘开始请求轮播图’,new Date());wx.request({url: app.baseURL + ‘/wx/product/all_banner’,method:“POST”,succes

2020-07-09 19:08:23 316

原创 微信小程序获取当前系统时间

微信小程序获取当前系统时间格式

2020-07-09 12:20:19 712

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除