微信小程序
Bright2017
学,然后知不足!
展开
-
小程序左滑删除
主要用到了小程序的可移动的视图容器,在页面中可以拖拽滑动标签movable-view小程序文档:https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html <view class="course_cent"> <movable-area class="course_data" wx:for="{{dance_ary}}" wx:key="index"> ...原创 2021-04-27 16:44:45 · 107 阅读 · 0 评论 -
手持弹幕(全屏文字滚动)
<!--pages/02-23/demo1/newDanMu.wxml--><view class="textBox" style="background-color:{{backgroundColor}}"> <view class='text' style="font-size: {{fontSize}}rpx; animation: animateText {{animateTime}}s infinite linear; color:{{fontColor}}".转载 2021-03-29 17:30:46 · 418 阅读 · 0 评论 -
微信小程序图片抖动
<view class='game_point_me {{isDoudong?"doudong":""}}' bindtap='pointMe'></view>@keyframes seconddiv{0% {transform: scale(1.4,1.4);}10% {transform: scale(1,1);}25% {transform: scale(1.2,1.2);}50% {transform: scale(1,1);}70% {transform:.转载 2021-03-29 10:05:53 · 828 阅读 · 0 评论 -
微信小程序 switchTab跳转后新页面 onload 不触发的问题
wx.switchTab({ url: '../index/index', success: function (e) { var page = getCurrentPages().pop(); if (page == undefined || page == null) return; page.onLoad(); } })转载 2021-03-23 18:55:25 · 858 阅读 · 0 评论 -
小程序多选效果
我的需求是多选,不管年级如何切换,只要是选择过的班级,最终拿到所有id<view class="sold_cents"> <view class="grade_data flex"> <view class="flex bot_grade"> <view>年级</view> <view>班级</view> </view> <view class=..原创 2021-03-05 17:23:42 · 132 阅读 · 0 评论 -
css3 文字横向无缝滚动
<div class="notice-container"> <div class="header-notice-marquee" id="notice-marquee"> <div class="header-marquee-item1 flex"> <div>111111111111111111111111111</div> <div>222222222222222222222222222<.转载 2021-01-30 15:19:44 · 1116 阅读 · 0 评论 -
微信小程序canvas实现签名(源码)
<!--pages/page/cvsAutograph/cvsAutograph.wxml--><view class="wrapper"> <view class="handBtn"> <button class="backBtn">返回</button> <button catchtap="cleardraw" class="delBtn">清空</button> <button c.转载 2021-01-21 09:39:35 · 435 阅读 · 0 评论 -
小程序录像用户拒绝授权后,再次发起授权
<view class='cententView' wx:if="{{showCamera}}"> <block> <camera device-position="front" flash="off" binderror="error" class="camera_video"> <cover-view class="camera_video_top"> <cover-image src='/image/15.png' ..原创 2020-11-05 16:17:54 · 718 阅读 · 1 评论 -
微信开发者工具打开是黑屏
电脑用时间长了,昨天重做了系统,安装了开发者工具之后发现打不开,等了好久打开后居然黑屏。我以为是系统没做好又重装了一遍,后来在社区查了下,才知道,这个问题很普遍。解决办法:你好,黑屏问题麻烦打开C:\\users\\<>\\AppData\\Local\\微信开发者工具\\userdata\\WeappLocalData放置这个文件https://share.weiyu...原创 2020-04-30 10:07:12 · 5330 阅读 · 0 评论 -
微信小程序常见的UI框架
1.最常见的框架官方框架MINA地址:https://developers.weixin.qq.com/miniprogram/dev/framework/MINA.html官方介绍:框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。2.WeUI ...转载 2020-03-24 10:14:14 · 9107 阅读 · 0 评论 -
小程序动画滑动效果----点击底部出现购物车
效果图:<view> <view class='openCar' bindtap='openCar'>点击打开购物车</view> <!--隐藏区域 --> <view class='centData' wx:if="{{boolHidden}}" animation='{{animationData}}'> ...转载 2019-01-09 16:23:21 · 2153 阅读 · 0 评论 -
微信小程序获取input框的值
<view class="itemView">用户名:<input class="input" name="userName" placeholder="请输入用户名"bindinput ="userNameInput"/></view><view class="itemView"&转载 2018-12-26 11:56:20 · 1303 阅读 · 0 评论 -
小程序报错40029
最近做小程序商城项目,因为不太熟悉所以经常性报错。今天这个错误码40029就很坑了。最终原因找到了,是因为AppID错误或者没有更换的问题。前端可能出现的错误,可能是直接拿到别人的小程序源码进行了修改,这里的修改指的是前端的AppID被更改,然后打开项目。后端可能出现的错误,可能也是没有更改AppID,比如我的同事,他就是直接复制过来没有更改 ( 干得漂亮 ) !...原创 2018-12-25 09:37:24 · 650 阅读 · 0 评论 -
小程序复制功能
参考文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.getClipboardData.html<view>{{val}}</view>data{ val:'来呀、快活呀!'}copy:function(){ var that=this; wx.setClipboa...原创 2018-12-17 14:22:49 · 3870 阅读 · 0 评论 -
微信小程序rich-text富文本 图片自适应宽度
第一种方法:接口里给img标签加样式(PHP)$info['contents'] = str_replace("<img ", "<img style='max-width:100%;height:auto;'", $info['contents']);第二种方法:小程序里给img标签加样式that.setData({ //富文本内容 contents...转载 2019-08-27 17:57:52 · 765 阅读 · 0 评论 -
小程序垂直居中
<view class='ercode' style='height:{{viewHeg}}px'> <view> <image src='https://developers.weixin.qq.com/miniprogram/dev/image/demo.jpg'></image> </view></view...原创 2018-12-17 10:27:10 · 915 阅读 · 0 评论 -
小程序Canvas生成图片分享二维码
<canvas canvas-id="only" bindlongtap="longtap" style="width: 320px;height: 550px;"></canvas>Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onL...原创 2019-03-30 09:39:15 · 1352 阅读 · 0 评论 -
小程序中规划地图路径在地图上显示、并且标记当前移动的位置
wxml<map id="map" longitude="113.324520" latitude="23.099994" controls="{{controls}}" bindcontroltap="controltap" markers="{{markers}}" bindmarkertap="markertap" polyline="{{polyline}}" bind...原创 2019-03-30 09:55:48 · 6083 阅读 · 0 评论 -
微信小程序使用wxParse解析html
后台的富文本编辑器返回给前台的数据内容是带有html标签的,但是不能直接放在页面中,需要进行处理。github上下载wxParsehttps://github.com/icindy/wxParse下载完之后我们需要用到目录下的wxParse文件夹,把他拷贝到我们的项目目录下1.在app.wxss全局样式文件中,需要引入wxParse的样式表(这个引入与否不重要)@impor...转载 2019-06-04 15:23:28 · 290 阅读 · 0 评论 -
小程序时间线
效果:wxml<view class='weui-cell-third'> <view class="page__title"> <view> 全球运营论坛——全球智慧 对话新时代 </view> <view> 时间: 09:00-21:40 地点:会场A </v...转载 2019-07-30 10:57:54 · 3615 阅读 · 2 评论 -
小程序滚动到指定位置scroll-into-view
<view class="businessCard-bot"> <scroll-view class="businessCard-bot-left floarLeft" scroll-y style="height:{{viewHeg}}px" scroll-into-view="{{toIndex}}" scroll-with-animation="true"...原创 2019-08-13 11:25:56 · 15362 阅读 · 9 评论 -
小程序上下移动切换位置
<view wx:for="{{companyData}}" wx:key="{{item.id}}" class="overHiden"> <view class="floarLeft">{{item.name}}</view> <view class="floarRight" wx:if="{{index...原创 2019-09-21 10:09:06 · 1150 阅读 · 0 评论 -
rich-text组件不支持预览图片,曲线救国方式
<rich-text nodes="{{htmlVal}}" bindtap="test"></rich-text> test:function(e){ let that=this console.log("e", this.data.htmlVal) let arr=[]; //let reg = /(?<=(src="))...原创 2019-10-09 18:07:46 · 1382 阅读 · 1 评论 -
小程序获取元素宽高
小程序本身是不支持DOM和BOM操作的,但有时候还是需要获取一下宽高的,查了一下,发现真的可以获取到。感谢大佬3秒钟!小程序的API有个WXML,这次用到wx.createSelectorQuery()方法;<view id='demo'>元素</view>//创建节点选择器const query = wx.createSelectorQuery() ...原创 2018-09-17 14:04:27 · 18027 阅读 · 2 评论 -
小程序标签切换
<view class='centData-cent'> <view wx:for="{{menudata}}" data-numb="{{index}}" bindtap="menuClick" class="topborder {{numbr==index?'bottomborder':''}}"> <view> {原创 2018-12-16 18:23:51 · 626 阅读 · 0 评论 -
小程序使用Picker遇到的坑
平时用picker大多是用时间,今天要用到普通选择器。官网代码也写的很清楚:<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}"> <view class="picker">当前选择:{{array[index]}}</view>原创 2018-12-21 09:51:52 · 5547 阅读 · 3 评论 -
微信小程序条件渲染-- wx:if 与 hidden区别
条件渲染 顾名思义所谓的条件渲染,就是通过条件来判断是否需要渲染该代码块。条件渲染主要是用到wx:if 和 block wx:if 这两个,第一个相信好理解,第二个是在block里面进行条件渲染,这里我们特别说明一下< block/>并不是一个组件,它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性。和我们以前的逻辑编程类似,既然有了wx:if ,那么我们也会有wx:...转载 2018-09-22 21:59:35 · 1310 阅读 · 0 评论 -
小程序获取各种数据值跟设置数据值
修改设置data数组中的某个值: //小程序接收后台数据若为数组时,下标最好为默认索引数组,从0开始排序 var articleId ='1'//对应数组中的索引值 var thisArticle = "articleList[" + articleId + "].iscollection" console.log(thisArticle); that.setDat...转载 2018-09-21 18:04:59 · 3776 阅读 · 0 评论 -
小程序判断滑动方向
WXML:<view id="id" bindtouchstart="handletouchtart" bindtouchmove="handletouchmove"style="width:100%px;height:80px;line-height:80px;color:#fff;text-align:center; background:red">{{text}} &l...转载 2018-09-21 09:26:09 · 6947 阅读 · 5 评论 -
小程序模拟纵向进度条
WXML:<view id="wrapper2"> <view id="progressbar2"></view> <view id="fill2" style="width:{{view2.Width}}px;height:{{view2.Height}}px;top:{{top}}px;"&g原创 2018-09-18 14:36:02 · 3208 阅读 · 2 评论 -
微信小程序—contact-button(客服)
客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。效果图如下,1.index.wxml中: 第一种实现方式:<view class='myView'>第一种方式实现:</view><contact-button class='cBtn' type="default-dark" size="20" session-from="weapp"...转载 2018-06-22 17:26:13 · 9962 阅读 · 0 评论 -
微信小程序中实现地图导航
<map id="map" longitude="116.715790" latitude="23.362490" markers="{{markers}}" scale="18" style="width: 100%; height: 300px;" bindtap="click"> </map>cl转载 2018-06-22 15:38:40 · 5417 阅读 · 0 评论 -
微信小程序页面跳转无效
wx.navigateTo(OBJECT) 不会销毁当前页面,仅仅是将其hide,使用wx.navigateBack可以返回到原页面。wx.redirectTo(OBJECT) 销毁当前页面,跳转到应用内的其他页面。我们有时候会发现,其他的地方都好好的能跳转,可是为啥突然就无效那呢?原因:检查你要跳转的位置是否在app.js中注册过。检查你要跳转的地址是否有误。经常都是因为少写或者多写使得跳转无...转载 2018-06-22 13:23:20 · 709 阅读 · 0 评论 -
微信小程序设置背景
最近学习小程序,设置背景时遇到两个比较狗血的问题。一个是本地图片直接引入报错,不能使用。另一个是背景高度百分百。解决方式:引入网络地址或者base64位。第二个背景图高度100%的前提是,父元素高度100%。我习惯性的写了body,结果看了结构才知道,父元素是page。尴尬!...原创 2018-04-05 23:22:50 · 938 阅读 · 0 评论 -
小程序中请求获取数据失败,合法域名校验出错
开发过程中可以在开发者工具中不校验合法域名,这样请求的地址都可以正常返回数据。正式上线之后,将请求地址全部换成服务器配置中添加的合法域名即可正常请求。...原创 2018-04-16 13:26:43 · 1817 阅读 · 0 评论 -
小程序展开二级菜单
效果图:直接上代码:WXML:<view class='dataCent'> <view class='MenuDiv' wx:for="{{arrayMenu}}" data-index="{{index}}" bindtap='clickMenu'> <view class='leftimg'> <image ...原创 2018-09-22 23:49:03 · 7254 阅读 · 10 评论 -
小程序上下滑动事件
WXML:<view class='demo1'>滑动1</view><view class='demo2'>滑动2</view> WXSS:.demo1,.demo2{ height: 500px;} index.js // pages/test/test.jsPage({ /** * 页面的初始数...转载 2018-09-23 00:13:17 · 21510 阅读 · 3 评论 -
微信小程序----日期时间选择器(年月日时分秒)
<view class="tui-picker-content"> <view class="tui-picker-name">日期时间选择器(精确到秒)</view> <picker mode="multiSelector" value="{{dateTime}}" bindchange="changeDat转载 2018-12-26 15:33:48 · 9598 阅读 · 0 评论 -
小程序里去除button默认样式
button::after{border:none;}input{outline:none;border:none;list-style: none;}转载地址:https://blog.csdn.net/qq_38815953/article/details/79539146转载 2018-12-15 09:53:02 · 1660 阅读 · 0 评论 -
微信小程序实现星星评分效果
思路很简单,小星星都是一张张独立的图片,点击的时候改变图片的路径就可以了。我是用背景图片做的,先给盒子设置背景图片为灰色的小星星,盒子是根据js文件中的stars数组循环出来的,根据flag的值确定是灰色的小星星还是黄色的小星星,点击的时候获取当下这个盒子的index值,然后去更改stars数组中索引值小于等于index的每一项的flag就可以了。当然,也可以用类名来控制灰色和黄色的小星星,在...转载 2018-12-15 09:47:44 · 3126 阅读 · 1 评论