- 博客(29)
- 资源 (4)
- 收藏
- 关注
RSS订阅原创 js-h5打开手机内置腾讯地图app
var mapUrl_tx = "http://apis.map.qq.com/uri/v1/marker?marker=coord:"+lat+","+lon+";title:" + 标题 + ";addr:" + 地址名称 + "&referer=yellowpage";console.log("mapUrl_tx"+mapUrl_tx);
2021-03-18 14:52:10
1048
原创 js手机端、h5页面如何判断点击还是滑动
在手机h5端页面使用上下滑动事件实现翻页等一系列功能时，可以使用触摸结束的位置 - 触摸开始的位置判断，当结果大于0时，向上翻页，当结果小于0时向下翻页。 document.addEventListener('touchstart',this.touchstart); document.addEventListener('touchend',this.touchend); touchstart(e){ // console.log(e.changedTouches[0].p
2021-03-11 09:47:49
2056
原创 微信小程序获取不到unionId的各种情况
官方文档地址：点击查看。前提：使用微信小程序登录获取unionId需要完成微信开放平台认证，地址https://open.weixin.qq.com/，完成认证后前往管理中心–小程序–绑定小程序完成绑定认证。使用微信小程序获取unionId大致可以分为两种情况。1、方法一参考官方地址：点击查看，用户只需要通过wx.login（）方法获取路径中所需的js_code即可，小程序前端不能如果直接使用官方请求地址，需勾选不校验合法域名，但只能在开发环境中查看，不能应用于线上，应用于线上需在后端配置请求该方法
2021-03-10 15:50:17
7162
原创 web及h5上下翻页功能
实现上下翻页效果可以使用轮播图辅助实现，这里使用element-ui，其它插件使用方法类同。html代码： //:autoplay="false"不自动播放 :loop="false"不循环 direction="vertical"轮播为数值方向<el-carousel ref="goupdown" height="100%" direction="vertical" :autoplay="false" :loop="false"> <el-carousel-it
2021-03-08 15:40:47
1949
原创 github绑定自己的域名
使用gitee自定义域名好像需要付费，这里使用github。1、上传运行项目上传项目至github，在线运行。项目-》setting-》GitHub pages2、根目录创建CNAME文件注意文件名CNAME需要大写。文件中写入要绑定的域名。文件创建完成后setting中原本路径会自动改为cname中的路径。3、域名配置点击域名解析。配置@与自定义的域名。@中为自己github的ip，可通过cmd->ping ***.github.io获取，下边为自己的域名，需要与CN
2021-02-20 11:05:19
1100
原创 vue路由权限控制
在路由.js文件中全局守卫router.beforeEach添加router.beforeEach((to, from, next) => { let access = [ //当前权限列表 ] if (canTurnTo(to.name, access, routes)){//routes当前路由列表 console.log("当前有权限") next() // 有权限，可访问 }else{ console.log("当前无权限") next()
2021-02-19 12:02:09
289
1
原创 h5跳转微信小程序
参考链接：https://developers.weixin.qq.com/community/develop/doc/000ae2a7a7c9402a4d8bca2875b409之前使用官方和查询到的云函数写法都有不明的错误，这里引用上方的链接的方法得以实现。上方法中使用的是自己封装的js方法，只需直接传参便能实现。但是修改样式有些不方便，这里在官方的方法上进行了修改。git链接：git@gitee.com:yzhaof/h5-jump-applet.git。将里边"填写信息"的地方修改成个人对应
2021-02-05 11:13:07
470
2
原创 h5页面中使用js获取手机类型
var phone = navigator.userAgent; console.log(phone); if (phone.indexOf('Android') > -1 || phone.indexOf('Linux') > -1) { console.log("安卓手机"); } else if (phone.indexOf('iPhone') > -1) { console.log("苹果手机"); } else if (phone.indexOf('Wi.
2021-01-20 11:41:31
790
原创 vue使用变量赋值标签样式
vue使用变量赋值标签样式如在小程序使用中，不同手机状态栏高度不同，标签要定位在状态栏下方20rpx的位置，无法直接使用固定的高度定位。可以看出，这里需先确定状态栏的高度，使用状态栏高度转rpx后加上20即为定位的数值，距顶距离需要使用变量赋值。解决方法设定基本样式<view class="aaa" :style="runtop"> </view>//css.aaa{ position: absolute; }//jsdata() { return {
2021-01-19 11:56:19
921
原创 小程序获取手机状态栏高度
小程序获取手机状态栏高度获取高度let res = uni.getSystemInfoSync();res.statusBarHeight即为状态栏高度使用获取状态栏高度为单位为px，小程序中一般使用rpx，这里可以做转换处理。res = (res.statusBarHeight + 44)/(uni.upx2px(res.statusBarHeight + 44)/(res.statusBarHeight + 44))这里默认自定义导航栏高度为44，可自行定义。若使用吸顶操作，res即为吸顶
2021-01-19 11:39:22
1240
原创 微信小程序云开发入门基础操作
1、项目创建创建项目，填写基本信息，不勾选使用云开发技术，勾选时项目创建会携带一些官方文档。点击云开发创建云开发环境。2、配置云函数目录在project.config.json 文件中使用 cloudfunctionRoot字段，并在相应位置创建云函数文件夹。配置成功时相应文件夹会变更为云函数文件夹样式。初始化云开发环境，app.js，env对应创建按的环境id。右键云函数目录文件夹-当前环境，能切换当前配置环境（如有多个时）。3、基本的增删改查在云开发控制台，数据库中创建集合（数据库）
2020-12-10 14:51:23
363
原创 js实现朋友圈发布时间显示
function getdate (data) { // 当前时间标准化 let now = new Date() const nowday = now.getDate() const nowhour = now.getHours() const nowminute = now.getMinutes() const nowsecond = now.getSeconds() let todaysec = nowhour * 60 * 60 + nowminute * 60 + n.
2020-12-09 10:55:55
510
原创 vue动态添加多个类
动态添加多个类<span><i :class="[{name1: did == 'true'},{'name-name2': did == 'true'}]"></i></span>固定类加动态类:class="['line-item',{'select-item': selectgreen == i}]"
2020-12-03 17:21:37
1018
原创 又拍云加速域名配置
1、又拍云上新建服务又拍云-云产品-云存储-创建服务。服务配置-域名绑定，添加要绑定的域名。配置完成后记录域名cname值。2、服务器配置域名解析列表配置前边对应绑定的域名规则，添加复制的cname。证书认证。自动认证。...
2020-12-01 10:18:50
528
原创 组件中对象传值
数据加密let data = { a: a, b: b}//定义对象数据data = JSON.stringify(data)//转换数据格式，直接加密无法正常解密data = escape(data)//数据加密数据解密let data = unescape(this.$route.query.data)//数据解密data = JSON.parse(data)//转换为对象数据附：js获取导航栏键名对应的数据//获取导航栏参数function getUrlParam (n
2020-11-25 13:30:06
242
原创 微信小程序实现瀑布流布局
瀑布流布局主要将大小不一的图片按等宽格式向下铺满。先分析，主要实现方式可以是将左右两列划分为两个数组存储图片，每次添加图片时判断两侧高度，并将图片添加到高度较低的数组中。微信小程序获取对象高度可通过wx.createSelectorQuery()方法来实现，官方地址。 query = wx.createSelectorQuery(); query.select('#left').boundingClientRect(); query.exec((res) => { .
2020-11-21 09:53:09
1313
原创 vue上传图片至又拍云
vue项目中上传图片至又拍云使用的是官方的FORM API方法，官方链接：https://help.upyun.com/knowledge-base/form_api/#old-authorization。图片的上传过程中主要用到的参数为file，policy、signature，file这里直接使用的element-ui上传组件。policy主要参数，参考官方链接：https://help.upyun.com/knowledge-base/form_api/#upload_args。从官方链接中可以看
2020-11-04 15:41:58
855
原创 使用electron将项目封装为桌面版
1、下载electron工程可通过git命令克隆：git clone git@gitee.com:yzhaof/electron.git，或者前往页面直接下载：https://gitee.com/yzhaof/electron。工程拉取完成后，需使用npm install命令安装所需的依赖。2、项目打包将要封装的项目打包，并将打包后的文件放入克隆下的工程文件中，替换其中index.html。3、配置package.json配置封装命令。添加"pack": “electron-packager .
2020-11-02 17:07:12
270
原创 微信小程序退出重新进入时跳转特定页面
微信小程序退出时会记录当前页面的状态，短时间内再次进入会显示退出前的状态。解决方案：在app.js文件中添加onHide方法，onHide方法监听小程序切后台，在app.js文件中使用会在每次程序退出时调用。onLaunch: function () { //添加全局的判定条件，如自动登录的跳转}onHide: function () { //调用上方方法，在程序关闭时按条件跳转相应页面，下次启动时则会跳转指定页面}...
2020-10-24 10:29:56
4367
原创 微信小程序向下加载更多
小程序中向下加载可通过scroll-view来实现，scroll-view用法官方链接https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html。 <scroll-view class="main" scroll-y="false" bindscrolltolower="bottom"> //scroll-view需设定高度，内部元素超出滚动，可通过设定scroll-y="false" 来隐藏滚动
2020-10-23 17:21:18
429
原创 微信小程序图片本地缓存显示问题
在微信小程序开发的图片引用中，会出现服务器端的图片已经改变，而前端引用显示的图片却还是改变之前的图片，这是因为在图片显示时小程序会缓存显示图片和对应的路径，再次显示该路径的图片时会先从本地查找，存在时显示本地缓存的图片，在经过一段时间之后才会更新为最新图片。解决方法：在前端页面显示的引用路径中添加参数。只是在显示路径中添加，不改变服务端图片路径，？添加参数，可以是随机数时间戳等，避免引用缓存数据。this.setData({ src: 图片路径 + '?' + Math.random() / 999
2020-10-12 09:18:01
1846
原创 微信小程序图片上传又拍云路径优化2
前端又拍云上传操作流程可查看：https://blog.csdn.net/a_115098/article/details/108752649。上边的方法采用的当前时间为层级目录加图片md5值进行划分处理，这种结构使图片路径分层比较清晰，相同图片只需添加一张就可以共用，这里用的是第二种路径方法。面对用户个体，将一个用户的特定值做一个文件夹，不同位置的图片以位置为名称加.png等后缀命名，这种方法只需用户在调用某部分的上传图片功能时将位置信息作变量传入进行命名即可。这种路径命名方法的好处是便于查看管理，
2020-09-27 16:14:41
329
原创 微信小程序前端使用又拍云存储上传图片
目录一、前端引用二、优化调整一、前端引用参考链接：又拍云小程序sdk。引用sdk.js文件到目录中，这里代码不需要改动。function Upyun (options) { this.bucket = options.bucket this.operator = options.operator this.getSignatureUrl = options.getSignatureUrl}Upyun.prototype.upload = function (options) {
2020-09-23 15:25:36
898
原创 微信小程序接口事件封装
1、config.js全局配置文件创建config.js全局配置文件，文件可以用来存放小程序版本、开发生产环境、公用路径等配置信息。var wxconfig = new Array()wxconfig['apiurl'] = "接口路径"wxconfig['imgurl'] = "图片路径"wxconfig['appid'] = "appid"wxconfig['secret'] = "secret"export default wxconfig2、接口封装文件http.js封装接口请
2020-09-10 15:58:55
324
原创 微信小程序获取手机号并解密详解
微信小程序获取手机号并解密1 获取手机号2 解密2.1 获取所需数据2.2 解密返回数据1 获取手机号获取手机号的过程官方文档有详细的介绍。参考官方链接要注意的是，此功能只对非个人且完成认证的开发者开发，个人开发者无法使用该功能。获取微信用户绑定的手机号，需先调用wx.login接口。//wxml文件使用button按钮触发获取手机号事件，open-type="getPhoneNumber" 不能少<button open-type="getPhoneNumber" bindgetphone
2020-09-09 17:23:44
15732
16
原创 vue中web手机端的适配问题
vue中web手机端的适配问题在使用vue进行web手机端适配时可以使用rem做单位进行适配。rem为相对单位，是相对HTML根元素的字体大小为基准计算大小。如设置html:{font-size:16px}，那么p{font-size: 1rem}的字体大小就为16px。所以使用rem进行适配的大体思路就为：根据屏幕的大小调整html元素的字体大小。//这里使用的vuecreated() {//获取html var html = document.getElementsByTagNam
2020-09-02 10:58:01
2749
原创 常用但易忘的基础css样式
text-indent: 2em; //首行缩进//设置屏幕宽度小于等于767px时的样式@media screen and (max-width: 767px){.main{}}//区间@media screen and (max-width: 767px) and (min-width: 700px)outline: medium; //取消输入框点击高亮border: 1px solid #eee; //实线，dotted点状，double双线，dashed虚线//网格背景ba
2020-08-21 20:17:24
196
原创 使用echarts中国地图添加气泡时使用接口访问的数据不显示
这里写自定义目录标题解决方案Vue，使用echarts绘制中国地图添加数据标点时直接使用data中的数据能正常显示，使用接口访问的数据添加或赋值给data中的数据时能正常打印却不能正常显示。解决方案尝试过很多方法都不能解决问题，具体深层原因就先不做深究。暴力解决方法：直接将图表创建的option放在接口then方法中。var Chart = this.$echarts.init(document.getElementById('map')); this.$http.get("...").the
2020-08-20 09:54:05
723
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人