撸码的小哥-CSDN博客

原创 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 804

原创 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 1758

微信公众号分享： /** 微信分享*/ 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 279

原创 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 311

原创 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 3313 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 3436 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 5507

转载 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 88

转载 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 149

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

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 440

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

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

2020-10-13 21:40:07 783 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 101

转载 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 382 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 1275

原创 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 4093

原创 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 1372

原创 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 160

原创 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 2224

原创 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 822

原创 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 119

原创 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 2772

转载 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 293

原创 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

空空如也

空空如也