一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchtap="onSwiperTap" autoplay="auto" interval="3000" duration="500" current="{{swiperCurrent}}" bindchange=&qu…

微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考:本地看不到数据,就先让本地能看到数据,再看本帖.... 1:本地可以看到数据,ios不行,安卓可以:     可能是tsl版本问题不支持1.2导致,部分安卓可以允许tsl低于1.2而正常显示,而苹果不行:     解决方法:参考此帖排查问题并修复:request:fail错误(含https解决方案)(真机预览问题     可能是证书不受信任 2:本地可以看到数…

微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考: 本地看不到数据,就先让本地能看到数据,再看本帖....特别提示:当问题较为复杂时,请制作一个专门的最简demo,以便集中观察,确定问题. 看帖前需测试内容:测试内容一:请同时测试安卓及ios至少各两款手机型号:测试内容二:开发者工具内开启不检验域名,真机上打开调试进行测试:查看结果:                    然后开发者工具上关闭不检验域名,真机…

SaveCard: function(e) { let that = this; console.log('保存'); var imgSrc = e.currentTarget.dataset.img; //获取相册授权 wx.getSetting({ success(res) { if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success()…

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage…

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

1. ivew-admin table { title: '产品图片', key: 'avatar1', align: 'center', render: (h, params) => { return h('div', [ h('img', { style: { width: "45px", height: '45px', verticalAlign: "middle", marginTop: '3px', marginBottom: '3px' }, at…

在开发微信小程序时,开发人员会参考着小程序api来开发小程序,但有的时候根据情况不同很容易出现bug,以下是我在开发小程序时出现的各种bug,在开发时有需要预览图片. 1.xml <view class='detail_img'> <view class='view_img' wx:for="{{imglist}}" wx:for-item="image"> <image src='{{image}}' data-src="{…

本文转自:http://blog.csdn.net/sk719887916/article/details/54312573 文/YXJ 地址:http://blog.csdn.net/sk719887916/article/details/54312573 上次介绍了小程序开发中的微信登录.文章: 微信小程序开发(一) 微信登录流程, 这次介绍下小程序当中常用的图片上传. 前几天做了图片上传功能,被坑了一下.接下来我们来看一下微信的上传api. 这里的filePath就是图片的存储路径,类型居…

在微信小程序中要保存图片到本地相册,需要获取相册权限. 总之整个功能实现下来需要如下几个小程序的API:wx.getSetting,wx.authorize,wx.openSetting,wx.downloadFile,wx.saveImageToPhotosAlbum 但是在openSetting 和 downloadFile 会有坑! openSetting,[打开小程序设置页]有坑,是官方的问题,这里出现授权弹框,如果你点击拒绝再次引导授权流程弹框不会立马弹出(官方解释说因为频繁代用授权会…

wxml文件 <view class="weui-uploader"> <view class="img-v weui-uploader__bd"> <view class='pic' wx:for="{{imgs}}" wx:for-item="item" wx:key="*this"> <image class='weui-uploader__img' src=…

在web 或者webapp开发中我们习惯了直接饮用本地图片做背景,例如 .aaa { background: url('img/1.png'); } 但是这种引用方式在微信小程序中是无法使用的,控制台会显示如下 不允许使用本地路径. 于是我将路径替换为非本地路径试试: .u-img-leftIcon { background: url('http://192.168.31.163:8020/pr/source/img/searchLeft.png') no-repeat; background-…

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本:background-image: url("data:image/png;base64,iVBORw0KGgo=..."); 3.为了是背景图片自适应宽高,可以做如下设置: background-repeat:n…

最近在研究微信小程序,被这个返回顶层给坑了一波,下面贴代码 wxml代码: <scroll-view scroll-y style="height: 1000rpx;" scroll-top="50" enable-back-to-top="true" scroll-top="{{scrollTop.scroll_top}}" bindscroll="scrollTopFun"> <blo…

<view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-index='{{index}}' bindtap='previewImg'></image> </view> </view> Page({ /** * 页面的初始数据 */ data: { imgArr:[ 'http:…

作为一个只懂简单HTML,jQuery,JS的web后台开发者,最近在学习小程序开发,现在将小程序的点击全屏功能的相关内容记录下来.如果有不对的地方或者有更简单的方法,请留言指教 0_0~ .js 文件 data: { one:"block", //判断图片全屏前是否隐藏 ones:"none", //判断图片全屏后是否隐藏 phoneheight :" " , //按比例缩放后图片高 phoneWidth : " "  //…

WXML: <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{item}}' data-src='{{item}}' bindtap='previewImg'></image> </view> </view> WXSS: .imgList{ width: 100%; } .imgList .img…

我们经常用到发布文章,用的是UEditor百度富文本编辑器,方便排版,存储的也是html代码,这样小程序解析出来的也是排版的样式,但是使用wxParse解析html的时候,因为存储的是图片的相对路径,所有在小程序解析的时候图片不显示,网上搜了好多,说当时图片的时候在解析出来的图片相对路径前面加上域名,这样也挺麻烦的,没到图片的地方都要判断一下,所有我找了个简单粗暴的方法,直接改wxParse的代码,只需要改这一个地方就可以了. 另外附上小程序   wxParse的使用方法 小程序 转换富文本编辑…

这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '<img class="rich-img" ' ); 就可以了 rich-text   .rich-img { width: 100% ; height: auto ; }…

拿接口  有封装 封装查看另外的博文 点击动作 WXHTML 注意 data-xxxx自定义属性 这样知道我点的是哪个参数…

wxml部分的代码   <view class="footer-r" bindtap="save"> <image src="../../../images/icons/zhiwen.svg" /> <view class="footer-r-t"> <text>点击保存到相册</text> <text class="t">享更多优惠&…

1.data里定义切换图片的地址和切换的标识 data:{ show:true, yes:"http://101.89.144.168:9090//files/jk/yd/images/index/banner-3.jpg", no:"http://101.89.144.168:9090//files/jk/yd/images/index/banner-1.jpg" }, 2.组件里使用三元表达式 <image src="{{show?yes:no}…

https://github.com/Tencent/weui-wxss 用微信web开发者工具打开dist目录(请注意,是dist目录,不是整个项目)…

类似这样的效果 <view class='helpCateList'> <!-- 类别 --> <scroll-view class='scroll-view' scroll-x="true"> <view class="item-content" wx:key="id" wx:for="{{helpCateList}}" wx:for-item="item">…

画布提供了一种可以创建圆的方法 arc(x, y, r, s, e, counterclockwise) x,y:圆心 r:圆的半径 s:起始弧度 (0) e:终止弧度 (1.5 * Math.PI) counterclockwise:弧度的方向是否是逆时针 原图 截取之后的图 首先确定图片位置x和y值,然后确定图片大小,r就为图片一半,因为图片起始点是(x,y),所以圆心的位置为(x+r,y+r) var headpic ='../../../images/tabBar_two/dynamic…

首先说一下场景:我所循环的数据是对象数组,设置了一个属性当作标记,通过这个标记的值判断是否给改元素添加样式 wxml: <view> <view wx:for="{{list}}" wx:key="num" class="list" > <text bindtap='changColor' data-index='{{index}}' class='{{item.check?"text-active&quo…

1.navigator 对应的 url 必须配置在app.json的pages中: 2.navigator 对应的 url 不能配置在"tabBar"的"list"里面了,负责无法跳转,因为tabBar的跳转需用switchTab进行:…

WXML中: <view wx:if="{{orderstate}} = '待送检' " data-no="{{orderstate}}" bindtap="quxiaosongjian"> <view>取消送检</view> </view>   当前页面显示为待送检 js中: quxiaosongjian:function(e) { var that = this; var orderstate…

<---------------------------------------------------index文件夹:---------------------------------------------------> wxml页面: <navigator url="{{item.url}}"> <view>………</view> </navigator >   js页面: Page({ data:{ slide: []…

wx.setClipboardData({ data: '这是要复制的文字', success: function (res) { wx.showModal({ title: '提示', content: '复制成功', showCancel: false }); } }) copy(){ wx.setClipboardData({ data: this.order.orderCode, success: function (res) { wx.getClipboardData({ succes…