自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 uniapp tab切换 (vue可用)

这是一个开发过程中比较常见的功能直接上代码了~<template> <view class="content"> <view class="navbar"> <view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }"

2021-10-19 09:41:05 571

原创 将码云项目拉取到本地

如何将码云上的项目拉取到本地进行开发呢~1.创建文件夹首先在本地创建一个文件夹,我创建的文件夹名称为wtx_tt,然后点击进去,接着鼠标右键,选择**git bash here **,前提是已经安装好了git.。2. 初始化git init运行结果:3.输入拉取项目的地址进入码云,将自己要拉取项目的地址复制下来然后在终端中输入 输入git remote add origin + 你刚刚在码云复制的那行路径git remote add origin https://gitee.com/

2021-08-25 14:01:18 1522

原创 VS Code中内嵌的浏览器预览插件Browser Preview

如果你没有双屏的显示器,又不想来回切换窗口,那么直接在VSCode里进行预览,那简直就是太方便啦~效果预览:安装Browser Preview打开插件管理,然后搜索Browser Preview插件,直接进行安装。安装完成后,在Bar上多出一个图标,点击图标就可以在VSCode里打开浏览器了。修改默认打开网址打开vscode —— 文件 —— 首选项 —— 设置 —— 用户 —— 扩展 —— Browser-preview: Start Url 填入默认打开的地址就可以了。(打开用户

2021-06-09 14:03:50 8404 9

原创 uni-app(16)— 组件的通讯,父传子,子传父,兄弟组件

此文为uni-app 总结笔记(16)— 组件的通讯,父传子,子传父,兄弟组件 官方API文档父组件给子组件传值子组件通过props来接受外界传递到组件内部的值子组件代码演示:<template> <view> 是父组件传过来的值 {{title}} </view></template><script> export default { props: ['title'] }</script

2021-05-18 15:13:34 708

原创 uni-app(15)— uni-app中组件的创建以及组件的生命周期函数

此文为uni-app 总结笔记(15)— uni-app中组件的创建以及组件的生命周期函数uni-app中组件的创建在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可创建test组件,在component中创建test目录,然后新建test.vue文件<template> <view> 这是test组件 </view></temp

2021-05-14 17:49:05 1478 1

原创 uni-app(14)— uni中的导航跳转以及页面传参

此文为uni-app 总结笔记(14)— uni中的导航跳转利用navigator进行跳转 navigator详细文档:文档地址

2021-05-13 16:49:05 751

原创 uni-app(13)— 条件注释实现跨端兼容

此文为uni-app 总结笔记(13)— 条件注释实现跨端兼容条件注释实现跨段兼容 官方API文档条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。**写法:**以 #ifdef 加平台标识 开头,以 #endif 结尾。平台标识值平台参考文档APP-PLUS5+AppHTML5+ 规范H5H5MP-WEIXIN微信小程序微信小程序MP-ALIPAY支付宝小程序支付宝小程序MP-BAIDU

2021-05-07 16:39:22 321 1

原创 uni-app(12)—图片上传和预览

此文为uni-app总结笔记(12)— 图片上传和预览图片上传 uni.chooseImage() 官方API文档从本地相册选择图片或者使用相机拍照。示例代码:<template> <view> <button type="primary" @click="chooseImg">上传图片</button> <view> <image v-for="item in imgArr" :src="item" :k

2021-05-07 15:21:04 211

转载 uni-app(11)— 数据缓存(存储数据,获取数据,移除数据)

此文为uni-app总结笔记(11)— 数据缓存(存储数据,获取数据,移除数据)数据缓存 官方API文档uni.setStorage将数据存储在本地缓存中指定的 key 中,会覆盖掉原来该 key 对应的内容,这是一个异步接口。代码演示<template> <view> <button @click="setStorage">存储数据</button> </view></template><scr

2021-04-28 17:54:00 2918

原创 uni-app(10)— 发送 get 请求

此文为uni-app总结笔记(10)— 发送 get 请求网络请求 官方API文档 在uni中可以调用uni.request方法进行请求网络请求需要注意的是:在小程序中网络相关的 API 在使用前需要配置域名白名单。发送get请求<template> <view> <button @click="sendGet">发送请求</button> </view></template><script&

2021-04-28 16:34:02 1163

原创 uni-app(9)— 下拉刷新以及关闭下拉刷新,上拉加载(页面触底)

此文为uni-app总结笔记(9)— 下拉刷新以及关闭下拉刷新下拉刷新开启下拉刷新在uni-app中有两种方式开启下拉刷新需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh通过调用uni.startPullDownRefresh方法来开启下拉刷新通过配置文件开启创建list页面进行演示<template> <view> 杭州学科 <view v-for="(it

2021-04-27 15:48:56 12368

原创 uni-app(8)— 生命周期的学习

此文为uni-app总结笔记(8)— 生命周期的学习uni的生命周期应用的生命周期 应用的生命周期官方文档生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数。注意: 应用生命周期仅可在App.vue中监听,在其它页面监听无效。uni-app 支持如下应用生命周期函数:函数名说明onLaunch当uni-app 初始化完成时触发(全局只触发一次)onShow

2021-04-22 17:16:55 82

原创 uni-app(7)— 数据绑定以及 v-bind,v-for,v-on

此文为uni-app总结笔记(7)— 数据绑定 以及 v-bind,v-for在页面中需要定义数据,和我们之前的vue一摸一样,直接在data中定义数据即可export default { data () { return { msg: 'hello-uni' } }}插值表达式的使用利用插值表达式渲染基本数据<view>{{msg}}</view>在插值表达式中使用三元运算<view>{{ flag ?

2021-04-22 15:30:13 4098

原创 uni-app(6)— 组件的基本使用

此文为uni-app总结笔记(6)— 组件的基本使用( 包含: text,view,button, image,uni-app中的样式,sass/less )一: text文本组件的用法 官方文档text 组件的属性属性类型默认值必填说明selectablebooleanfalse否文本是否可选spacestring.否显示连续空格,可选参数:ensp、emsp、nbspdecodebooleanfalse否是否解码

2021-04-16 16:09:45 496

原创 微信小程序video组件调用腾讯视频的解决方案

最近在开发中碰到了微信小程序video组件调用腾讯视频的问题,就趁机来总结一下。对方只给了我一个腾讯视频的网页链接,然后需要放置到小程序里面,大概开发前景是这样的。对方提供的视频链接: https://v.qq.com/x/page/s054310niqf.html解决方案: 通过腾讯视频小程序播放插件解决。官方文档代码示例说明:备注: vid是从腾讯视频网页链接中获取的,例如我的案例中,视频链接为:https://v.qq.com/x/page/s054310niqf.html ,则,s

2021-04-13 11:47:56 4172 3

原创 uni-app(5)— condition启动模式配置

此文为uni-app总结笔记(5)— 配置tabbar启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面,相当于小程序里面的预编辑模式。官网文档地址属性说明:属性类型是否必填描述currentNumber是当前激活的模式,list节点的索引值listArray是启动模式列表list说明:属性类型是否必填描述nameString是启动模式名称pathString是启动页

2021-04-08 15:02:11 498

原创 uni-app(4)— 配置tabbar

此文为uni-app总结笔记(4)— 配置tabbar如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。点击进入官方文档Tips当设置 position 为 top 时,将不会显示 icontabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。常用属性说明:属性类型必填默认值描述平台差异说明colorHexColor是tab 上的文字默

2021-04-07 14:40:19 1885

原创 uni-app(3)— globalStyle全局配置和页面配置

此文为uni-app总结笔记(3)— 全局配置和页面配置【通过globalStyle进行全局配置】用于设置应用的状态栏、导航条、标题、窗口背景色等。详细文档常用属性类型默认值描述navigationBarBackgroundColorHexColor#F7F7F7导航栏背景颜色(同状态栏背景色)navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色,仅支持 black/whitenavigationBarTit

2021-04-06 17:38:34 4889

原创 uni-app(2)— 项目目录和文件作用

此文为uni-app总结笔记(2)— 项目录和文件作用主要文件如图显示:主要文件包括:pages: 所有页面存放的目录。static: 静态资源目录,例如图片之类的。App.vue:是我们的跟组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。main.js: 是我们的项目入口文件,主要作用是初始化vue实例并使用需要的插件。manifest.json: 基础配置文件,比如微信小程序配置(AppID等等),h5配置,app配置等等。pages.

2021-04-06 16:12:08 1427

原创 uni-app(1)— 环境搭建(安装编辑器,创建项目,项目运行)

此文为uni-app总结笔记(1)— 环境搭建 (安装编辑器 – 创建项目 – 运行到浏览器,微信开发者工具)一: 安装编辑器HbuilderX【下载地址】 : https://www.dcloud.io/hbuilderx.html下载对应的App开发版本,下载后是一个压缩包状态,进入解压后的文件夹,找到HBuilderX.exe,直接点击打开即可开箱使用。下载后压缩包状态,如图显示,解压即可。解压后是这样的找到HBuilderX.exe,创建桌面快捷方式。二: 安装微信开发

2021-04-06 15:52:26 614

原创 微信小程序模糊搜索

小功能 小程序模糊搜索搜索也是小程序常见的一个小功能,此为模糊搜索案例,实际开发中建议传入搜索框内容到后台,后台查询后返回商品列表,以免占用过多资源。实现功能如下(1) 未找到商品时显示提示信息,找到商品时显示商品列表(2) 清空搜索框时显示搜索历史记录,历史记录可清除,点击历史记录赋值到搜索框view代码如下<view class="top"> <view class="topsearch"> <view class="frame">

2021-03-30 09:33:11 2416 2

原创 微信小程序wx.previewImage预览图片

小功能 点击图片放大预览这个也是小程序开发中经常遇到的小功能,所以也单独拿出来做一下总结,其实就是一个小知识点。文档链接 :https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.previewImage.htmlwx.previewImage 小程序开发文档参数view 代码如下<view class="container"> <block wx:for="{{pictures}}" wx

2021-03-29 16:35:43 7941 1

原创 小程序跳转小程序,长按识别小程序码跳转小程序解决方案

小程序跳转的时候需要公众号关联,但是关联的数量是有限的!因此该文章的处理方案是:a.关联的小程序,直接可以点击打开b.没有关联的,那么可以长按识别小程序码来进入小程序view代码如下<view class="recommend_scroll_box"> <view class="recommend_hot_box" wx:for="{{gameInfo}}" wx:key="key" wx:for-item="info"> <view>

2021-03-24 10:14:17 803

原创 微信小程序点击出现,再次点击隐藏

小功能 点击出现,再次点击隐藏这是开发小程序经常会用到的小功能,所以就做一下总结。以点击出现底部导航卡为例。view代码如下 <view class="click" bindtap="blocknav"> <image src="../../images/click.png"></image> </view> <view class="wtx_nav" wx:if="{{nav}}"> <navig

2021-03-16 16:54:45 2338

原创 小程序底部导航栏配置以及自定义导航栏

小程序底部导航栏配置以及自定义导航栏小程序底部导航栏可在根目录下的 app.json 文件进行全局配置,但是部分情况下需要我们自己进行自定义。** 一 :在app.json 文件进行全局配置**{ "pages": [ "pages/index/index", "pages/classify/classify", "pages/cart/cart", "pages/mine/mine", ], "window": { "navigationBa.

2021-03-16 16:37:10 2243

原创 vscode快捷键及插件

切换自动换行 alt+z

2020-08-24 19:56:41 94

原创 将一个对象转换成数组

将一个对象转换成数组var obj = {a: 1, b: 2, c: 3};var arr = [];for(var key in obj){if(!obj.hasOwnProperty(key)){continue;}var item = {};item[key] = obj[key];arr.push(item);}console.log(arr); // [{a: 1...

2019-04-12 14:22:13 9429

原创 js拼接之模板字符串:`string`

模板字符串的符号 是按键 ~下的符号demo:定义一个js变量存放数量,var num = 22;js 拼接:方法一: 双引号;console.log(“总人数为” + num + “人”);方法二: 单引号;console.log(‘总人数为’ + num + ‘人’);方法三: console.log(总人数为${num} 人);...

2019-04-11 17:49:48 3056

空空如也

空空如也

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

TA关注的人

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