FaxMiao-CSDN博客

原创微信小程序：页面跳转及参数传递

本文首发自个人自有博客：【FaxMiao个人博客】，一个关注Web前端开发技术、关注用户体验、记录前端点滴，坚持更多原创，为大家提供高质量技术博文！前言小程序的跳转方法有很多种，有的人一直只用wx.navigateTo跳转，由于页面栈限制，跳着跳着小程序就没反应了，今天就来说小程序的跳转几种跳转方式及作用。正文一、wx.switchTab跳转到 tabBar 页面，并关闭其他所有非...

2020-03-28 16:30:14 2772 1

原创微信小程序自定义navigationBar顶部导航栏，兼容适配所有机型（附完整案例）

前言navigationBar相信大家都不陌生把？今天我们就来说说自定义navigationBar，把它改变成我们想要的样子（搜索框+胶囊、搜索框+返回按钮+胶囊等）。正文1.隐藏原生的navigationBarwindow全局配置里有个参数：navigationStyle（导航栏样式），default=默认样式，custom=自定义样式。"window": { "navigation......

2020-03-26 09:38:27 12419 9

原创深入理解CSS3动画：animation、transform、transition

前言在CSS3之前，动画主要都是以JavaScript或者Gif图片来实现，但是实现效果并不是很理想或者很麻烦，有了CSS3之后很多动画几句代码即可实现，方便，快速，性能好。目录animationtransformtransition一、animation我们通过一个简单的例子来理解：延迟1秒执行，从左0往右100px无限循环来回移动；div { width: 80px...

2020-03-22 17:54:44 400

原创 Git下载、安装及环境配置（超详细）

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...

2020-03-17 14:59:19 46484 9

原创微信小程序实现锚点效果 scroll-view的scroll-into-view属性

小程序中实现锚点效果，可以直接使用scroll-view的scroll-into-view属性就可以实现锚点效果，比较方便简单。那么需要用到scroll-view那些参数呢，下面具体讲讲：效果展示：wxml**注意：**viewid值是动态的，通过setData设置即可。jswxss......

2022-06-06 17:38:50 4534 3

原创微信小程序设置git提交、代码管理

首先，把已建好git库（如未创建请先对git进行配置【git下载、安装及常规环境配置】）项目导入开发者工具。1.点击开发者工具右上角版本管理，然后点击设置。2.设置用户信息（填写你的git账号：昵称+邮箱），下次提交时将会使用此用户信息。3.设置用户名和密码（git的账号密码）4.设置远程git地址5.设置完成，可以在操作区进行代码推送、拉去等操作了。...

2022-05-25 11:28:30 4215 1

原创 [微信小程序] 动态设置页面标题、导航条 navigationBarTitleText

前言navigationBarTitleText用于小程序设置当前页面标题，可以给每个页面设置独立的标题，但是这样不能满足一些特殊业务场景；比如说商城，商品详情页面的标题，会根据获取到的数据动态修改，下面就来说说如何动态修改标题以及导航条相关设置。正文一、wx.setNavigationBarTitle1.设置整个小程序通用标题，在app.json里设置："window": { "navigationBarTitleText": "默认标题"}2.单独设置页面标题，在对应页面json

2022-05-24 15:28:04 22097

原创获取view宽高度、获取自定义组件宽高度

一、获取view宽高度给view设置一个id（class）名，用法和jQuery类似，用来获取指定id相关信息。<view id="test">测试view</view>把方法写在onReady，是为了再页面初次渲染完成后，再去获取，避免不准确或获取不到的情况。onReady: function (e) { const query = wx.createSelectorQuery(); query.select('#test').boundingClientRect(f

2020-06-18 15:19:58 718 1

原创微信小程序：setData函数详解及注意事项

前言在微信小程序中经常会使用到setData函数把变量渲染到视图层，那么什么是setData呢？如何使用？注意事项有些什么？下面我们就来详细了解一下！正文setData是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。setData函数用于将数据从逻辑层渲染到视图层（异步），同时改变对应的this.data的值（同步）。实例1：简单实现点击修改变量值<text&g...

2020-04-30 16:13:10 4078

原创微信小程序：获取地理位置

一、wx.getLocation(OBJECT)获取当前的地理位置、速度。当用户离开小程序后，此接口无法调用。开启高精度定位，接口耗时会增加，可指定highAccuracyExpireTime作为超时时间。属性类型默认值必填说明typestringwgs84否wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标alt...

2020-04-13 16:51:30 4028

原创 CSS3布局：多列布局、分栏

以前，如报纸类型排版，要用CSS动态实现其实是比较困难的，因为内容是动态的，每个div显示多少文字是很难控制的。现在CSS3提供了个新属性columns用于多列布局，下面我们就来详细看看。正文一、column-count指定了需要分割的列数；语法：column-count: number | auto；<div class="box"> FaxMiao个人博客是一个we...

2020-04-03 18:51:51 1426

原创微信小程序开发那些事，你都知道吗？

在开发小程序的时候，或多或少都会遇到些问题，也有很多容易被忽略的问题；前端以提升用户体验为主，适当规避问题、优化代码可提升性能，可大大提升用户体验。注意事项：1.自定义组件内wxss里不能使用标记选择器、ID选择器、属性选择器；/* 错误 */#id{...}image{...}a[href]{...}/* 正确 */.class{...}2.wx:for必须和wx:ke...

2020-04-01 15:57:52 294 1

原创微信小程序：动态设置页面标题、导航条

前言navigationBarTitleText用于小程序设置当前页面标题，可以给每个页面设置独立的标题，但是这样不能满足一些特殊业务场景；比如说商城，商品详情页面的标题，会根据获取到的数据动态修改，下面就来说说如何动态修改标题以及导航条相关设置。正文一、wx.setNavigationBarTitle1.设置整个小程序通用标题，在app.json里设置："window": { ...

2020-03-30 17:26:53 2825

原创微信小程序：消息提示框

本文首发自个人自有博客：【FaxMiao个人博客】，一个关注Web前端开发技术、关注用户体验、记录前端点滴，坚持更多原创，为大家提供高质量技术博文！前言相比H5弹出框的实现方式要么用插件，要么自己写；微信小程序则提供了几个弹出框api，使用起来更简单、方便；每个api都有不同的使用方式、场景，今天我们就来说说小程序的几种弹出框。目录wx.showToast()wx.showModa...

2020-03-29 16:23:35 4635

原创快速学会小程序参数传递与路径获取

首先在小程序中，所有页面的路由都由框架统一管理。getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。// 获取加载的页面对象const pages = getCurrentPages();// 获取当前页面的对象const currentPage = pages[pages.length - 1];tip...

2020-03-18 14:25:08 1016

原创 [微信小程序] 单张、多张图片上传(图片转base64格式)实践经验

定义初始数据：data: { imgList: [], // 图片集合 baseImg: [], // base64图片集合 maxImg: 8, // 图片上传最高数量（根据需求设置）}第一步：从本地相册选择图片或使用相机拍照（wx.chooseImage）// 选择图片selectPictures: function() { const that =...

2020-03-17 15:20:51 5541 4

FaxMiao的博客