自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

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

原创 uni-app 配置全局变量,区分渠道来源

微信小程序: pages/goods/goods?id=23&mid=1002 支付宝小程序alipays://platformapi/startapp?appId=&page=pages%2Fgoods%2Fgoods%3Fid%3D23&query=mid%3D1002onShow: function (options) { // 通过urlscheme进入 if (options...

2021-09-17 17:53:48 801

原创 H5 自动播放背景音乐

html: <audio id="audio" controls loop autoplay preload hidden> <source src="/static/moon.mp3" type="audio/ogg"> <source src="/static/moon.mp3" type="audio/mpeg"> 您的浏览器不支持 audio 元素 <.

2021-09-17 09:33:53 1853

原创 uni-app之微信小程序web-view显示H5页面

<template> <view class="webview"> <web-view :webview-styles="webviewStyles" :style="webviewStyles" :src="link" @message="onWebMessage"></web-view> </view></template><script> import { siteDomain.

2021-02-18 09:47:14 1755

原创 微信公众号分享

微信公众号分享: /** 微信分享*/ async initShare () { if (isWeChat()) { let url = `${window.location.protocol}//${window.location.host}/activity/game/share?help_user_id=${this.$store.state.User.userInfo.id}&game_id=${this.$route.quer

2021-01-20 09:24:29 205

原创 微信公众号登录

第一步:检测是否是微信环境 * 判断是否在微信中 * @returns {boolean} */export function isWeChat () { var ua = navigator.userAgent return !!ua.match(/MicroMessenger/i)}/** * 判断是否在微信小程序中 * @returns {boolean} */export function isWechatMiniProgram () { if (window.

2021-01-20 09:21:19 274

原创 flutter之Container盒子小部件

Container( // 接收的子元素 child: Icon(Icons.pool,size: 32.0, color: Colors.white,), // 内边距 padding: EdgeInsets.all(16.0), // 外边距 margin: EdgeInsets.all(16.0), // 宽度 width: 90.0, // 高度 height: 90.0, .

2020-12-16 10:07:14 309

原创 uni-app结合view实现小程序的scroll-view的上拉加载和下拉刷新功能

使用订单列表为实例:实现uni-app结合uview实现小程序的scroll-view的上拉加载和下拉刷新功能<view class="order-list"> <!--头部--> <u-navbar :is-fixed="true" :is-back="true" title="订单列表"></u-navbar> <!--导航栏--> <u-tabs-swiper cla

2020-11-24 10:33:41 3308 2

转载 vue 实现商品多规格的sku

template<div class="wrap wrap-sku"> <div class="product-box"> <div class="product-content"> <div class="product-delcom" v-for="(ProductItem,n) in simulatedDATA.specifications"> <p>{{ProductItem.n

2020-10-20 16:13:27 3435 4

原创 uni-app上HbuilderX使用夜神模拟器调试Android App

1. 下载一个Hbuilder http://www.dcloud.io/2. 下载一个夜神模拟器https://www.yeshen.com/3. 将安装的Hbuilder和夜神模拟器打开。。。4. 将选择的移动App导入Hbuilder。5. Hbuilder需要连接夜神模拟器(可以将下面代码拷贝替换路径后保存为bat文件,点击执行)@echo **********************进入夜神模拟器安装路径 Nox\bin**********************cd ..

2020-10-19 10:57:51 1780

原创 uni-app监听处理H5/App默认返回事件

页面生命周期上:onBackPress(event)返回 event ={from: backbutton | navigateBack}说明当用户进行以下操作时,会触发该函数:Android 实体返回键 (from = backbutton) 顶部导航栏左边的返回按钮 (from = backbutton) 返回 API,即uni.navigateBack()(from = navigateBack)注意事项:只有在该函数中返回值为 true 时,才表示不执行默认的返回,自行..

2020-10-17 16:11:45 5505

转载 MIxin原理的实现

Mixin 指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口。它的最简单实现如下const a = { a: 'a'};const b = { b: 'b'};const c = {...a, ...b}; // {a: 'a', b: 'b'}下面是一个更完备的实现,将多个类的接口“混入”(mix in)另一个类。function mix(...mixins) { class Mix { constructor() { for (let

2020-10-17 14:24:15 404

转载 ES6之Class继承

Class 可以通过extends关键字实现继承class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString() { return this.color + ' ' + super.toString(); // 调用父类的toString() }}super关

2020-10-17 12:01:44 272

转载 ES6之Class对象

constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。class Foo { constructor() { return Object.create(null); }}new Foo() instanceof Foo// falsenew实

2020-10-17 11:38:55 216

转载 ES6之async函数

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。async函数内部return语句返回的值,会成为then方法回调函数的参数。function timeout(ms) { return new Promise((resolve) => { setTimeout(resolve, ms); });}async function asyncPrin

2020-10-16 09:34:27 73

转载 JavaScript之this和对象原型

this:动态指向this的绑定遵循以下规则:// 1.默认绑定:不适用于其他的默认规则,this绑定到全局对象(严格模式下绑定到undefined)function foo() { console.log(this.a);}var a = 2;foo(); // 2// 2.隐式绑定:调用位置有上下文对象,this绑定到引用链中的最后一层function foo() { console.log(this.a);}var obj2 = { a: 42, foo: foo

2020-10-14 17:18:10 229

转载 JavaScript闭包(作用域和作用域链)

JavaScript 的作用域是 通过函数来形成,也就是说一个函数内定义的变量,函数外是不可以访问。让变量不会外泄、暴露出去。也就是说作用域最大的用处就是隔离变量,不同作用域下同名变量不会有冲突。ES6 之前 JavaScript 没有块级作用域,只有全局作用域和函数作用域。ES6 的到来,为我们提供了‘块级作用域’,可通过新增命令 let 和 const 来体现。function fn() { var a = 'miya'; console.log(a); // 输出"miya"..

2020-10-14 16:23:48 141

转载 ES6之Generator函数

Generator 函数是一个状态机,封装了多个内部状态。一是,function关键字与函数名之间有一个星号;二是,函数体内部使用yield表达式,定义不同的内部状态。function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending';}var hw = helloWorldGenerator();hw.next()// { value: 'hello', done: false

2020-10-14 14:43:35 87

转载 ES6之Promise对象

Promise对象代表一个异步操作,有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。resolve() 状态成功->then(),reject()捕捉错误 ->catch()一旦状态改变,就不会再变。用Promise对象实现的 Ajax 操作的例子。const getJSON = function(url) { const promise = new Promise(function(resolve, reject){

2020-10-14 10:47:09 148

原创 微信小程序之卡片轮播

wxml:<swiper bindchange="cardSwiper" indicator-dots="true" circular="true" autoplay="true" interval="5000" duration="500" indicator-color="#8799a3" indicator-active-color="#0081ff" class="cardSwiper"> <block wx:for="{{swiperList}}" wx:key="

2020-10-13 21:47:26 1069

原创 微信小程序之setData使用

setData()1、参数接受一个对象,以key,value的形式表示;2、参数和变量名称一致,可用一个值代替(es6新语法特性)3、可以设置一个或多个数据this.setData({ list:'change data', info:'change data'})4、修改json对象that.setData({ 'carSum.total_count': count, 'carSum.total_fee': sum})5、修改数组项的属性let q...

2020-10-13 21:44:00 439

原创 微信小程序路由跳转带参数,传递对象易错点

微信小程序报错 Unexpected end of JSON input;at pages/flow/checkout page getOrderData function这个报错是在将数组对象通过页面传值,传到指定页面时报的错。是因为JSON.parse无法识别某些url中的特殊字符,所以报错。因此解决这个报错的方法是将要传输的数据用 encodeURIComponent()函数(可把字符串作为 URI 组件进行编码) 先进行编码,传输过去后再通过decodeURIComponent()函数解

2020-10-13 21:40:07 782 1

转载 ES6之Reflect对象

1、将Object对象的一些明显属于语言内部的方法(比如Object.defineProperty),放到Reflect对象上2、修改某些Object方法的返回结果,让其变得更合理。3、让Object操作都变成函数行为。4、Reflect对象的方法与Proxy对象的方法一一对应,只要是Proxy对象的方法,就能在Reflect对象上找到对应的方法。静态方法:Reflect.get(target, name, receiver):// Reflect.get方法查找并返回targ..

2020-10-12 09:27:57 100

转载 ES6之Proxy代理器(拦截)

Proxy 可以理解成,在目标对象之前架设一层“拦截”,外界对该对象的访问,都必须先通过这层拦截,因此提供了一种机制,可以对外界的访问进行过滤和改写。ES6 原生提供 Proxy 构造函数,用来生成 Proxy 实例。var obj = new Proxy({}, { get: function (target, propKey, receiver) { console.log(target); // 目标对象:拦截和改写的对象 console.log(prop); // 对象

2020-10-10 16:54:01 381 1

原创 rem之移动端自适应

(function(designWidth, maxWidth) { var doc = document, win = window; var docEl = doc.documentElement; var metaEl, metaElCon; var styleText, remStyle = document.createElement("style"); var tid; function refr.

2020-10-05 23:49:47 124

原创 input属性name传输参数(对象型)

input属性(name):name属性标识前端数据传输到后端的字段名称;根据后端需求的字段,修改成相应的字段名字。但当遇到特殊情况,传输的格式如下;{ pageNo: 1, pageSize: 10, data: { orderSn: '' }}那么name字段就需要用data[]将字段装起来(如下):<form ref="exportForm" :action="apiurl+'/laberlogbackend...

2020-10-05 23:47:57 1274

原创 uni-app之微信小程序识别二维码参数

小程序码的参数是服务端通过设置场景值设定客户端接收:案例1:// 后端场景值:?scene=params// 页面onLoad(e) { // console.log(e.scene) const scene = decodeURIComponent(e.scene) // 注意:这里的判断不能直接使用!scene this.invite_code = scene}案例2:// 后端场景值: ?scene=cardId_1// 首页onLoad(option) {

2020-10-05 23:43:09 4091

原创 uni-app之微信小程序分享

微信小程序分享有两种形式:第一种:微信小程序右上角分享按钮第二种:按钮绑定点击分享// 页面按钮设置传参按钮<button open-type="share" class="i-btn"> 立即邀请伙伴</button>// 设置分享方法onShareAppMessage(res) { if (res.from === 'button') {// 来自页面内分享按钮 console.log(res.target) } r

2020-10-05 23:37:50 1368

原创 react-redux实现原理

import React, {Component} from "react";const ValueContext = React.createContext();// connectexport const connect = ( mapStateToProps = state => state, mapDispatchToProps) => WrappedComponent => { return class extends Component { .

2020-10-04 19:16:22 127

原创 redux扩展,自定义redux以及中间件实现思路

存储状态state 获取状态getState 更新状态dispatch变更订阅subscribe自定义redux中间件:kRedux.jsexport function createStore(reducer, enhancer){ if (enhancer) { return enhancer(createStore)(reducer) } // 保存状态 let currentState = undefined; ..

2020-10-04 14:46:15 159

原创 react组件跨层级通信context

React中使⽤Context实现祖代组件向后代组件跨层级传值。 Vue中的provide & inject来源于ContextContext API React.createContext 创建⼀个 Context 对象。当 React 渲染⼀个订阅了这个Context 对象的组件,这个组件会从组件树中离⾃身最近的那个匹配Provider 中读取到当前的 context 值。Context.Provider Provider 接收⼀个 valu...

2020-10-04 14:02:46 309

原创 react之弹窗组件的设计和实现

设计思路 弹窗类组件的要求弹窗内容在A处声明,却在B处展示。react中相 当于弹窗内容看起来被render到⼀个组件⾥⾯去,实际改变的是⽹ ⻚上另⼀处的DOM结构,这个显然不符合正常逻辑。但是通过使⽤ 框架提供的特定API创建组件实例并指定挂载⽬标仍可完成任务。// 常⻅⽤法如下:Dialog在当前组件声明,但是却在body中另⼀个div中显示import React, {Component} from "react";import Dialog from "../conpon..

2020-10-03 18:49:28 2223

原创 react之表单组件的封装设计与实现

举例:antd组件antd表单使⽤⽤state实现⽤户名密码登录//FormPage.jsimport React, {Component} from "react";import {Form, Input, Button, Icon} from "antd";export default class FormPage extends Component { constructor(props) { super(props); this.state =...

2020-10-03 16:32:53 818

原创 react高阶组件HOC

定义:⾼阶组件是参数为组件,返回值为新组件的函数。基本使用:// HocPage.jsimport React, {Component} from "react";// hoc: 是⼀个函数,接收⼀个组件,返回另外⼀个组件//这⾥⼤写开头的Cmp是指function或者class组件const foo = Cmp => props => { return ( <div className="border"> <Cmp {...p..

2020-10-03 15:37:46 118

原创 react-redux如何使用?

安装npm install react-redux --save使⽤react-reduxreact-redux提供了两个api 1. Provider 为后代组件提供store 2. connect 为组件提供数据和变更⽅法 全局提供store,index.jsimport React from 'react'import ReactDom from 'react-dom'import App from './App'impor...

2020-10-03 14:49:23 66

原创 redux如何使⽤?

在下⾯的场景中,引⼊ Redux 是⽐较明智的: 1、你有着相当⼤量的、随时间变化的数据; 2、你的 state 需要有⼀个单⼀可靠数据来源; 3、你觉得把所有 state 放在最顶层组件中已经⽆法满⾜需要了。 4、某个组件的状态需要共享。安装reduxnpm install redux --save⽤⼀个累加器举例 1. 需要⼀个store来存储数据 2. store⾥的reducer初始化state并定义state修改规则 3. 通过dispa...

2020-10-03 14:42:16 54

原创 create-react-app脚手架搭建react项目

第一步:下载安装全局的脚手架工具npx i -g create-react-app或者yarn add -g create-react-app第二步:脚手架创建项目create-react-app my-app第三步:切换至项目根目录cd my-app第四步:运行项目npm start或者yarn start其他打包:npm run build或者yarn build...

2020-09-25 16:18:45 55

原创 react-native初始化构建项目

使用react-native-cli搭建react-native跨端项目:第一:安装react-native-clinpm install -g react-native-cli第二:初始化项目react-native init myproject第三:运行项目react-native run-android --port 9999

2020-09-22 14:25:42 185

原创 uni-app实现多图片批量上传,预览,删除

uni-app实现多图片批量上传,预览,删除view<view class="c-cell-value-img-box"> <view class="value-img" v-for="(pItem,pIndex) in item.pics" :key="pIndex"> <image :src="imgUrl + pItem" @click="previewImg(index,pItem)"></image> <mx-icon na

2020-09-21 11:41:01 2771

转载 Android平台签名证书(.keystore)生成指南

Android平台打包发布apk应用,需要使用数字证书(.keystore文件)进行签名,用于表明开发者身份。Android证书的生成是自助和免费的,不需要审批或付费。可以使用JRE环境中的keytool命令生成。以下是windows平台生成证书的方法:安装JRE环境(推荐使用JRE8环境,如已有可跳过)可从Oracle官方下载jre安装包:https://www.oracle.com/technetwork/java/javase/downloads/index.html下面以安装目录为

2020-09-21 11:31:55 292

原创 uni-app二次封装接口请求

uni-app二次封装接口请求,使用Promise实现链式回调class HTTP { request({ url, data = {}, method = 'POST' }) { return new Promise((resolve, reject) => { this._request(url, resolve, reject, data, method) }) } _request(url, resolve, reject, data, metho

2020-09-21 10:25:54 828

空空如也

空空如也

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

TA关注的人

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