微信小程序点击控制元素的显示与隐藏 首先我们先来看一下单个点击效果 我们来看一下wxml中的代码: <view class="conten"> <view class="header"> <view class="nav_i"> <text class="nav_tex">更多内容</text> </view> <view class="n

在微信小程序开发中,经常遇到一些由后台控制显示(is_open : 1)或者隐藏(is_open : 0),有俩种办法: 复杂办法 1.先在元素的class中 class=’{{show?’true’:’hidden’}}’ 2.再在相对应的js中配置show的值,例 data: {show:1,} 3.最后在相对应的css中定义 .hidden{display:none;} 简单办法 直接在元素中加入wx:if=”{{is_open !=”}}”代码,后台传到前端的is_open为1时,元素就

1.1.1动态修改页面数据 在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用“=”修改数据的,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致,代码如下: data: { array: [{ text: '数组' }] } onLoad:function(){ this.data.array[0].text=1; console.log(this.data.array[0].text); } 修改代码: onLoad:func

微信小程序是可以动态修改页面标题的. 首先我们来看看静态是怎么实现的 在对应页面的json文件里面加入下面代码就可以实现了 { "navigationBarTitleText": "素材图库" } 效果图如下: 其他动态的也是十分简单,毕竟是提供好了的接口,我们调用一下就行了.接口嘛,那就要操作对应的js文件咯.参考地址 quwei: function () { wx.setNavigationBarTitle({ title: '趣味表情' }) } 点击的时候触

  1.动态渲染页面.改变css.样式必须setData渲染过去   this.setData({ userInfo: app.globalData.userInfo, token: app.globalData.token, url: app.globalData.url, css:'hidden' });   2.路径传参, 在页面的 onLoad获取 onLoad: function (options) { console.log("参数",options.imei); }  

最近在搞小程序的开发,遇到隐藏,显示密码的功能的时候,电脑上调试没问题,但是手机上面点击却没有效果,必须要跳转到其他页面再跳回来,才能正常显示. 一时间搞得我很头疼,查找资料后,终于知道了是什么原因...... 一般情况下,我们都认为是<input> 中的type属性控制着 password或者text 等 <input>属性,但是!小程序就是有点特殊, 它并不是由 type 来控制的,而是由 password属性控制的, 当password = "true"的

起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class='second-code'> <view class="img-box"> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}&quo

微信小程序实现登陆页面 实现上面两个页面 第一个页面 <view> <!-- 上侧部分 --> <view class="top-view"> <!-- 用户信息开始 --> <view class="user"> <!-- 头像开始 --> <view class="row"> <image class="avatar" wx:if=&

完整微信小程序授权登录页面教程 1.前言 微信官方对getUserInfo接口做了修改,授权窗口无法直接弹出,而取而代之是需要创建一个button,将其open-type属性绑定getUseInfo方法.在参考了网路上各种方案之后,实现了用户在授权之后跳转到小程序首页的授权登录页面. 2.实现效果 3.实现思路 在进入小程序时先对授权情况进行判断,若已经过授权则直接跳转到首页,若还未经过授权则进入授权页面,点击页面的授权按钮会弹出选择框,选择"拒绝"则不进行跳转,选择"允许&

Java Web项目 我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:8080访问项目,会发现浏览器会打开一个默认的页面. 这个页面是在什么地方配置的呢? 每个Java Web工程的目录下面,都有一个名为WEB-INF的目录,里面包含一个配置文件web.xml.Web项目的默认页面就定义在里面的welcome-file-list节点里. Android项目 我们知道一个Android项目里

一.前言 项目中遇到的评分相关的需求其实还挺多.之前也写过网页中关于评分功能实现的文档.这次,是基于微信小程序开发而提炼出一个简单方便使用的方法,网页开发中同样可用.这次使用的还是字体,主要是字体这个比较通用,颜色,大小都可以自己定义.当然了,来的最快的其实是用图片代替.二.微信小程序中评分功能实现 1.css文件中引入字体文件.也可以点此下载字体文件   @font-face { font-family: 'FontAwesome'; src: url('https://netdna.boot

效果图: 实现原理:点击按钮,往需要动画的div中添加或移除拥有动画效果的class. 由于微信小程序中不能操作page这个根节点,所以,只有用一个div(view)来模仿page根节点. 1.结构 <view class='page {{isFix?"pageShow":"pageHide"}}' > <view class='header'> <view class='h-toggle iconfont icon-list' bin

开发必备:熟悉微信小程序组件开发 开发思路:如果只有一条数据,直接用css3关键帧动画:如果有多条数据,则在当前动画运动到一定时间的时候,将其数据替换掉,使之在视觉效果上有一个从下到上播放的状态.数组循环播放的状态是通过将当前播放元素置换到末尾实现,即通过数组元素删除插入方法将整个数组元素串成一个闭环. 本例是将跑马灯作为一个公共组件开发的,故代码展示为组件形式 目标UI: wxml文件代码: <view wx:if="{{lampData && lampData.leng

1.页面注册 既然我们希望跳转到新的页面,那自然要新建页面相关的文件才行.在开篇已经讲过,一个小程序页面由四个文件组成,假如我们的页面名为welcome,那么这四个文件则是: welcome.js welcome.json welcome.wxml welcome.wxss   另外需要注意的是,json文件中至少包含空的结构体 { },而js文件中最好包含空的Page({ })方法,否则会编译出错(新版的IDE中对于空的js文件好像已经不再报错,不过还是建议加上)       新建页面到这里就

1.使用navigator的url带参传值 (1)在pageA页面有一个固定的值要传递到pageB页面,比如说一个固定的值user_id要传递给B <navigator url="../index/pageB?user_id='12345678'">index4</navigator> 注:?后面为你要传递的值 这样在pageB页面js的onload函数里面,使用setData方法可以获取到传递过来的值,并将它赋值给pageB页面初始数据在pageB页面的dat

微信小程序的title是在json里面配置的 "navigationBarTitleText": "title名称" 这种title是固定死的不灵活处理一些页面相同title不同的场景就不够用了这个时候就需要动态配置title 微信小程序的setNavigationBarTitle方法可以实现title的动态配置 wx.setNavigationBarTitle({ title: "title名称" }) 这个方法可以写在oLoad里面或者onS

原文转载自「刘悦的技术博客」https://v3u.cn/a_id_109 我们知道,写习惯了前端的人,一般切图后布局页面的话,上手最习惯的是基于盒子模型的浮动布局,依赖 display 属性 + position属性 + float属性,但是浮动布局有一些致命的小问题,比如垂直居中比较费劲,比如著名的float坍塌问题,另外有些极端情况下,还得使用模型+clear:both来手动清除浮动,比较麻烦. 于是,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布

在小程序中所有页面的路由全部由框架进行管理,而框架以栈的形式维护了当前的所有页面. 当发生路由切换时,页面栈的表现: getCurrentPages() 用于获取当前页面栈的实例,可以把 getCurrentPages() 看做当前小程序所有页面的集合.该集合的第一个元素为首页,最后一个元素为当前页. ps:不要尝试修改页面栈,会导致路由以及页面状态错误. // index/index.js ================================ Page({ data:{"id&qu

微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Android中,我们Activity和Fragment都有栈的概念在里面,微信小程序页面也有栈的概念在里面.微信小程序页面跳转有四种方式: 1.wx.navigateTo(OBJECT): 2.wx.redirectTo(OBJECT): 3.wx.switchTab(OBJECT): 4.wx.navi

我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: // 源页面A相关代码 wx.navigateTo({ url: "/pages/mypage/mypage?a=1&b=2" }) // 目标页面B相关代码 Page({ onLoad: function (options) { var a = options.a; // 值:1 va