JackieDYH的博客

增加 transform: translateY(0)

一个页面同时有很多视频播放，当用户点击一个视频后，开始播放视频，当点击另一个视频后，暂停前一个播放视频，让当前页面只有一个视频处于播放状态。播放视频时，先判断当前是否有视频正在播放，如果没有，则播放，如果有，则暂停其他视频，再播放当前视频。

写惯了less/sass，但是现在开发小程序缺还是css，很不习惯。在网上搜的教程，要么是 gulp，要么就是 vscode 的Easy-less的插件。传统方式Gulp前者要对于gulp有简单的了解，但是现在大道其行的webpack来说，gulp用的人也越来越少，而且具有一定的学习成本，但好在自定义程度较高，自己可以随便添加take。VScodd的Esay-less插件啥都不说，挺香的，直接在vscode安装easy-less插件，然后seting....

小程序页面如何使用 JavaScript 脚本。有了脚本以后，就可以调用微信提供的各种能力（即微信 API），从而做出千变万化的页面。本篇就介绍怎么使用 API。所有示例的完整代码，都可以从 GitHub 的代码仓库下载。一、WXML 渲染语法前面说过，小程序的页面结构使用 WXML 语言进行描述。WXML 的全称是微信页面标签语言（Weixin Markup Language），它不仅提供了许多功能标签，还有一套自己的语法，可以设置页面渲染的生效条件，以及进行循环处理。微信 API 提

本篇的难度要大于前两篇，如果觉得不好理解，可以先跟着例子，动手做一遍，然后再读文字说明，可能就容易理解了。所有示例的完整代码，都可以从 GitHub 的代码仓库下载。一、数据绑定前面的所有示例，小程序的页面都是写死的，也就是页面内容不会变。但是，页面数据其实可以通过脚本传入，通过脚本改变页面，实现动态效果。小程序提供了一种特别的方法，让页面可以更方便地使用脚本数据，叫做"数据绑定"（data binding）。所谓"数据绑定"，指的是脚本里面的某些数据，会自动成为页面可以读取的全局变量，

这个系列的，上一篇教程教大家写了一个最简单的 Hello world 微信小程序。但是，那只是一个裸页面，并不好看。今天接着往下讲，如何为这个页面添加样式，使它看上去更美观，教大家写出实际可以使用的页面。所有示例的完整代码，都可以从 GitHub 的代码仓库下载。一、总体样式微信小程序允许在顶层放置一个app.wxss文件，里面采用 CSS 语法设置页面样式。这个文件的设置，对所有页面都有效。注意，小程序虽然使用 CSS 样式，但是样式文件的后缀名一律要写成.wxss。打开上一篇教程

所有示例的完整代码，都可以从 GitHub 的代码仓库下载一、小程序是什么？学习小程序之前，先简单说一下，它到底是什么。字面上讲，小程序就是微信里面的应用程序，外部代码通过小程序这种形式，在微信这个手机 App 里面运行。但是，更准确的说法是，小程序可以视为只能用微信打开和浏览的网站。小程序和网页的技术模型是一样的，用到的 JavaScript 语言和 CSS 样式也是一样的，只是网页的 HTML 标签被稍微修改成了 WXML 标签。所以，小程序页面本质上就是网页。小程序的特殊之处在..

官方文档：https://docs.alipay.com/mini/introduce/auth一、首先获取authcode官方文档：https://docs.alipay.com/mini/api/openapi-authorizemy.getAuthCode({ scopes: 'auth_base', success: (res) => { // res.authCode //发送授权码到服务后台进行解析 // 根据authcode，调用后台接口，获取用户I

传递参数为对象格式若参数为对象则需先使用 JSON.stringify()进行转换 , 接收后使用JSON.parse()转为对象传递参数中含有? = &等特殊字符若传递参数中含有=,?,&等特殊字符 无法正常传递参数 则需要进行编码解码 传递时使用encodeURIComponent() 接收时使用decodeURIComponent()小程序页面跳转传递url地址let url = 'https://opendocs.alipay.com/mini/api/

storage.js// 存储const _setStorage = (key, value)=>{ sessionStorage.setItem(key, JSON.stringify(value));}// 查找const _getStorage = (key)=>{ return JSON.parse(sessionStorage.getItem(key));}const _getForIndexStorage = (index)=>{ r

微信/支付宝小程序端修改样式<input class="inp" placeholder-class="placeholder-input" placeholder="请填写您的姓名" />添加属性：placeholder-class="placeholder-input".placeholder-input{ color: #A1A1A1; font-size: 28rpx;}web端修改样式input::-webkit-input-placeholde

代码如果不让滑动事件冒泡的话.将bind/on改为catch就好了<view class="cont"> <view class="title"> <text>请选择缴费房产</text> </view> <view class="item" catchTouchStart="touchStart" catchTouchEnd="touchEnd"> <view c..

原理最外层一个view水平方向排列，里面包含一个内容区view,一个操作区view 让你要展示的布局充满屏幕，通过css样式让超出的删除按钮隐藏 监听touch事件，平移布局显示和隐藏删除按钮(列表每一项中有一个isTouchMove属性，通过监听touch改变该属性给列表不同的样式将隐藏的按钮显示出来)代码<view class="list-page"> <view class="list-item {{user.isTouchMove?'list-item-touc

配置全局配置、页面配置和sitemap配全局配置选项app.json{ //在json文件中其实是不能有注释的，这里我简单做一些解释 "pages": [ //pages为页面路径列表 "pages/home/home", "pages/kind/kind", "pages/cart/cart", "pages/user/user", "pages/detail/detail", "pages/map/map" ], "win

效果展示代码<view class="box"> <view class="my"> <text class="title">我的缴费</text> <view class="gd"> <text>更多</text> <image class="gdimg" mode="scaleToFill" src="/images/back_icon.

接口功能可能涉及隐私问题，请谨慎使用！！！微信小程序实现长按复制< text selectable="true" >长按复制< text/> 一键复制添加点击事件，绑定js方法，点击复制<view bindtap="copy" data-item='{{text}}'>点击复制内容：{{text}}</view>Page({ data: { text:"3.1415926", }, copy: .

效果图源码<view class="pay"> <view class="head"> <view class="item"> <view class="lt"> <image mode="scaleToFill" src="/images/pay_fw_02.png"/> <text>房屋信息</text> </view> .

演示图源码wxml文件<!--pages/test3/test3.wxml--><text bindtap="showCarNo" data-statu="open">弹出车牌输入键盘</text><view>{{carId}}</view><!--mask--><view class="drawer_screen" bindtap="showCarNo" data-statu="close" wx:.

文件结构代码<view class="checktabs"> <view class="item"> <view class="{{isTabs == 1 ? 'active' : ''}}" data-flag="1" bindtap="checkTap"> <image src="{{isTabs ==1 ? './czy.png' : './czn.png'}}" class="czr"></image&...

调用组件wxmlbind+组件内的方法名<dialog bindclose="handleClose" bindopen="handleOpen" bindconfirm="handleConfirm"> </dialog>调用组件js// 打开 OpenhandleOpen: function() { wx.showToast({ title: 'open dialog', icon: 'none' })},// 确认

微信小程序代码---下载地址【https://download.youkuaiyun.com/download/JackieDYH/14109617】test1js// pages/test1/test1.jsPage({ data: { territory: "浙", plateNo: "", }, //开启 地域选择键盘 open: function () { this.setData({ isShow: true, keyBoardType: 1 }); ..

wxml<view class="container"> <view style="width: 100%;height: 100%;position: fixed;z-index: -1;" bindtap="boardStop"></view> <!-- 车牌号 --> <view wx:if="{{carView}}" style="width: 100%;"> <view class="moduleTit..

DatetimePicker 时间选择<button bindtap="getTime">点击</button><van-popup show="{{ showpopup }}" bind:close="onClose" position="bottom" custom-style="height: 30%;overflow:auto;"> <!-- filter="{{ filter }}" --> <van-datetime-pi

本质就是设置一个变量isshare来判断是否是分享页面中进入的页面js-data中设置isshare: 0,//不是分享页面进入onShareAppMessage: function () { return { title: 'xxx', path: 'pages/MyPages/detail?isshare=1&&id=' + this.data.id } }, backHome: function () { w.

<wxs module="m1"> function formDate(t) { return t.substring(5,10) } module.exports.formDate = formDate </wxs> <view>我于{{m1.formDate(obj.createTime)}}邀请了</view>

wx.openLocation(Object object)使用微信内置地图查看位置参数Object object属性 类型 默认值 必填 说明 latitude number 是 纬度，范围为-90~90，负数表示南纬。使用 gcj02 国测局坐标系 longitude number 是 经度，范围为-180~180，负数表示西经。使用 gcj02 国测局坐标系 scale number ..

1、vant-weapp组件版1.首先在根目录(pages同级目录)建立custom-tab-bar文件夹 包含index.jsindex.jsonindex.wxmlComponent({ data: { // 选中的 tab active: 0, // 菜单列表 list: [{ "url": "/pages/index/index",//地址 "icon": "wap-home-o",//图标 ...

open-data用于展示微信开放的数据。属性 类型 默认值 必填 说明 最低版本 type string 否 开放数据类型 1.4.0 open-gid string 否 当 type="groupName" 时生效, 群id 1.4.0 lang string en 否 当 type="user*" 时生效，以哪种语言展示 userInfo 1.4.0 ..

方法一：使用网络图片直接设置背景图片.img-background { width: 200rpx; height: 200rpx; background: url('https://avatar.csdnimg.cn/C/9/4/2_jackiedyh_1566550295.jpg');}方法二：在线搜索图片转Base64编码.img-background { width: 200rpx; height: 200rpx; background: url('da

关于多选框设置样式的办法，其实与radio单选框设置的方法一样，唯一不同的是，在css样式里，/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */的下面定义的css需要加上!important才会生效，意思是本css拥有最高权重，但是多选框就不用<radio-group> <label> <radio value="1" checked />是 </label> <label> <radio v.

有的时候给小程序页面设置背景颜色，但是有时候页面没有那么多数据量，没有撑满一屏，需要设置页面的高度为一屏高度data: { height: 0,}/** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { let that = this; wx.getSystemInfo({ success: function (res) { let clientHeight = res.window.

自定义车牌号输入键盘<!--pages/text/index.wxml--><mp-navigation-bar loading="{{loading}}" show="{{show}}" animated="{{animated}}" color="{{color}}" background="{{background}}" title="键盘" back="{{true}}"></mp-navigation-bar><view class="y.

键盘已做过处理第一位只能是省份简称，第二位只能输入字母，第三位以后可以输入数字加字母的组合，输入完成后有正则方法校验车牌号的合法性。高效率车牌号输入键盘，大大提升用户体验，增强用户输入车牌号的真实性组件源码html：<view wx:if="{{isShow}}" class="vehicle-panel" style="height:430rpx;background-color:{{backgroundColor}}"><view class='offkey' b.

无限追加用户输入框<view class="box" hidden="{{!isren}}" wx:for="{{renlists}}" wx:key="*this"><view class="txt bgtxt"> <text>随行人姓名：</text> <input class="weui-input" data-id="{{index}}" bindinput="adduser" value="{{renlists[index]

一. 属性说明属性名 类型 默认值 说明 selectable Boolean false 是否支持文本的选中功能 space String false 显示连续空格。 decode Boolean false 是否解码 decode可以解析的有&nbsp; &lt; &gt; &amp; &apos; &ensp; &emsp; space 设置space的

开发者文档事件类型事件分为冒泡事件和非冒泡事件： 冒泡事件：以关键字on为前缀，当组件上的事件被触发，该事件会向父节点传递。 非冒泡事件：以关键字catch为前缀，当组件上的事件被触发，该事件不会向父节点传递。 事件绑定的写法同组件的属性，以 key、value 的形式。 key 以on或catch开头，然后跟上事件的类型，如onTap、catchTap。 value 是一个字符串，对应 Page 中定义的函数名，不存在时触发事件会报错。 ...

小程序能够获取到unionid的前提1.小程序必须绑定在微信开放平台上，不绑定是没有的（PS：绑定开放平台需要开发者资质认证，认证收费的奥）2.需要微信用户授权小程序具体的代码实现（我在index.js的onLoad中实现的）encryptedData的解密：模仿 官网给的例子中的 Node 的demo，使用 CryptoJS实现纯 js 下解密用户信（网上大部分都是用的java服务器解密的，但是我在调的时候，到了解密的那一句时，一直报错。我们现在用的是直接在微信代码里解密）1.加入解密需

微信官方原话：（打人）为优化用户体验，使用 wx.getUserInfo 接口直接弹出授权框的开发方式将逐步不再支持。从2018年4月30日开始，小程序与小游戏的体验版、开发版调用 wx.getUserInfo 接口，将无法弹出授权询问框，默认调用失败。正式版暂不受影响。开发者可使用以下方式获取或展示用户信息一、小程序:1、使用 button 组件，并将 open-type 指定为 getUserInfo 类型，获取用户基本信息。详情参考文档:https://developers.w

调用wx.login()获取临时登录凭证code，并回传到开发者服务器。 调用auth.code2Session接口，换取用户唯一标识 OpenID和会话密钥 session_key。 登录流程时序之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。注意：会话密钥session_key是对用户数据进行加密签名的密钥。为了应用自身的数据安全，开发者服务器不应该把会话密钥下发到小程序，也不应该对外提供这个...

1.官方推荐cors和插件安装解决跨域2.配置uni-app 中 manifest.json->h5->devServermanifest.json"h5": { "devServer": { //"port": 8000, //"disableHostCheck": true, "proxy": { "/dpc": { "target": "http://127.0.0.1:3000",//目标接口域名 "changeOrigin":