移动端
文章平均质量分 58
暴走的奶糖
码农
展开
-
小程序直接跳转到公众号的方法
实现效果 小程序打开公众号的实现效果 小程序不能直接打开公众号首页,但是可以通过打开公众号的某一篇文章,然后进入到公众号内。具体实现方法在公众号后台创建一篇文章,最好以xx.weixin.qq.com为域名 ,否则可能出现小程序不识别的问题;在小程序项目里创建一个webView的页面,访问的链接就是配置好的公众号文章链接;在本地运行小程序,在需要跳转的地方添加方法,点击先跳转到原创 2021-04-19 17:51:22 · 24802 阅读 · 6 评论 -
Jest测试框架知识点总结
jest 是 facebook 推出的一款测试框架。JEST 官方文档:https://jestjs.io/docs/en/getting-started 需要连接外网。一、Getting Started开始安装:yarn add --dev jestor npm:npm install --save-dev jest提示:Jest 支持 yarn 的命令,但是 npm 也能工作。你可以比较 yarn 和 npm 在 yarn 命令文档里https://yarnpkg.com/en/.原创 2020-07-09 16:33:05 · 6058 阅读 · 1 评论 -
React 二级联动的实现方法
实现效果:普通h5页,图片我进行了裁剪,把用户那部分删掉了,不过也不影响说明小程序效果原创 2020-07-09 16:24:49 · 1470 阅读 · 0 评论 -
实现多个标题的吸顶
<html> <head> <title>实现多个标题的吸顶</title> </head> <body> <ul id="container"> <h1>实现多个标题的吸顶</h1> <section> <div class="box">header1</div> <li&原创 2020-05-19 18:51:17 · 417 阅读 · 0 评论 -
安卓性能优化之构建优化
安卓性能优化之构建优化建议整理1.为开发环境创建一个变体有许多配置是你在准备 app 的 release 版本的时候需要,但是当你开发 app 的时候是不需要的,开启不必要的构建进程会使你的增量构建或者 clean 构建变得很慢,因此需要构建一个只保留开发时需要配置的变体,如下例子创建了一个dev和prod变体(prod 为 release 版本的配置)。android { ... ...转载 2020-01-20 14:51:36 · 628 阅读 · 0 评论 -
PWA渐进式Web应用
Progressive Web App,简称 PWA,是提升 Web App 的体验的一种新方法,能给用户原生应用的体验。目录:1、PWA 基本介绍PWA 全称 Progressive Web App,即渐进式 WEB 应用2、PWA 核心技术揭秘Web app manifestService workerPromise / async / awaitFetch apiCa...原创 2020-01-20 14:46:27 · 657 阅读 · 0 评论 -
iOS如何阻止“橡皮筋效果”?
1.iOS safari 如何阻止“橡皮筋效果”?背景:iOS 5 之后开始支持 Native Scrolling,为 Web App 带来媲美原生应用的滚动体验。使用十分方便只要在 CSS 中加入:HTML CSS.wrapper {overflow: auto;-webkit-overflow-scrolling: touch;}但是 iOS Safa...原创 2019-01-02 11:07:56 · 8083 阅读 · 0 评论 -
h5分享到微信唤起app功能
下面说一下,常见的微信唤起app功能。先看下效果,我这找的以前的记录,因为我们线上已经改成分享唤起小程序了,大家将就看下吧。废话我也不多说,都是自己以前踩过的坑,直接上代码吧。1、在需要唤起的地方进行方法调用:const callApp = require(&amp;amp;quot;…/utils/callApp&amp;amp;quot;); //引入callApp.js文件const app = new callApp({sch...原创 2019-01-02 11:27:34 · 6974 阅读 · 0 评论 -
h5和RN倒计时实现方法
工作中我们经常遇到需要倒计时的功能,那么具体如何实现呢,下面我把自己写过的几种方法提供给大家,希望大家能共同进步,转载要注明出处哦!第一种写法:html:<div class=""> <div class=""> 距结束剩余 <b v-if="time.day>0"> <span v-t原创 2019-01-02 14:12:11 · 1487 阅读 · 0 评论 -
三分钟弄懂iPhone X 设计尺寸和适配
iPhone 8属于常规升级,屏幕与以往的iPhone6、6S、7系列相同。只有iPhone X的分辨率发生了变化,但变化仅限于物理像素层面。在真正决定屏幕内容的逻辑像素层面,新版的iPhone X与过去我们熟知的iPhone 4.7’’、iPhone 5.5’’ 放大模式宽度相同。通俗的说,iPhone X可看做是iPhone 4.7’’ 的加长版然而,事情并不是设计图加长这么简单。...转载 2020-07-09 09:56:58 · 518 阅读 · 0 评论 -
Node版本管理控制器
最近项目切换频繁,经常需要用到node版本的切换,现在总结一下Node的版本管理控制器的使用和安装1、Node 可以用n来管理版本的切换安装:npm install -g n查看帮助:➜ ~ n --helpUsage: n [options] [COMMAND] [args]Commands: n Disp...原创 2019-09-25 17:08:28 · 1197 阅读 · 0 评论 -
React Native 实现每4个数字或英文加一个空格的实现方法
本人自己写出的是想代码,如果有更好的实现方式,希望大家能回复下,共同进步吧。一、需要实现的功能1、只能输入数字或者英文2、最多输入16位3、每输入4位自动加一个空格4、删除空格后的第一个的数字或字母的时候,自动把空格删除5、输入内容,文本框后面会出现关闭图标先按照这个功能写下实现代码:我这里使用React Native 编译成的h5页面,没有控制软键盘的弹出。我这里使用的是普...原创 2019-01-02 10:30:07 · 2921 阅读 · 0 评论 -
实用!移动端vConsole使用方法
平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的,这时候就需要移动端调试工具vConsole那么,如果将console.log应用到移动端呢?需要借助第三方插件:vConsole第一种用法:引入js文件资源链接&amp;amp;amp;lt;script src=&amp;amp;quot;path/to/vconsole.min.j...原创 2019-01-04 17:09:48 · 36774 阅读 · 2 评论 -
xcrun: error: unable to find utility "instruments", not a developer tool or in PATH
用web storm 运行react-native 工程时,出错:xcrun: error: unable to find utility“instruments”, not a developer tool or in PATH解决方法:先安装xcode在 终端执行如下命令xcode 安装路径sudo xcode-select -s /Applications/Xcode.ap...原创 2018-11-28 16:17:53 · 1125 阅读 · 0 评论 -
页面适配之pt、px、em、rem用法和特点
因为自己也经常做移动端的开发工作,现总结一份页面适配的笔记。1. pt点(Points),绝对长度单位。 印刷业上常使用的单位,磅的意思,一般用于页面打印排版。 不知道经常做设计的同学知不知道zeplin这个网站,它用的像素单位都是pt。 1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px 用法:div { font-...原创 2018-08-10 09:57:28 · 16314 阅读 · 0 评论 -
微信小程序组件封装-如何进行属性判断
最近开发小程序,对小程序组件封装进行了一定的了解,现在分享下。个人理解:底层组件封装最好原子化,不带业务逻辑,业务组件后期可以根据底层组件在进行封装开发。尽量做到一次开发,多处使用的效果,解放生产力,提高开发效率。如果你没有任何小程序开发经验,可以结合官网的同时,参考下这个网站先学习一下https://www.w3cschool.cn/weixinapp/下面以轮播图为例,讲下...原创 2018-08-15 17:01:28 · 3112 阅读 · 1 评论 -
倒计时功能如何开发?
前言 我们在开发过程中经常遇到倒计时的功能,那么应该如何开发呢,下面直接放干货单个倒计时功能/** * function 倒计时 * 参数:intDiff 时间 * 单位:s 秒 * author miaoyanhui */export function countDown(intDiff,fn) { let time = setInterval(fu...原创 2018-08-16 10:32:33 · 873 阅读 · 0 评论 -
二级联动效果开发实例
先看下效果图类似这种效果如何开发下面进行讲解 注:这里做的不是组件封装,是以业务角度进行的代码开发html&lt;div v-transfer-dom&gt; &lt;popup v-model="state.timeFlag" :hide-on-blur="false" position="bottom" cl原创 2018-08-16 11:11:07 · 992 阅读 · 0 评论 -
Flutter解密
前言 这是我转载的一篇文章,文章主要对Flutter进行了详细的讲解。文章最后有原文链接。背景 Flutter:谷歌的移动端UI开源框架,2018年2月27日, Google发布了Flutter的第一个Beta版本。它是Google使用Dart语言开发的移动应用开发框架,使用Dart代码构建高性能、高保真的iOS和Android应用程序。Flutter的工具和库可以帮助开发者轻松地...转载 2018-08-16 14:47:34 · 2843 阅读 · 0 评论 -
h5-吸顶效果的实现方法
前言 我们在开发过程中,经常遇到这种需求,搜索框或者菜单,初始位置不在顶部,当我们往上滑动页面的时候,它们会固定到顶部,往下滑动,又回到初始位置。那么这个功能,如果实现呢,下面将进行详细讲解.一、通过监听scroll事件,实现吸顶功能这是大家经常用的一种方法 吸顶效果的基本的开发思路,利用scroll事件进行监听scrollTop的值,当scrollTop达到一定的值得时候...原创 2018-08-17 09:37:53 · 16511 阅读 · 1 评论 -
weex页面开发模式
页面开发模式:第一种:单页面(SPA) 通过 Vue-router + Vuex 来实现。这种方式是通过Router的方式来进行页面切换,如果页面不需要太多的交互效果,可以使用这种方式来实现。第二种:独立页面,每个页面都独立一个 bundle js 文件,通过 navigator对象进行页面切换,交互效果较好。推荐的开发模式整体架构使用独立页面的方式,在 src/entry 配置...原创 2018-09-17 15:18:08 · 798 阅读 · 0 评论 -
React Native引入动画效果
此处运用了Lottie动画,请参考https://www.lottiefiles.com/首先安装 npm i lottie-web 页面中引入import lottie from 'lottie-web'import animationData from './data.json'; //这里引入你的动画json文件代码中写入componentDidMount() { ...原创 2018-09-17 16:36:34 · 1156 阅读 · 0 评论 -
【vue笔记2】-自定义指令
基础除了内置指令,Vue.js也允许注册自定义指令。自定义指令提供一种机制将数据的变化映射为DOM行为。Vue.js用Vue.directive(id,definition)方法注册一个全局自定义指令,它接受两个参数:指令ID与定义对象。也可以用组件的directives选项注册一个局部自定义指令(此方法相当于AngularJS restrict)属性值为A。钩子函数bind——只调用一...原创 2018-11-04 19:15:09 · 979 阅读 · 0 评论 -
React Native setState赋值
state(状态)对于需要改变的数据,我们需要使用state。使用方法:一般来说,我们需要在 constructor 中初始化state,然后在需要修改时调用setState方法。 import React, { Component } from 'react'; import { Text, View } from 'react-native'; export default cla...原创 2018-11-27 15:12:16 · 2044 阅读 · 0 评论 -
React native if判断和for循环的写法
if判断的写法import React from 'react';import { View, Image, TextInput, Text } from 'react-native';class BindCard extends React.Component { constructor(props) { super(props); this.state = {...原创 2018-11-27 16:04:02 · 12167 阅读 · 0 评论 -
【weex实战】项目开发经验
weex实战项目开发经验前言本人近期加入了公司开发的一款应用i7,此款应用前端选用的weex开发语言,就weex下面我来讲解一下自己的经验总结,可能不全。正文1. 什么是weex? WEEX是一个使用Web开发体验来开发高性能原生应用的框架介绍这里,我参照的官网,建议同学们还是去官网看一遍,下面有网址。Weex是使用同一套代码来构建 Android...原创 2018-08-04 23:47:08 · 2750 阅读 · 0 评论