首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,088 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,358 阅读
3
nps内网穿透实现外网访问树莓派
32,425 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,132 阅读
5
Typecho-Joe-Theme主题帮助文档
24,619 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,305
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
6
篇与
微信小程序
的结果
2022-08-23
微信小程序调用摄像头实现拍照功能
WXML文件代码<view class="content"> <view class="camera-con"> <camera wx:if="{{cameraStatus}}" device-position="back" flash="off" binderror="error"></camera> <van-image wx:if="{{!cameraStatus}}" width="100%" height="auto" src="{{src}}" fit="fill" /> </view> <view class="btn-con"> <van-button round color="#999999" size="small" bindtap="rePhoto">重新拍照</van-button> <van-button class="take" icon="stop-circle-o" color="rgba(0,0,0,0)" bindtap="takePhoto"></van-button> <van-button round color="#999999" size="small" bindtap="sendPhoto">提交图片</van-button> </view> </view>JS文件代码Page({ data: { cameraStatus: false, src: '', }, onLoad() { const _this = this wx.getSetting({ success: res => { if (res.authSetting['scope.camera']) { _this.setData({ cameraStatus: true }) } else { // 用户还没有授权,向用户发起授权请求 wx.authorize({ scope: 'scope.camera', success() { // 用户同意授权 _this.setData({ cameraStatus: true }) }, fail() { // 用户不同意授权 _this.openSetting().then(res => { _this.setData({ cameraStatus: true }) }) } }) } }, fail: res => { console.log('获取用户授权信息失败') } }) }, // 打开授权设置界面 openSetting() { const _this = this let promise = new Promise((resolve, reject) => { wx.showModal({ title: '授权', content: '请先授权获取摄像头权限', success(res) { if (res.confirm) { wx.openSetting({ success(res) { if (res.authSetting['scope.camera']) { // 用户打开了授权开关 resolve(true) } else { // 用户没有打开授权开关, 继续打开设置页面 _this.openSetting().then(res => { resolve(true) }) } }, fail(res) { console.log(res) } }) } else if (res.cancel) { _this.openSetting().then(res => { resolve(true) }) } } }) }) return promise; }, // 拍照 takePhoto() { const ctx = wx.createCameraContext() ctx.takePhoto({ quality: 'high', success: (res) => { this.setData({ src: res.tempImagePath, cameraStatus: false }) } }) }, // 重新拍照 rePhoto() { this.setData({ cameraStatus: true, src: '' }) } })WXSS文件代码.content { padding: 0; margin: 0; position: fixed; width: 100%; display: flex; flex-direction: column; box-sizing: border-box; justify-content: space-between; overflow: hidden; height: 100vh; } image { margin: 0; padding: 0; } .content .camera-con { flex: 1; overflow: hidden; } .content .camera-con image, .content .camera-con camera { width: 100%; height: calc(100vh - 148rpx); } .content .btn-con { display: flex; justify-content: space-between; align-items: center; height: 148rpx; background-color: #333333; } .content .btn-con button { margin: 0 30rpx; } .content .btn-con .take { border: 2rpx solid #FFFFFF; border-radius: 50%; height: 93rpx; width: 93rpx; display: flex; align-items: center; justify-content: center; }
2022年08月23日
1,599 阅读
0 评论
1 点赞
2022-06-23
微信小程序原生wx.request简单封装(自用版)
调用方法import { get,post } from '../../request/request' // GET请求 const _res = await get('https://api.vvhan.com/api/ian') console.log(_res) // POST请求 const _res = await post('https://api.vvhan.com/api/ian') console.log(_res)request.jsconst request = (url, options) => { return new Promise((resolve) => { options.isLoading && wx.showLoading({ title: '正在加载', }) wx.request({ url, method: options.method, data: options.data, header: { 'Content-Type': 'application/x-www-form-urlencoded', }, success(res) { resolve(res.data) options.isLoading && wx.hideLoading(); }, fail(error) { options.isLoading && wx.hideLoading(); wx.showToast({ icon: 'none', title: '请求失败', duration: 1400 }); } }) }) } const get = (url, options = {}, isLoading = true) => { return request(url, { method: 'GET', data: options, isLoading }) } const post = (url, options = {}, isLoading = true) => { return request(url, { method: 'POST', data: options, isLoading }) } module.exports = { get, post, }
2022年06月23日
1,522 阅读
5 评论
0 点赞
2022-06-23
微信小程序登陆封装(自用版)欢迎指正
{dplayer src="https://jsd.onmicrosoft.cn/gh/uxiaohan/GitImgTypecho@master/usr/uploads/2022/07/2623010086.mp4"/}index.wxml<!-- 登陆组件弹窗 --> <van-popup show="{{ loginBtn }}" round position="bottom" custom-style="height: 24%" bind:close="onClose" duration="246"> <view class="loginPanel"> <view class="panel-title">我想要你的头像和昵称,可以嘛~</view> <view class="panel-btns"> <van-button type="info" round bind:click="onClose">不可以</van-button> <van-button type="primary" round bind:click="_login">好的</van-button> </view> </view> </van-popup> <!-- 内容 --> <block wx:if="{{!loginShow}}"> <view class="loginok"> <view>韩小韩博客 wwww.vvhan.com</view> <view>登录成功</view> <image src="{{userInfo.avatarUrl}}" mode="widthFix" /> <view>Nick:{{userInfo.nickName}}</view> <view>OpenId:{{userInfo.openid}}</view> </view> </block> <block wx:else> <van-button class="loginbtn" plain type="info" bind:click="onClose">点击登录</van-button> </block>index.jsconst app = getApp() Page({ data: { // 登陆按钮现实隐藏 loginBtn: false, // 全局是否登陆 loginShow: false, // 用户信息 userInfo: {} }, async onLoad() { const _res = await app._checkLogin() this.setData({ loginBtn: _res, loginShow: _res, userInfo: app.globalData.userInfo }) }, // 登陆 async _login() { const _res = await app._getUserInfo() _res && this.setData({ userInfo: app.globalData.userInfo, loginBtn: false }), this.onLoad() }, // 关闭登陆弹窗 onClose(e) { this.setData({ loginBtn: e.type == "click" ? !this.data.loginBtn : false }) } })app.jsApp({ onLaunch: function () { // 全局变量 this.globalData = { openId: wx.getStorageSync('openId'), userInfo: wx.getStorageSync('userInfo') }; if (!wx.cloud) { console.error('请使用 2.2.3 或以上的基础库以使用云能力'); } else { wx.cloud.init({ // env 参数说明: // env 参数决定接下来小程序发起的云开发调用(wx.cloud.xxx)会默认请求到哪个云环境的资源 // 此处请填入环境 ID, 环境 ID 可打开云控制台查看 // 如不填则使用默认环境(第一个创建的环境) // env: 'my-env-id', traceUser: true, }); } // 微信小程序获取版本更新 const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 }) updateManager.onUpdateReady(function () { wx.showModal({ title: '小韩提示', content: '新版来袭,速来体验!', success: function (res) { if (res.confirm) { updateManager.applyUpdate() } } }) }) updateManager.onUpdateFailed(function () { // 新版本下载失败 }); // 获取OpedId this._getOpenId() }, // 获取用户OpenId _getOpenId() { ((this.globalData.openId || '') == '') && wx.cloud.callFunction({ name: 'login' }).then(res => { this.globalData.openId = res.result.openid; wx.setStorageSync('openId', res.result.openid) }).catch(res => { console.error(res) }); }, // 判断是否登陆 async _checkLogin() { const _this = this return new Promise((resolve) => { wx.checkSession({ success: function (_res) { const _userInfo = wx.getStorageSync('userInfo'); resolve((_userInfo || '') === '') }, fail: async function (_res) { await wx.login({}) resolve(true) } }) }) }, // 获取用户信息并存储 async _getUserInfo() { return new Promise((resolve) => { wx.getUserProfile({ desc: 'get用户信息', success: async res => { res.userInfo.openid = this.globalData.openId this.globalData.userInfo = res.userInfo wx.setStorageSync('userInfo', res.userInfo) resolve(true) }, fail: () => { resolve(false) } }); }) }, }); });
2022年06月23日
1,422 阅读
0 评论
3 点赞
2022-01-04
微信小程序自用Tree树形控件
{message type="info" content="使用有赞的vant组件库开发微信小程序过程中,使用到了tree树形控件,但vant组件库无此组件,所以手撸了一个简陋二级tree树形控件"/}功能包含{callout color="#ef654d"}全选按钮功能、反选按钮功能父级列表前的开关icon子级列表的选中的禁止或启用父级列表显示子级列表可选数量父级下所有可选子级选中则父选中(禁用状态不算)使用了van-collapse组件带有折叠关闭动画效果...{/callout}效果展示微信小程序自Tree树形控件 WXML代码部分<van-collapse value="{{ activeNames }}" bind:change="onChange"> <block wx:for="{{wrongList}}" wx:for-item="itm" wx:key="index"> <van-collapse-item name="{{itm.code}}" data-hans="itm.code"> <view slot="title"> <image src="https://xxxx/{{KG[itm.code]!=true ?'open':'close'}}.png" style="width:20rpx" mode="widthFix" /> {{itm.name}} <view catchtap="catchtap"> <van-checkbox class="fuCheck" disabled="{{tempCodeArr[itm.code].length==0}}" value="{{ checkedAll[itm.code] }}" data-hans="{{itm.code}}" bind:change="checkcheck" /> <view class="counts" style="right:106rpx">({{itm.fallibleCount}})</view> </view> </view> <view class="items"> <van-checkbox-group value="{{ choisObj[itm.code] }}" data-hanscode="{{itm.code}}" bind:change="checkChange"> <van-cell-group> <block wx:if="{{!_itm.hansFu}}" wx:for="{{ itm.children }}" wx:for-index="_index" wx:for-item="_itm" wx:key="code"> <van-cell title="{{ _itm.name }}" value-class="value-class" clickable> <van-checkbox name="{{ _itm.code }}" disabled="{{_itm.fallibleCount=='0'?true:false}}" /> <view class="counts">({{_itm.fallibleCount}})</view> </van-cell> </block> </van-cell-group> </van-checkbox-group> </view> </van-collapse-item> </block> </van-collapse>微信小程序自Tree树形控件 JS部分/* * @Author: Han * @Date: 2021-01-04 14:18:09 * @LastEditors: Han * @LastEditTime: 2021-01-04 15:07:09 * @FilePath: \wechat-app\tree.js */ import { get } from 'api' Page({ data: { // 父级按钮合集 checkedAll: [], // 面板状态合集 activeNames: [], // 章节List wrongList: [], // 选中的子节点合集 choisObj: {}, // 临时 父 子 数组 tempCodeArr: {}, // 全选按钮状态 selectAllStatus: true }, // 全选事件 selectAll() { const _this = this const status = this.data.selectAllStatus const okTempCodeArr = JSON.parse(JSON.stringify(_this.data.tempCodeArr)) Object.keys(okTempCodeArr).forEach(itm => { okTempCodeArr[itm].length == 0 && delete okTempCodeArr[itm] }) // 模拟点击 Object.keys(okTempCodeArr).forEach(itm => { _this.checkChange({ currentTarget: { dataset: { hanscode: itm } }, detail: status ? okTempCodeArr[itm] : [] }) }) this.setData({ selectAllStatus: !status, }) }, // 父级按钮 checkcheck(e) { const codes = e.currentTarget.dataset.hans // 判断父级按钮状态 this.setData({ checkedAll: { ...this.data.checkedAll, [codes]: e.detail }, choisObj: { ...this.data.choisObj, [codes]: e.detail ? this.data.tempCodeArr[codes] : [] } }); // 去除空对象,并设置按钮状态 const tempObj = this.data.choisObj Object.keys(tempObj).forEach(itm => { tempObj[itm].length == 0 && delete tempObj[itm] }) this.setData({ choisObj: tempObj, btnStatus: Object.keys(tempObj).length > 0 }) }, // 子级按钮点击选中或非事件 checkChange(e) { const codes = e.currentTarget.dataset.hanscode // 可选中的是否全选 const status = e.detail.length == this.data.tempCodeArr[codes].length this.setData({ choisObj: { ...this.data.choisObj, [codes]: e.detail }, checkedAll: { ...this.data.checkedAll, [codes]: status } }); const tempObj = this.data.choisObj Object.keys(tempObj).forEach(itm => { tempObj[itm].length == 0 && delete tempObj[itm] }) this.setData({ choisObj: tempObj, btnStatus: Object.keys(tempObj).length > 0 }) }, // 折叠面板切换事件 onChange(event) { let tempArr = [] // 当前面板折叠状态 临时变量 let key = false // 由于面板可以多个同时展开,所以 👇 // 控制面板标题前 图片的 + 或 - if (this.data.activeNames.length > event.detail.length) { // 深拷贝 tempArr = JSON.parse(JSON.stringify(this.data.activeNames)) event.detail.forEach(itm => { const n = tempArr.indexOf(itm); n != -1 && tempArr.splice(n, 1) }); key = false } else { tempArr = JSON.parse(JSON.stringify(event.detail)) this.data.activeNames.forEach(itm => { const n = tempArr.indexOf(itm); n != -1 && tempArr.splice(n, 1) }); key = true } this.setData({ activeNames: event.detail, KG: { ...this.data.KG, [tempArr[0]]: key } }); }, // 切换事件 onSwitchChange(e) { // 切换时,清空除额外所有数据 this.setData({ xx: [], xx: {}, ...xx }) // 之后重新获取列表 this.XXX(); }, // 获取书本信息 async getBookArr() { wx.showLoading({ title: '获取数据中', }) let tempArr = []; const _this = this const { ret: { bookList: _res } } = await get('api'); wx.hideLoading() // 书本信息赋给下拉框 Array.isArray(_res) && _res.forEach(itm => { tempArr.push({ 'text': itm.name, 'value': itm.id }) }) tempArr.length > 0 && _this.setData({ bookDataArr: tempArr }) }, // 获取章节列表 async getWrongList() { const _this = this const _res = await get(`api`) let _tempArr = _res.ret.bookCatalogs; // 章节数据处理 Array.isArray(_tempArr) && _tempArr.length > 0 && _tempArr.forEach((itm, idx) => { let tempArrs = [] itm.fallibleCount = Number(itm.fallibleCount) itm.children.length > 0 ? itm.children.forEach(_itm => { itm.fallibleCount += Number(_itm.fallibleCount) _itm.fallibleCount != '0' && tempArrs.push(_itm.code) }) : _tempArr[idx].children.push({ name: itm.name, code: itm.code, fallibleCount: itm.fallibleCount, hansFu: true }) _this.setData({ tempCodeArr: { ..._this.data.tempCodeArr, [itm.code]: tempArrs } }) }) _res.ret && this.setData({ wrongList: _tempArr }) }, // 防止父级点击事件冒泡空事件 catchtap() {} })
2022年01月04日
1,788 阅读
0 评论
1 点赞
2021-09-24
小韩的百宝箱微信小程序源码 开源
{callout color="#f0ad4e"}维护了 2 年的微信小程序,19 个功能模块,UI 用的 vant 组件库现在开源。{/callout}可以先体验一下Github项目地址{callout color="#f0ad4e"}若果可以的话,给个star点个星星 🌟 谢谢~{/callout}{cloud title="微信小程序源码 - 小韩的百宝箱" type="github" url="https://github.com/uxiaohan/WxBaiBaoXiang" password=""/}部分代码功能以及界面截图网课搜题功能心情文案功能斗图神器功能头像收集库网易云自动签到三合一收款码手机壁纸库滚动大字幕九宫格切图二维码生成功能字符表情库心灵鸡汤库舔狗日记库彩虹屁大全土味情话库精神语录库你好污呀网易云热评睡前小故事
2021年09月24日
3,276 阅读
9 评论
5 点赞
2021-01-15
PHP微信小程序支付工具类封装
微信小程序支付流程小程序登录,获取openid后端调用微信支付统一下单得到预支付交易会话标识prepay_id组装小程序支付所需的几个参数,并进行签名支付成功,主动查询订单支付状态接收微信支付回调通知微信小程序支付<?php /** * 微信小程序支付 * @author Stephen */ namespace App\Helper\Pay; use GuzzleHttp\Client; class WxApp { private $app_id; private $secret; private $mch_id; private $wx_pay_url = 'https://api.mch.weixin.qq.com'; private $pay_uri = '/pay/unifiedorder'; private $order_query_uri = '/pay/orderquery'; public function __construct() { $this->app_id = 'app_id'; $this->secret = 'secret'; $this->mch_id = 'mch_id'; } /** * 下单 * @param float $totalFee * @param string $orderNo * @param string $orderName * @param string $notifyUrl * @param string $openId * @return array * @throws \GuzzleHttp\Exception\GuzzleException|\Exception */ public function pay(float $totalFee, string $orderNo, string $orderName, string $notifyUrl, string $openId) : array { $data = [ 'appid' => $this->app_id, 'mch_id' => $this->mch_id, 'nonce_str' => $this->generateNonceStr(), 'sign_type' => 'MD5', 'body' => $orderName, 'out_trade_no' => $orderNo, 'fee_type' => 'CNY', 'total_fee' => intval($totalFee * 100), // 单位:分 'spbill_create_ip' => request()->getClientIp(), 'time_start' => date('YmdHis'), 'notify_url' => $notifyUrl, 'trade_type' => 'JSAPI', 'openid' => $openId ]; $data['sign'] = $this->generateSignature($data); $payXmlStr = $this->arrayToXml($data); $unifiedOrder = $this->request($this->pay_uri, $payXmlStr); if (!$unifiedOrder) { throw new \Exception('支付请求失败'); } if ($unifiedOrder['return_code'] != 'SUCCESS') { throw new \Exception($unifiedOrder['return_msg'] ?? '支付请求失败'); } if ($unifiedOrder['result_code'] != 'SUCCESS') { throw new \Exception($unifiedOrder['err_code'] ?? '支付请求失败'); } return $this->getWxPayData($unifiedOrder); } /** * 回调 * @return string * @throws \Exception */ public function notify($notify) { if (!$notify) { throw new \Exception('Parse XML Error'); } if ($notify['return_code'] != 'SUCCESS') { throw new \Exception($notify['return_msg'])); } if ($notify['result_code'] != 'SUCCESS') { throw new \Exception($notify['err_code'])); } //签名验证 $signature = $notify['sign']; $array = (array)$notify; unset($array['sign']); if ($signature != $this->generateSignature($array)) { throw new \Exception('签名验证失败'); } return '<xml><return_code><![CDATA[SUCCESS]]></return_code><return_msg><![CDATA[OK]]></return_msg></xml>'; } /** * 查询订单 * @param string $orderNo * @param string $wxOrderNo * @return \SimpleXMLElement * @throws \GuzzleHttp\Exception\GuzzleException */ public function query(string $orderNo, ?string $wxOrderNo='') { $data = [ 'appid' => $this->app_id, 'mch_id' => $this->mch_id, 'out_trade_no' => $orderNo, 'nonce_str' => $this->generateNonceStr(), 'sign_type' => 'MD5' ]; $wxOrderNo && $data['transaction_id'] = $wxOrderNo; $data['sign'] = $this->generateSignature($data); $payXmlStr = $this->arrayToXml($data); $unifiedOrder = $this->request($this->order_query_uri, $payXmlStr); if (!$unifiedOrder) { throw new \Exception('订单查询失败'); } if ($unifiedOrder['return_code'] != 'SUCCESS') { throw new \Exception($unifiedOrder['return_msg'] ?? '订单查询失败'); } if ($unifiedOrder['result_code'] != 'SUCCESS') { throw new \Exception($unifiedOrder['err_code'] ?? '订单查询失败'); } return $unifiedOrder; } /** * 生成随机字符串 * @param int|null $length * @return string */ private function generateNonceStr(?int $length = 16) { $chars = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'; $str = ''; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; } /** * 生成签名 * @param array $params * @return string */ private function generateSignature(array $params) { ksort($params, SORT_STRING); $formatStr = $this->formatQueryStr($params); return strtoupper(md5($formatStr)); } private function formatQueryStr(array $params) { $formatStr = ""; foreach ($params as $key => $val) { $formatStr .= "{$key}={$val}&"; } return $formatStr."key=".$this->secret; } private function arrayToXml(array $params) { $xml = "<xml>"; foreach ($params as $key => $val) { if (is_numeric($val)) { $xml .= "<" . $key . ">" . $val . "</" . $key . ">"; } else $xml .= "<" . $key . "><![CDATA[" . $val . "]]></" . $key . ">"; } $xml .= "</xml>"; return $xml; } /** * 微信小程序调用微信支付的参数 * @param $unifiedOrder * @return array */ private function getWxPayData($unifiedOrder) : array { $data = [ 'appId' => $this->app_id, 'timeStamp' => time(), 'nonceStr' => $this->generateNonceStr(), 'package' => "prepay_id=" . $unifiedOrder['prepay_id'], 'signType' => 'MD5' ]; $data['paySign'] = $this->generateSignature($data); return $data; } /** * 微信支付请求 * @param string $url * @param string|null $method * @param string|null $body * @return null|\SimpleXMLElement * @throws \GuzzleHttp\Exception\GuzzleException */ private function request(string $url, string $params) { $url = $this->wx_pay_url . $url; $client = new Client(['verify' => false]); $response = $client->request('POST', $url, [ 'body' => $body ]); $code = $response->getStatusCode(); if ($code === 200) { $content = $response->getBody()->getContents(); return simplexml_load_string($content, 'SimpleXMLElement', LIBXML_NOCDATA); } return null; } }发起支付请求$totalPrice = 100; //总金额,单位:元 $orderNo = date('Ymd') . rand(10000, 99999); // 订单号 $proName = '产品名称'; $callback = 'https://xx.com/pay/wxapp/callback'; // 支付成功后回调Url $openId = ''; // OPEN ID $wxAppPay = new App\Helper\Pay\WxApp(); // 将支付请求参数直接返回给前端,前端再到微信发起支付请求 return $wxAppPay->pay($totalPrice, $orderNo, $proName, $callback, $openId);支付完成,主动查询订单支付状态$orderNo = $_POST['order_no']; $wxAppPay = new App\Helper\Pay\WxApp(); $response = $wxAppPay->query($orderNo); if ($response['trade_state'] === 'SUCCESS') { // todo 支付成功,修改订单状态 }支付回调$post = file_get_contents('php://input'); $notify = simplexml_load_string($post, 'SimpleXMLElement', LIBXML_NOCDATA); $totalFee = $notify['total_fee']; // 总金额 $cashFee = $notify['cash_fee']; // 支付金额 $outOrderId = $notify['transaction_id']; // 微信订单号 $orderId = $notify['out_trade_no']; // 订单号 $paymentTime = $notify['time_end']; // 完成支付时间 // 回调验签 $wxAppPay = new App\Helper\Pay\WxApp(); $response = $wxAppPay->notify($notify); // todo 完成支付,处理订单
2021年01月15日
1,097 阅读
0 评论
1 点赞