- 博客(25)
- 收藏
- 关注
RSS订阅原创 移动网页支付（微信H5支付和支付宝网页支付）
正常流程用户支付完成后会返回至发起支付的页面，如需返回至指定页面，则可以在h5_url后拼接上redirect_url参数，来指定回调页面。您希望用户支付完成后跳转至https://www.wechatpay.com.cn，则拼接后的地址为h5_url= https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?1、前端发送（流水号，手机号，产品ID，金额,回调地址，取消地址,支付类型）支付信息给后端，4、支付完后跳回到商家网页内，最后展示支付结果。
2023-02-27 17:16:35
1126
原创 微信jsapi支付详解
JSBridge，一个js桥帮助H5和Native之间的通信，因为js是运行在一个js容器里，与原生运行环境隔离，所以需要这种机制来实现这两个的双向通信。第二步：获取到微信支付弹窗的参数：如appId,时间戳，随机窜，微信签名方式，微信签名。前提配置：公众号要设置好支付域名，网页授权域名，企业账号，商户号，开通jsapi支付权限。首先：需要先判断环境，如果不是微信环境下就切换成H5浏览器环境下支付。第一步：我这边是要通过微信code发送请求给后端获取唤起微信弹窗参数。第三步：唤起支付弹窗。
2023-02-27 15:43:46
3008
原创 从头搭建vue3+webpack移动端项目
依次npm 下载sass(也可以是less,我习惯用sass),sass-loader,style-loader,webpack,webpack-cli,webpack-dev-server,webpack-merge。(webpack版本5.x.x以上的，必须要单独创建这个postcss.config.js，写在vue.config.js或者webpack.config.js里是无效的)在项目根目录下创建postcss.config.js文件，我用到vant组件库 所以。
2023-02-24 16:55:17
699
原创 UmiJs（v3.x版本）
1,下载umiJs:npm i umi -g2,新建一个myUmi空文件夹,cd 到myUmi中 ，使用官方工具创建项目：npm create @umijs/umi-app3,下载依赖：npm i4,运行 npm start生成的文件目录小问题：npm run build打包后 index.html打开空白，路径报错。因为打包默认是根路径下，所以需要在配置文件.umirc.ts 添加publicPath:’./’，.umirc的基本配置：import { d..
2022-04-24 15:55:04
3455
原创 学习react----第四天
react-router-dom:react-router-dom是处理项目中路由问题的组件库，使用create-react-dom创建的react项目，默认是没有这个组件库，需要额外下载。react-router-dom是基于浏览器的history对象来进行操作的，该对象使用栈数据结构维护历史记录，当点击一个新的链接时，就将该链接入栈，如果replace属性为true，点击时总是替换history对象的栈顶链接。BrowserRouter：浏览器的路由方式，可以将其理解为一个容器，用来放Rou
2022-04-12 16:56:00
1090
原创 学习react----第三天
HOOK:Hook是react 16.8新增的特性，可以在函数式组件中置入react的state以及生命周期等特性，hook不能在class组件中使用。我只着重学了下面两个基本的apiuseState：import { useState } from "react";export default function MoveCom(props) { function clickHandle() { setNums(nums+1); console.log(nums);...
2022-04-11 17:42:35
707
原创 学习react----第二天
列表遍历&Key像vue中的v-for指令在React里遍历数组对象用map，循环遍历必须加key,key必须是在数组中唯一的，尽量不绑定index，否则 数组更新数据了 但ui界面没有更新，DOM渲染的时候，是根据Key值的不同 新旧对比来替换的。export default class Items extends React.Component{ // constructor(props){ // super(props) // } // com...
2022-04-08 15:47:09
1048
原创 学习react----第一天
使用脚手架创建项目：npm create-react-app 项目名弹出webpack配置文件：npm run eject组件：函数式组件+类组件事件绑定：在react里事件的命名使用小驼峰式命名(如：onClick),使用class定义的组件，调用绑定函数时this是undefined， 需要手动指向：如绑定事件使用箭头函数 onClick=()={this.clickHandle()}或者onClick={this.clickHandle}在函数处理那用箭头函数。clickHandle=
2022-04-07 15:48:52
602
原创 vue-video-player使用及修改样式
首先下载并引入(main.js引入)：import VideoPlayer from 'vue-video-player';require('video.js/dist/video-js.css');require('vue-video-player/src/custom-theme.css');const hls = require('videojs-contrib-hls')Vue.use(VideoPlayer)Vue.use(hls)使用: <div class="
2022-03-10 11:38:30
5687
原创 本地图片上传前预览(转64位),64位图片转成二进制流
本地图片上传前预览(转64位)html部分 <!-- 预览的图 --> <img :src="preview" class="preview" crossorigin="anonymous" v-if="preview" alt="" /> <input @change="imageUploadClick" type="file" apt
2022-02-11 09:43:27
735
原创 使用nvm在windows下管理不同项目的node版本
1、在下载安装前 将电脑原本的node版本和文件夹都删掉。2、下载安装插件nvm-setup.zip，双击nvm-setup.exe，选择好安装路径。3、设置环境变量windows+R,输入sysdm.cpl确定，选择高级-->>环境变量,如果nvm文件夹里没有nodejs文件夹就新建一个同名文件夹(注意里面一定要是空的)。4、cmd打开命令行 输入nvm list available查看可以安装的node版本，输入nvm inst
2021-12-31 15:57:10
703
原创 子组件使用watch监听父组件数据的变化也随之变化
1.父子之间的通信我们通过props传递信息，但是父组件的数据会随时变化，子组件也要跟随变化。使用watch监听父组件传递过来的值。父组件中(search为子组件)：<template> <img src="../assests/search.png" alt="" @click="getSearch()" /><input type="text" v-model="searchText" plac
2021-12-10 15:03:06
3816
原创 uni-app的swiper组件设置overflow: hidden不生效
问题:在小程序里使用swiper组件制作轮播图，给父元素设置了固定宽高，样式圆角border-radius，定位position: relative，超出隐藏overflow: hidden，在安卓机正常显示，但是在ios上圆角不能显示，原因是这个超出隐藏没有生效，所以需要在父元素在添加这四行代码。backface-visibility: hidden; transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -
2021-11-25 11:44:05
1543
原创 小程序video组件的自定义全屏/兼容安卓机的黑边填满容器/video全屏时自定义按钮被覆盖
1.自定义全屏按钮被覆盖按钮标签必须在video组件里全屏的时候才能显示出来,2.在安卓机里视频有黑边 首先需要在video标签写入 x5-video-player-type="h5" object-fit='cover'style="width= 100%; height=100%"这样在安卓机里就不会有黑边了3.自定义全屏事件(在真机调试或者预览时会有问题但是!!!打包发布测试服后是正常的) <video id="myvideo" :c...
2021-11-23 17:22:29
3630
原创 uni-app中 控制onLaunch和onLoad的异步请求先后顺序
小程序一般都需要在app.vue的onLaunch做一个异步请求获取用户的openId和token之后才能执行页面的onLoad里的异步请求，像平常用async await控制异步请求的先后顺序，在小程序里也一样，只不是需要做成全局的。如 ：在main.js里挂载Vue.prototype.$getToken = new Promise(resolve => { Vue.prototype.$isResolve = resolve;})然后在app.vue中onLaunc
2021-11-08 15:55:36
1835
2
原创 uni-app封装小程序wx.request，然后挂载到全局
首先 在src目录下创建一个request/request.js，内容如下let baseURL = "https://dfft.dsnddvideo.cn/wogds"export const http = (options) =>{ return new Promise((resolve,reject) => { wx.request({ url: baseURL+options.url, method:options.method || 'ge
2021-11-08 15:43:14
746
1
原创 vue九宫格封装好的组件 样式可以自由改哦
二话不说贴代码 反正我写的很简单！！！ 在子组件里<template> <div class="main_container box"> <div class="turntable_box"> <ul id="rotary_table"> <li v-for="(item, index) in dataNum" :key="index" :cla..
2021-11-03 15:31:39
348
原创 VUE抽奖大转盘制作
人一闲就无聊 想做点小东西 以后需要的时候拎起来就用嘿嘿嘿 我做的转盘简单没啥难度，样式也是随便整整，里面的图片都是远程的<template> <div class="turntable"> <!-- 转盘组件 --> <div class="box"> <div class="rotateBg" :style="{ transform: rotate_deg, transi.
2021-11-03 15:23:41
887
原创 uni-app小程序顶部导航自定义适配机型
主要要算navHeight(整个导航栏总的高度),statusHeight(状态栏高度),topHeight(胶囊距离顶部的距离);在app.vue中计算globalData: { //全局变量 getApp().globalData.navHeight调用读取 navHeight: 0, //整个导航栏总的高度 statusHeight: 0, //状态栏高度(手机电量WiFi) topHeight: 0, //胶囊距离顶部的距离 },...
2021-11-03 15:05:34
540
原创 uni-app自定义底部tabBar导航适配机型
1.首先需要在page.json里把"tabBar": { "custom": true}2.然后就是组件封装 props的selectIndex用来确定哪一个按钮是选中的状态<template> <div class="tabbar"> <ul> <li v-for="(item, index) in pageData" :key="index" @click="goPage(item.pagePath)...
2021-11-02 11:51:33
611
原创 vue自动获取input下一个光标，复制粘贴自动切割
1.功能描述： 有四个input输入框，在一个input输入框中输满四个字符就自动聚焦到下一个input，复制粘贴类似于兑换码的 这种16位的ZPER-21UJ-PXPK-2Y13，粘贴后按照'-'切割自动分配到不同的input框中。2.代码部分：//HTML部分<div class="box-flex"> <div class="p"> <input v-model="code_1" v-on:in
2021-10-27 10:09:06
438
原创 vue制作滑动拼图(主要是用js修改sass里的变量和vue中的event事件对象)
1.在vue中要获取event事件对象 在绑定事件时要利用$event作为参数传递。<template> <div id="imgBox"> <!-- 碎片 --> <div id="slidImg"> <img src="https://5-2ebf-4838-9ece-bde9690e8134.png" alt=""> </div> <!-- 大图 --> ...
2021-10-08 14:45:37
301
原创 vue异步修改数据 视图未变化
前几天遇到个小问题，H5页面在小程序里数据刷新了但是视图层没变化，这个问题iOS上表现正常，在安卓机上就不行，最新的值能拿到但是视图层不能刷新，于是我决定换一种写法。axios请求数据成功后立马给this.limitNumber赋新值，computed监听他的变化<p ref="limmit">{{ numView }}</p>js部分的 computed: { numView: function () { if (this.limitNumber !=
2021-08-13 15:08:04
338
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人