前言 微信小程序获取手机号码,从官方文档到其他博主的文档 零零散散的 (我就是这样看过来 没有一篇满意的 也许是我搜索姿势不对) 依旧是前人栽树 后人乘凉 系列.保证看完 就可以实现获取手机号码功能 1.认证(有资格) 获取手机号码接口权限,只对认证的小程序开发(非个人) 2.身份牌 需要第三方服务端(你们的后端童鞋)的友情支持 前端同学的工作 // 登录 一定要在现在app.js 登陆(后面解密需要用到) wx.login({ success: res => { // 发送 res.code

微信小程序弹出操作菜单 比如在页面上放一个按钮,点击按钮弹出操作菜单,那么在按钮的 bindtap 事件里,执行下面的代码即可: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success: function (res) { console.log(JSON.stringify(res)) console.log(res.tapIndex) // 用户点击的按钮,从上到下的顺序,从0开始 }, fail: function (res) { co

问题描述:使用小程序的modal组件实现遮罩层效果时,会出现滚动穿透的问题,即遮罩层后面的页面依旧可以滚动. 解决方案: 给底层页面动态添加 position:fixed; 代码: wxml: <modal class="mask" wx:if="{{hasMask}}" bindtap='hideMask'> 我是遮罩层 </modal> <view style="background-color:#ccc;height:2

在开发微信小程序的时候遇到,输入用户名或者手机号以及地址,手机键盘调起来,会把输入框遮挡. 如图: 以上两张图是自己工作中遇到的,此处不要着急,一个属性帮你搞定. cursor-spacing:指定光标与键盘的距离,单位px或rpx,默认为px.取 input 距离底部的距离和 cursor-spacing 指定的距离的最小值作为光标与键盘的距离 微信小程序开发文档api: https://developers.weixin.qq.com/miniprogram/dev/component/in

今天想聊一聊小程序里面存在的一些逻辑问题,拿手上的这个小程序来说,(这个小程序是开发出来玩的,每个人手上有一个手环,带着手环时候的心率,运动步数,血压数据都会展现在这个小程序里面,一目了然)用户第一次登陆的时候,是没有绑定手环ID的,这个时候就需要弹出提示框,提示确定跳转到绑定手环id的页面,绑定成功之后,就会跳转到首页,首页显示手环的电量,手环拥有者的心率运动血压等具体的数据. js逻辑原理很简单:以下代码仅供参考 //获取应用实例 const app = getApp() Page({ da

仿了潮汐睡眠小程序的代码.[如果有侵权联系删除 最近做的项目有个弹出层效果,类似音乐播放器那种.按照普通的做了一般感觉交互不是很优雅,设计妹子把潮汐睡眠的弹层给我看了看,感觉做的挺好,于是乘着有空仿照了一下. 首先善用度娘反编译弄到了源码,但是打不开.然后自己研究源码发现他们用的是movable-view实现的. 于是仿照着搭出了基础框架. 新建了个组件 wxml <!--components/playpanel/playpanel.wxml--> <movable-area style

.rules_modal_cont{ height:800rpx; width:200rpx; -webkit-animation: showZeroAlert .3s; animation: showZeroAlert .3s; } @keyframes showZeroAlert { % { -webkit-transform: scale(0.5); transform: scale(0.5); } % { -webkit-transform: scale(1.05); transform

方法一: html页面: < view class = "container" class = "zn-uploadimg" > < button type = "primary" bindtap = "modalinput" > modal有输入框 < /button> </view > < modal id = "modal" hidden = &q

由于官方API提供的显示模态弹窗,只能简单地显示文字内容,不能对对话框内容进行自定义,欠缺灵活性,所以自己从模态弹窗的原理角度来实现了自定义的模态对话框. wx.showModal修改样式后的效果,如下图所示: index.wxml代码: <!--index.wxml--> <button class="show-btn" bindtap="showDialogBtn">弹窗</button> <!--弹窗--> &l

1.消息提示     wx.showToast wx.showToast({ title: '成功', icon: 'success', duration: 2000 })2.模态弹窗 wx.showModal wx.showModal({ title: '提示', content: '这是一个模态弹窗', success (res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('

参考源码: http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article/details/56276180 https://developers.weixin.qq.com/miniprogram/dev/api/api-animation.html train.wxml <view class='train_con'> <view class='head'>

需要的可以下载示例:maskalert

1.在你的遮罩层最外层加 catchtouchmove="noneEnoughPeople" 里面是你的方法名2.noneEnoughPeople: function () { console.log('遮罩层禁止页面滑动') },

1.获取text文本框输入的信息 wxml代码 <view class="weui-cells"> <view class="weui-cell weui-cell_input"> <view class="weui-cell__bd"> <input class="weui-input" bindinput="changepapertitle" maxlength

大家好!博卡君原计划是能在国庆假期前把小程序的开发教程做完,给大家一套完整.系统的东西,不过由于最近小程序开发工具的拍照组件尚未完善,很多功能还不能顺利实现.我考虑了一下,觉得不如把拍照部分的一些代码展示出来,一来是给大家一个思路,二来也让大家看看目前开发工具存在的一些问题,咱们一起研究研究. 第九章:微信小程序拍照收纳开发以及删除名片等 还是先来看看我们今天的主题——拍照收纳. 拍照收纳分为:上传图片/识别名片.手动填写名片信息两个路径,这里只说下拍照识别,手动填写和前面的编辑名片是同样的页面

博卡君今天继续更新,忙了一天,终于有时间开工写教程.不罗嗦了,今天我们来看看如何实现一些前端的功能和效果. 第八章:微信小程序分组开发与左滑功能实现 先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作.      理清完基本流程我们开始开发.首先整个布局可以先看下,我再一步步讲. 静态布号局后,我们开始实现新增分组效果, 当然触发它出现的是 显示窗口 点击取消消失 当里面的输入框内容发生改变时

感谢朋友们的支持!这两天博卡君收到了很多支持和安慰,也认识了很多志同道合的朋友.目前微信公布的工具和代码都不是正式版,随时有可能调整,大家先体验和学习为主吧.最近这个教程搞得我也心力交瘁了,虽然苦逼,但很开心.今天一口气更新两章,周末给自己放松一下好好睡一觉,大家慢慢研究吧! 第五章:微信小程序名片夹详情页开发 今天加了新干货!除了开发日志本身,还回答了一些朋友的问题. 闲话不多说,先看下「名片盒」详情页的效果图: 备注下大致需求:顶部背后是轮播图,二维码按钮弹出模态框信息.点击微信栏.点击存入

今天根据网上的教程搭建了微信小程序的环境,然后看文档做了一个简单的小应用. 项目的目录是这个样子的: app.js.app.json.app.wxss是全局文件,必不可少的文件.定义在app.wxss中的样式为全局样式,作用于每一个页面.在page的wxss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.wxss中相同的选择器. app.js文件代码: App({ onLaunch: function () { console.log('小程序已启动') }, onShow: f

对于网上商城,加入购物车是一个必备功能了.俺今天就来说下在微信小程序里如何造一个购物车弹层. 先上图: 主要用到的微信API:wx.createAnimation(OBJECT) 说下思路: 1.wxml文件里将页面布局好,我的布局如下图: 大概的框架代码如下: <view class='mask-layer' wx:if="{{showPop}}" bindtap='hideModal'></view> <view class='pop-add-cart

代码地址如下:http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现用户预约 时间可选 预约类型更具需求可自定义 2.案例目录结构 二.程序实现步骤: 1.预约index.wxml代码 <!--index.wxml--> <view class=&quo

用微信小程序做了一个动画,效果如上图: 代码: js: Page({ data: { isPopping: false, animPlus: {}, animCollect: {}, animTranspond: {}, animInput: {}, animCloud:{}, aninWrite:{}, }, //点击弹出 plus: function () { if (this.data.isPopping) { //缩回动画 this.popp(); this.setData({ isPo