正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bindtap="showview">Show</button> <view class="bg" bindtap='hideview' style='display:{{display}}'></view> <view class="show" bindtap='hideview' style

如果弹出层没有滚动事件: <view wx:if="{{alert}}" catchtouchmove="myCatchTouch"> <template is="alert" data="{{alertData}}" /> </view> myCatchTouch: function () { console.log('stop user scroll it!'); return; },

再说逻辑层之前,先说说微信小程序框架(MINA) 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXSS,以及基于JavaScript的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上. 框架的核心是一个响应的数据绑定系统.整个系统分为两块视图层(View)和逻辑层(App Service) 框架可以让数据与视图非常简单地保持同步.当做数据修改的时候,只

简介: 总结: 1. 逻辑层使用js引擎,视图层使用webview渲染 2. 微信小程序已经支持了绝大部分的 ES6 API 3. 可以自动补全css的兼容语法 文档:https://developers.weixin.qq.com/miniprogram/dev/framework/details.html 一. 设计 总结: 设计图750px, 1px =  1rpx,方便计算 二. 小程序页面结构 wxml: 功能类似html,描述节点,但小程序的 WXML 用的标签是 view, but

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

在 Taro 的页面和组件类中,this 指向的是 Taro页面或组件实例. 但是一般我们需要获取 Taro的页面和组件 所对应的 小程序原生页面和组件实例,这个时候我们可以通过 this.$scope 就能访问到它们. 所以当调用一些 API 需要传入 小程序的页面或组件实例时,可以直接传入 this.$scope,例如 Taro.createCanvasContext(canvasId, this) 这个 API,第二个参数就是自定义组件实例 this,在 Taro 中就可以如下使用: Ta

一.逻辑层与界面层分离 小程序开发框架将我们需要完成的编码,划分成了两种类型的编码:逻辑编码(由JavaScript完成,业务数据供给界面事件处理),界面编码(页面结构WXML,页面样式WXSS,展示逻辑层的数据).二.逻辑层的JavaScript 小程序开发中使用到的JavaScript同常规网页开发所使用的JavaScript有所差异,在小程序的开发之中,有很多的.js文件,他们都属于页面的逻辑层,我们知道程序一旦启动就会去执行app.js文件中的代码,我们可以使用console.log()

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

import globimport os cwd = os.getcwd()sep = os.septarget = cwd + sep + 'pages' + sep + '*' + sep + '*'filelist = glob.glob(target)pageNameSet = set([i.split('\\')[1] for i in glob.glob('./pages/*/*')])pageStrDicList = {}for i in pageNameSet: pageStrD

.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

需要的可以下载示例:maskalert

封装的分享方法 function share(o,isDebug = false ) { //路径 let url = o.url || getCurrentPages()[getCurrentPages().length - 1].route; //当前路径所带参数 let urlParams = getCurrentPages()[getCurrentPages().length - 1].options; isDebug&&console.log(`当前路径所带参数:${JSON.s

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('

微信小程序的视图层由 *.wxml 组成,wxml与html一样属于标签语言,但wxml与html的标签截然不一样. xwml特性 一.数据绑定 <!--wxml--> <view> {{message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } }) 注意:标签属性中关键字需要在双引号内 <!-- index/index.wxml--> <text>选择</te

框架的视图层由WXMKL(WeiXin Markup language)与WXSS(WeiXin Style Sheet)编写,由组件进行展示. 对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合. 微信小程序在逻辑层将数据进行处理后发送给视图层展现出来,同时接受视图层的事件反馈. ♦ .wxml文件用于描述页面的结构. ♦ .wxss文件用于描述页面的样式. 视图层以给定的样式展现数据并将时间反馈给逻辑层,而数据展现是以组件来进行的.组件(Component)是视图的基本单

一直在写vue,第一次接触微信小程序,还是原生,最开始做的时候真的很闹心啊啊啊啊啊啊啊啊啊啊啊啊!!所以最近大概更新的都是微信小程序原生的内容了~~么么哒!!一定会继续努力的!!tips:在小程序项目中,app.json文件里的 { //页面配置路径 "pages":[ "page/index/index", //默认首页 "page/index/logs", ] } 正题:微信小程序原生数据渲染条件渲染:wx:if wx:elif wx:els

微信团队为小程序提供的框架命名为MINA应用框架.MINA框架通过封装微信客户端提供的文件系统.网络通信.任务管理.数据安全等基础功能,对上层提供一整套JavaScript API,让开发者能够非常方便地使用微信客户端提供的各种基础功能与能力,快速构建一个应用. 通过框架图我们可以看到两大部分:在页面视图层,wxml是MINA提供的一套类似html标签的语言以及一系列基础组件.开发者使用wxml文件来搭建页面的基础视图结构,使用wxss文件来控制页面的展现样式.AppService应用逻辑层是M

微信团队为小程序提供的框架命名为MINA应用框架.MINA框架通过封装微信客户端提供的文件系统.网络通信.任务管理.数据安全等基础功能,对上层提供一整套JavaScript API,让开发者能够非常方便地使用微信客户端提供的各种基础功能与能力,快速构建一个应用. 通过框架图我们可以看到两大部分:在页面视图层,wxml是MINA提供的一套类似html标签的语言以及一系列基础组件.开发者使用wxml文件来搭建页面的基础视图结构,使用wxss文件来控制页面的展现样式.AppService应用逻辑层是M

微信小程序原理 kamidox 关注 2016.11.05 09:42* 字数 2356 阅读 14621评论 5喜欢 75赞赏 1 微信小程序使用了前端技术栈 JavaScript/WXML/WXSS.它背后的原理是怎么样的呢? 写在前面 微信小程序使用了前端技术栈 JavaScript/WXML/WXSS.但和常规的前端开发又有一些区别: JavaScript: 微信小程序的 JavaScript 运行环境即不是 Browser 也不是 Node.js.它运行在微信 App 的上下文中,不能

摘要: 小程序框架... 作者:JerryC 原文:BeautyWe.js 一套专注于微信小程序的开发范式 Fundebug经授权转载,版权归原作者所有. 官网:beautywejs.com Repo: beautywe 一个简单的介绍 BeautyWe.js 是什么? 它是一套专注于微信小程序的企业级开发范式,它的愿景是: 让企业级的微信小程序项目中的代码,更加简单.漂亮. 为什么要这样命名呢? Write beautiful code for wechat mini program by t

作者:gou-tian 来自:github 幻灯片 使用微信小程序原生组件swiper实现. <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}" wx:ke