这次遇到个问题: 1. 动态的添加指定的view内容..嗯..很简单..wx:for就搞定 2. 动态添加的内容中有input,最终获取值的时候,要获取到所有input的值并且是一个数组..嗯.. 3. 动态删除指定的已经添加的view内容.. 思路: 1. wx:for 循环view,添加一个,wx:for的内容就增加1个,那么循环的内容是用数字来循环还是数组呢? 2. input是循环出来的,所以不可能给不同的input绑定不同的 bindInput 事件,那么只有绑定一个输入事件,而且所有

尺寸单位: rpx(responsive pixel): 可以根据屏幕宽度进行自适应.规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素.所以用rpx可解决适配问题 样式导入: /** app.wxss **/ @import "common.wxss"; 内联样式: 框架组件上支持使用 style.class 属性来控制组件的样式. style:静

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

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

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

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

最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils文件夹存入arealist.js文件,内容为: const areaList=[ { name:'河南', id:, parentId: },{ name:'浙江', id:, parentId: },{ name:'郑州', id:, parentId: },{ name:'新乡', id:, p

1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件组成 可以在微信开发者工具中快速创建组件的文档结构 在文件夹内 components/myHeader, 创建组件 名为myHeader 1.1.1 声明组件 首先需要在组件的 json文件中进行自定义组件声明 myHeader.json { "component": true, } 1.

微信小程序删除处理 没有 confrim 那怎么实现这个效果呢 可以使用小程序里的模态框 代码: wx.showModal({ title: '提示', content: '确定要删除吗?', success: function (sm) { if (sm.confirm) { // 用户点击了确定 可以调用删除方法了 } else if (sm.cancel) { console.log('用户点击取消') } } }) 微信小程序操作成功提示后跳转 wx.showToast({ title:

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码: <!--index.wxml--> <view class="navView" bi

前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本次主要分享下小程序自定义组件的一点思路,小程序官方提供的框架比较简陋,原始,可复用较差,没有实现自定义组件的功能,这让很多使用vue ,react前端开发非常难受.网上存在各种吐槽,也有分享实现自定义组件的方法,但是要么过于复杂,要么是微信小程序升级之后就不兼容,反正是各种坑你没商量.在这分享下本人

在一些app中,随处可见左滑动的效果,在微信小程序中,官方并未提供相关组件,需要我们自己动手写一个类似的效果 下面仅列举出核心代码,具体的优化需要根据你自身的需求 <view class='list' wx:if="{{list.length > 0}}"> <block wx:for="{{list}}" wx:key="list"> <view class='list_item' bindtap='toRe

最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息 2.screenHeight - windowHeight 计算标题栏高度 3.标题栏高度 , , app.js //app.js App({ onLaunch: function () { var that = this wx.getSystemInfo({ s

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

这几天在看代码时遇到了一些问题:关于微信小程序的animation自定义动画自己没有系统的学习过 做动画需要我们将一个复杂的动作过程,拆解为一步一步的小节过程 微信中已经为我们写好了端口我们只需要实例化一个动画实例(实例代码如下) 先了解基础部分: 在看代码之前要先有个下面的基础了解 1)wx.createAnimation(object) 微信小程序实例化一个动画效果 2)export( ) 这个方法是导出动画数据(传递给animation属性) 3)step( ) 来表示一组动画完成 微信官

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

目录 1,起因 2,优化成果 3,实现思路 4,完整代码 1,起因 哪天,正在蚂蚁森林疯狂偷能量的我被boss叫过去,告知我司要做一个线上直播公开课功能的微信小程序,博主第一次写小程序,复习了下文档,看了看腾讯云直播sdk,开工了. 写着写着就发现不对劲了, 这里面wx.showToast,wx.showModal,这一类的调用太多了,每次都写一遍太特么麻烦了,就拿wx.showToast做例子,产品要求是duration为2000ms,默认值是1500ms,且有时候不需要icon图标,有时候又

在微信小程序开发中,经常遇到一些由后台控制显示(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时,元素就

介绍template是微信小程序提供的模板,可以在模板中定义代码片段,然后在不同的地方调用. 简单使用定义template因为项目中可能会需要到不止一个template,所以最好新建一个文件夹来存放template相关的文件.注意这里只是单独的创建各个文件,并不是创建Page或者Component. 创建好之后的文件目录如图: 这里演示一个用template当列表的item,然后可以点击并获取到值. 然后开始写templates.wxml文件,这里面可以有多个template代码块,如代码所示:

使用vscode正则匹配,手动去除 1.用vscode打开微信小程序项目 2.Edit-----replace in Files 1. console.log()加了分号 console\.log\(.*?\); 2. console.log()没加分号 console\.log\(.*?\)

根据小程序的设定,swiper组件默认高度为150px,无法根据内容来撑高.如果里面的内容固定还好说,直接设置一个高度就可以了.要是里面内容是动态变化的,这个特性使得我们使用这个组件的时候感到诸多不便. 举个例子: 如下这种情况,如果我们不给它设置一个高度,那么它只会在那个150px局部进行滚动了. 那么我们如何动态改变它的高度呢? 情况1:数据每条高度都是一样 原理:获取1条数据的高度*数据的条数. js代码如下: const query = wx.createSelectorQuery()