小程序
程序员林
小程序开发 php开发 python
展开
-
微信扫描二维码打开微信小程序某个页面如何配置,页面如何获取参数
维码链接内容会以参数 q 的形式带给页面,在onLoad事件中提取 q 参数并自行 decodeURIComponent 一次(对于小游戏可使用 wx.getEnterOptionsSync 接口获取),即可获取原二维码的完整内容。同时会附加一个参数 scancode_time(UNIX 时间戳,单位秒),表示用户扫码的时间。开发管理中找到扫普通链接二维码打开小程序。三、生成的二维码 ,扫码页面获取内容。一、登录微信公众平台。原创 2024-04-26 10:27:30 · 303 阅读 · 2 评论 -
小程序中获取屏幕高度
小程序获取屏幕高度转载 2023-03-02 16:34:20 · 4255 阅读 · 0 评论 -
微信小程序IOS防止页面左右滑动
【代码】微信小程序IOS防止页面左右滑动。转载 2022-09-06 11:14:49 · 1134 阅读 · 0 评论 -
ios上微信小程序密码框光标离开提示存储密码解决方案
方案1:在苹果手机上面把 “自动填充密码”关闭,但是苹果这个默认开启,而且大部分客户也不会去自己关闭。方案2:欺骗苹果手机,代码实现。先说解决思路,通过测试发现,在账号框不为空,密码框不为空,两者都不为空,并且光标离开账号框或者密码框的时候,苹果系统会自动提示存储密码或者更新密码的提示。又经过大量测试发现,账号输入框是指的距离密码输入框最近的上一个输入框,因此解决办法就是在密码输入框上面增加一个账号输入框,让他永远为空,并且不可见即可(页面不可见,不能是display:none)。这样距离密码框最近.原创 2022-05-19 10:03:39 · 2500 阅读 · 7 评论 -
promise在小程序中的运用
当开发者在开发时,可能会遇到这种情况:一个页面的加载会需要多种请求返回的数据构成,当页面一旦加载,显示加载条,只有当所有的请求都成功之后才会显示其页面,才会隐藏加载条。但多种请求无法预测哪个请求首先完成。如果使用请求中套用请求这种方法,用户的体验不是很好。可以采用 promise.all方法可以把多个promise实例合并为一个,等待所有的子promise全部执行完成之后,才会触发回调函数。使用方法:将下载下来的promise文件复制到开发项目的目录下。在页面的js文件中引用。(其中api是自转载 2022-05-07 22:16:51 · 1082 阅读 · 0 评论 -
微信小程序截取字符串
我这里用的 str.substring(star,end)第一个参数代表开始位置,第二个参数代表结束位置的下一个位置;若参数值为负数,则将该值转为0;两个参数中,取较小值作为开始位置,截取出来的字符串的长度为较大值与较小值之间的差。假设:如果我们要截取多个集合的话,先要获取list里面的全部信息(object)然后再for循环。这里截取日期,不需要具体的时间success: function (res) { let test = res.data.data.list转载 2021-12-16 14:37:24 · 4605 阅读 · 0 评论 -
小程序如何播放腾讯视频的视频
效果图:1.背景因为当时需要做视频播放,后台存放视频文件又不现实。所以,做了一个能解析腾讯视频地址的并播放视频的小程序。2.介绍小程序里的解析腾讯视频地址的代码是参考了一个开源项目you-get写的,把里面的腾讯视频下载的python代码写成了JS代码。3.腾讯视频ID从哪获取1.一般播放一个腾讯视频的时候播放地址为https://v.qq.com/x/page/p3311nfbptz.html。.html到最后一个/之间的字符串即为腾讯视频id。如https://v.qq.com/x/pa原创 2021-11-30 17:04:05 · 4079 阅读 · 3 评论 -
微信小程序点击按钮实现手机振动功能
wxml:<button bindtap="vibrateLongTap">振动(400ms)</button><button bindtap="vibrateShortTap">振动(15ms)</button>js: vibrateLongTap: function () { // 使手机振动400ms wx.vibrateLong(); }, vibrateShortTap: function () { /转载 2021-11-26 11:22:26 · 3997 阅读 · 0 评论 -
小程序使用weapp-qrcode二维码插件,宽高自适应解决方法
效果图:小程序使用的是weapp-qrcode.jsgithub地址js:// 将 dist 目录下,weapp.qrcode.esm.js 复制到项目目录中import drawQrcode from '../../utils/weapp.qrcode.esm.js'drawQrcode({ width: 200, height: 200, canvasId: 'myQrcode', // ctx: wx.createCanvasContext('myQrcode'),原创 2021-11-25 16:26:19 · 1417 阅读 · 0 评论 -
微信小程序未来七天日期处理(日期+星期)
效果图:js: // 处理未来七天的函数 dealTime: function (num) { // num:未来天数 var time = new Date() // 获取当前时间日期 var date = new Date(time.setDate(time.getDate() + num)).getDate() //这里先获取日期,在按需求设置日期,最后获取需要的 var year = time.getFullYear() //获取原创 2021-11-22 13:41:23 · 1379 阅读 · 1 评论 -
微信小程序生成分享海报组件
效果图官方文档地址你看着!!!代码文档上都有 这里面有个坑 这里面的像素单位是 像素点 是iOS的像素比wxml<!--index.wxml--><view class="container"> <image src="{{shareImage}}" class="share-image"></image> <canvasdrawer painting="{{painting}}" class="canvasdrawer" bind:原创 2021-11-09 11:50:18 · 591 阅读 · 0 评论 -
小程序:获取动态时分秒时钟
效果如实现过程js:const app = getApp()import util from '../../utils/util.js'Page({ /** * 页面的初始数据 */ data: { todayTime: '', // 获取当前时间 realTime: '', }, /** * 生命周期函数--监听页面加载 */ onLoad: function () { this.gettodayTime() // 获原创 2021-11-01 15:22:12 · 579 阅读 · 0 评论 -
微信小程序之时间戳转换为时间
1、time.js/**数据转换number型*n为传入的时间段(年,月,日)**/function formatNumber(n) { n = n.toString() return n[1] ? n : '0' + n}/** * 时间戳转化为年 月 日 时 分 秒 * number: 传入时间戳 * format:返回格式,支持自定义,但参数必须与formateArr里保持一致*/function formatTime(number, format) { v原创 2021-07-14 16:29:30 · 1227 阅读 · 0 评论 -
微信小程序之picker选择器实现时间日期的选择
最近在做小程序时,需要实现一个时间日期的选择器,但是小程序的picker组件只支持五种选择器,分别是普通选择器、多列选择器、时间选择器、日期选择器、省市区选择器。好像没有我需要的时间日期的选择器呢,这该怎么办?百度了一下好像也没有找到我想要的东西,但是在评论处(不记得在什么地方看到的了)看到一个网友评论说可以通过多列选择器来实现。想想确实可以啊,我怎么就没想到呢。废话不多说,上代码:.wxml <picker mode="multiSelector" bindchange="bindMulti转载 2021-06-29 16:39:47 · 7127 阅读 · 1 评论 -
小程序 单页面多个video 功能实现
效果图:原创 2021-06-17 14:00:07 · 426 阅读 · 0 评论 -
小程序加入下拉回弹效果
效果图原创 2021-06-07 17:30:29 · 587 阅读 · 0 评论 -
微信小程序之支付15分钟倒计时
这是制作的订单支付前倒计时,如果客户在规定时间内没能 支付,则系统自动删除,这样就以便有些商品冗余,当然了,这里只有分钟和秒钟,天数和时钟我写在了最底下,最后代码的显示第七行,可以看一下,然后带入到相应的地方。这是实现的效果,每秒钟都在onload()里面被调用,然后自动动态倒计时。其实难度不是很大,有一些代码防止你们看不懂,我会在下面注解出来的。首先还是wxml <view class="solid-bottom text-xxl padding text-center"&g.原创 2021-05-26 09:49:25 · 2158 阅读 · 11 评论 -
微信小程序 实时音视频通话
微信小程序集成实时音视频通话功能背景在项目的开发当中,很多时候,我们会有音频、视频通话的需求,但是一般都不会自己来写,所以我们就需要借助第三方来实现。尤其是这次的项目开发当中,需要在微信小程序当中集成实时音视频通话的功能,这里使用腾讯云的实时音视频服务。腾讯云——实时音视频实时音视频官方文档:https://cloud.tencent.com/document/product/647文档位置:文档->视频服务->实时音视频官方文档介绍的比较,详细,一般按照步骤做,都可以完转载 2021-02-05 09:28:44 · 11127 阅读 · 5 评论 -
小程序picker组件上ios选择日期出现1年,2年的问题
今天开发小程序的picker (滚动选择器),设置为年显示.遇到问题:微信开发工具显示正常,安卓机也正常,自己iPhone 出现1年 2年开始;如图;后面我查阅资料,终于知道办法解决; 新增加个date_1就行了直接上效果图和代码;wxml:<view class="cu-form-group "> <view class="title">时间</view> <picker mode="date" value="{{date_...原创 2020-12-09 13:10:32 · 993 阅读 · 2 评论 -
微信小程序中使用echarts
微信小程序中使用echarts一、效果图:二、代码js:import * as echarts from '../../component/ec-canvas/echarts';const app = getApp();var xData = ["1:00", "2:00", "3:00", "4:00", "5:00", "6:00", "7:00", "8:00", "9:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:0原创 2020-12-09 09:49:21 · 499 阅读 · 0 评论 -
小程序画布电子签名2
效果图:这种写法就简单粗暴,写好直接生成图片或者上传服务器都可以.html:<view class='container'> <!-- 签名画布 --> <canvas class="canvas" id="canvas" canvas-id="canvas" disable-scroll="true" bindtouchstart="canvasStart" bindtouchmove="canvasMove" bindtouchend="canvasE原创 2020-12-03 15:43:03 · 171 阅读 · 0 评论 -
小程序画布电子签名1(组件)
效果图:github地址项目下载链接其他组件:移步至《日历插件》使用方法1.声明组件下载代码,将components文件夹拷贝至项目根目录(与app.json平级),在app.json中声明需要使用的插件,这里的声明是全局的,pages下的页面都能直接用,也可以在某一个page对应的json文件中单独声明。{ "pages": [ "pages/demo/handwriting" ], "window": { "backgroundTextS..原创 2020-12-03 15:25:33 · 369 阅读 · 0 评论 -
判断H5页面环境是否在小程序的webview中
用小程序提供的wx.miniProgram.getEnv可以获取环境参数,但是它有个问题就是无法在非微信环境下判断。所以在使用wx.miniProgram.getEnv前得先判断是否在微信环境中。解决方法:<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script><script> var ua = navigator.user原创 2020-12-03 09:26:22 · 2197 阅读 · 0 评论 -
微信H5网页跳转小程序
鉴于微信 开放标签说明文档 写的不是很清楚,大多数开发者看了以后表示:我从哪里来?要到哪里去?所以鄙人记录下这篇文章,以便帮助到一些人。官方文档废话不多说,上才艺!<html><head> <meta charset="utf-8"> <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0, us原创 2020-12-02 11:19:50 · 2419 阅读 · 7 评论 -
小程序存取缓存
异步存:wx.setStorage({ key: 'key1', data: 'data1', success: function(res){ console.log('异步保存成功') } })同步存: wx.setStorageSync('key2', 'data2') console.log('同步保存成功') }异步取:wx.getStorage('key1')同步取:w...原创 2020-11-24 11:24:39 · 263 阅读 · 0 评论 -
小程序复制功能
效果图:官方文档:wx.setClipboardData(Object object)基础库 1.1.0 开始支持,低版本需做兼容处理。本接口从基础库版本1.9.6起支持在小程序插件中使用设置系统剪贴板的内容。调用成功后,会弹出 toast 提示"内容已复制",持续 1.5s参数Object object属性 类型 默认值 必填 说明 data string 是 剪贴板的内容 success f...原创 2020-11-23 10:56:32 · 1569 阅读 · 0 评论 -
小程序转发分享插入图片
onShareAppMessage: function () { return { title: "分享标题", imageUrl:'../../images/shouyi.png',//自定义图片路径,可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4。 path: '/pages/pintuan/pintuan?pt_id=' + this.data.pt_id + '&fx_id=' + app.glo.原创 2020-11-19 13:47:04 · 470 阅读 · 0 评论 -
微信小程序购物车 数量加减功能
现在就为大家介绍这个小组件,在小程序中,该如何去写下图为本项目的图:wxml:<!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text> <!-- 数值 --> <input type="nu...原创 2020-11-19 09:30:20 · 3071 阅读 · 8 评论 -
小程序投票排名样式
效果图:废话不多说直接上代码,首先引入 colorUI 下载地址wxml: <view class="margin-lr margin-tb-sm radius" style="background:#f7f7f7;"> <view class="box123 bg-white"> <view class="grid col-3 bg-white padding-sm text-df text-black"> &l..原创 2020-11-05 15:21:48 · 910 阅读 · 4 评论 -
小程序js判断是否为图片
根据后端传过来的数据,判断是否为图片,显示不同的图标:效果图:数据如下:meetingAttachments: [ { id: 51, file_url: "https://meet.com/storage/files/参赛队伍.png" }, { id: 52, file_url: "https://meet.com/storage/files/竞赛时间表.png" }, { id: 61, file_url: "http.原创 2020-11-03 10:50:59 · 3490 阅读 · 1 评论 -
小程序直播如何接入抖音直播
废话不多说,直接上操作第一步:先微信后台开一个直播房间 步骤小程序对接第三方推流;第二步:去打开抖音直播 复制链接 页面打开:如图:#在抖音,记录美好生活#【看看新闻Knews】正在直播,来和我一起支持TA吧。复制下方链接,打开【抖音】,直接观看直播! https://v.douyin.com/JPcFRhk/将https://v.douyin.com/JPcFRhk/通过浏览器访问 如下图,就能得到 房间号(room_id) 为6886251653792860935第三步:需要...原创 2020-10-22 14:47:36 · 13932 阅读 · 7 评论 -
小程序js在url中获取文件名
js: var url="http://www.jspp.cn/testbin/apptest/app-site/展位图.png"; var appU = url.split('/'); console.log(appU[appU.length-1].split('.')[0]); //展示图效果图:原创 2020-10-19 13:00:21 · 999 阅读 · 0 评论 -
微信小程序:好看的表格样式
一个在微信小程序中创建表格的demo效果图最后做出来大概就是这个样子的,先看下设计图:(画的真好看)设计图然后再看下数据返回的格式:数据返回格式这数据...o.0...分析数据得知,后台返回的数据远比设计图上描绘的复杂,内容是不固定的,而且需要显示一周的排班个人思路:用scroll-view来做,整个表格按 -行- 分为4大块:排班、上午、下午、晚上。 ①先将从今天开始往后7天的日期放到数组中,作为第一大块的数据源 ②循环遍历数据,...原创 2020-10-15 15:39:55 · 9171 阅读 · 1 评论 -
小程序基础-获得当前页面、上一页面、返回上一页面
var pages = getCurrentPages(); //页面指针数组 var prepage = pages[pages.length - 2]; //上一页面指针 // var list= prepage.data.list; // list.splice(obj.data.key,1); // prepage.setData({ // list:list ...原创 2020-10-14 14:40:34 · 1242 阅读 · 0 评论 -
微信小程序使用自定义字体的三种方法
一、loadFontFace接口小程序官方提供的接口,最便捷的加载字体的方法,不过限制颇多。必须https且同源,canvas等原生组件不支持。注意!!使用本地文件无效,必须使用网络地址。官方文档演示代码:wx.loadFontFace({ family: 'FZSuXSLSJW', source: 'url("https://we7.stuyun.com/FZSuXSLSJW.ttf")', success: res => { console.log('font转载 2020-09-30 16:10:47 · 10409 阅读 · 1 评论 -
微信小程序直播电脑端OBS推流直播教程
创建完成后,点击获取推流地址,这时候要微信管理员扫码才能获得地址,推流地址如下图所示,这个地址在OBS推流软件里是分成两部分的,第一部分是下图红框里的地址,到单词“live”那里;打开微信小程序后台,在直播主页,在刚才创建的直播频道上,点击控制台,进入刚才创建的直播活动界面。OBS设置界面:点击左侧菜单推流,将推流地址的第一部分添加到服务器地址里,将第二部分添加到串流秘钥中即可,点击应用,再点确定保存。设置时间,如果鼠标点击没反应,可以鼠标点击光标后,手动输入时间。登陆微信小程序后台,创建直播,如图所示。原创 2020-09-28 10:14:07 · 21653 阅读 · 0 评论 -
小程序采坑:wx.getLocation不起作用,如何解决?
今天写个获取小程序定位的功能,发现怎么调用工具和真机都不需要调用官网wx.getLocation接口wxml: <button catchtap="Position" >新增定位</button>js: Position(e) { wx.getLocation({ type: 'wgs84', success(res) { latitude = res.latitude longitude = .原创 2020-09-24 17:01:29 · 7543 阅读 · 7 评论 -
小程序上传多图片多附件多视频
前言:最近在研究微信小程序,本人自己是php写后端的;感觉小程序挺好玩的,就自己研究了一下;刚好今天又给我需求,通过小程序上传多图 然后php后端保存到服务器;前端上传需要用到流,然后就接收 保存;小程序端的比较完整,能上传图片 删除图片 查看图片,文件或者视频也可以;进入主题;效果图:c#后端:/// <summary> /// 上传图片 /// </summary> ...原创 2020-09-23 16:17:12 · 703 阅读 · 0 评论 -
wxParse无法解析strong标签
今天有人向我反映 小程序详情 ,后台富文本加粗没效果,测试了下,果真如此;让后查资料 替换成了Parser 就解决了。小程序代码也变小了Parser微信小程序富文本插件功能介绍 支持解析<style>标签中的全局样式(.和#两种方式) 示例: <style>.demo1{ text-align:center;}#demo2{ color:blue;}</style><div class="demo1">...转载 2020-09-11 14:12:48 · 1289 阅读 · 3 评论 -
小程序复制功能wx.setClipboardData,换行
如果需要复制上图这样的格式,换行是重点直接上代码wxml<button catchtap="copyText">复制</button>jscopyText: function (e) { // var copy = e.currentTarget.dataset.copy; //data-copy传过来的数值 arr = [ { name: "酒店名称", value: "上海国际酒店" ...原创 2020-09-11 12:00:31 · 1233 阅读 · 1 评论