展开

关键词

上传

//添加 joinPicture: function (e) { var index = e.currentTarget.dataset.index; var evalList tempFilePaths; if (imgNumber.length >= 3) { wx.showModal({ title: '', content: '最多上传三张 }) }, upLoadImg: function (list) { var that = this; this.upload(that, list); }, //多张上传 uploadImage: function () { var that = this; wx.chooseImage({ count: 1, //最多可以选择的总数 ,默认二者都有 success: function (res) { // 返回选定照的本地文件路径列表,tempFilePath可以作为img标签的src属性显示

8210

|轮播

问题描述 轮播在很多APP中都很常见,那么该如何实现呢? Swiper滑块视容器用来在指定区域内切换内容的显示,可以用于制作轮播效果。 解决方案 从网上下载好之后,将其拖动到的一个文件夹内保存。 (笔者将这些保存在pages的子目录images下),然后再按照设计流:在js提供数据(此处即要轮播的),在wxml进行布局。 效果: ? 3.1轮播效果 结语 在wxml文件里采用swiper滑块视容器组件进行轮播区域的布局,在js文件提供轮播,是否自动播放,轮播的时长等数据,通过数据绑定的方式渲染到页面上。 实习编辑 | 王楠岚 责 编 | 赵

74330
  • 广告
    关闭

    什么是世界上最好的编程语言?丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿!

  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    ----预览

    效果 ? 原理 使用wx.chooseImage选择本地; 使用wx.previewImage预览。 WXML <view> <button bindtap="previewImage" type="primary">上传预览</button> <view class="tui-content

    20120

    -代码结构

    -代码结构 强烈推IDEA2020.2破解激活,IntelliJ IDEA 注册码,2020.2 IDEA 激活码       想要快速上手,我觉得首先得从整体上了解一下的结构。 如上所示,一个由.js、.json、.wxml、.wxss四种文件构成: .js:js脚本逻辑文件,跟我们以前写的js一样。 .json:json配置文件,以json格式存储一些配置。 JSON配置       在上面的中我们可以看到,一个基本的包含app.json、project.config.json、logs.json三个json文件,它们分别有不同的用途: app.json WXML模板       我们最开始学BS的时候,采用的是HTML+CSS+JS进行网页编中的WXML就和HTML类似,用来描述当前页面的结构。

    16710

    前端-开发(2):基本

    作者:叶钗  www.cnblogs.com/yexiaochai/p/9374374.html 前言 前面我们研究了下的执行流,因为拿不到源码,只能算我们的猜想,我们需要更加了解还需要做具体的项目 的布局 为什么不使用HTML&CSS 这种平台型的超越Hybrid系统诞生还是有一些客观条件的,其中一个就是移动端的应用相对来说简单的多,想想PC负责的布局,如果要使用实现,那么复杂度会提高很多 &swiper等作为容器组件存在,这里官方有基本,我们这里看看其中一个即可: ? 的生命周期 我们这里上一张: ? 执行js逻辑改变数据通过setData调用,触发一个JSCore通,通知view线执行UI更新,这里结合这张做下理解: ① 打开一个时,主UI线继续运行,开启一个webview(我认为这里的主线就是

    91230

    使用示例

    官方API:https://developers.weixin.qq.com/miniprogram/dev/component/image.html 1:加载本地文件夹 <image .png 2:加载服务器 wxml: <image src="{{imageUrl}}" mode="aspectFill"> </image> js: Page .png 或者直接在wxml写代码: <image src="http://www.intmote.com/timg.jpg" mode="aspectFill"> </ .png 3:给页面加载一张背景 方法一: 使用背景的时候用网络,就是用外链的形式,比如你将这张放到你的服务器,如:https://xxxx/xxx.jpg; 方法二: 将背景使用编码 //www.jianshu.com/p/61e6e7390f4a 原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编

    1.2K40

    递归上传

    sucai.suoluomei.cn/sucai_zs/images/20200521103739-37.png" /> <text wx:if="{{photo == 0}}">添加照< </view> </view> data: { fileList: [], photo: 0, count: 0, upload: true } // 上传 this.getpublish(list, i); } this.hideUpload() }, }) }, // 删除 } else { this.setData({ photo: 1, count: length }) } // 隐藏上传

    3810

    无法显示

    这两天折腾了一个,插件使用WeTypecho 由于网站都上传在了腾讯云COS,端不显示网站 原因: 腾讯云COS启用了防盗链,需要在白名单添加服务的链接 servicewechat.com

    34720

    之生成分享

    通过社交软件分享的方式来进行营销,是一个常用的运营途径。本身支持直接将一个的链接卡分享至好友或群,然后别人就可以通过点击该卡进入该页面。 但是目前不支持直接分享到朋友圈,而对我们来说,朋友圈又是一个很重要的吸引别人关注的入口,所以,得想办法把这个资源利用起来。 可能有的人已经知道,支持通过扫描/长按识别二维码或的方式进入一个首页或中某个特定页面(如何生成这类常规二维码、码,可参考《之生成自定义参数二维码》 而在前端做的话,由于也提供了一系列基于canvas的绘相关API,所以绘制这样的还是比较简单易上手的,且调试起来也比较方便直观。所以,决定先在前端这边来实现了。 步骤3:绘制码 最后,我们在画布最后添加一个码,可以是静态的码,也可以是比如为每一篇文章动态生成的码(参考《之生成自定义参数二维码》这篇文章),反正这个码也就是一张

    2.9K30

    开发--【APP(Object)函数】(三)

    什么是APP(Object) `App()`` 函数用来注册一个。接受一个 Object 参数,其指定的生命周期回调等。 参数说明 属性 类型 描述 触发时机 onLaunch Function 生命周期回调—监听初始化 初始化完成时(全局只触发一次) onShow Function 生命周期回调—监听显示 启动,或从后台进入前台显示时 onHide Function 生命周期回调—监听隐藏 从前台进入后台时 onError Function 错误监听函数 发生脚本错误,或者 api 调用失败时触发,会带上错误息 onPageNotFound Function 页面不存在监听函数 要打开的页面不存在时触发,会带上页面息回调该函数 其他 Any 开发者可以添加任意的函数或数据到 Object 参数中,用 this 可以访问 前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开并没有直接销毁,而是进入了后台;当再次进入或再次打开,又会从后台进入前台

    68720

    Android 分享优化

    和尚上周接入了分享的入口,基本功能实现都没问题,有需要的朋友可以了解一下 Android 分享失败二三事,虽然功能都正常,但整体测试发现展示效果不佳。 于是和尚整理了一个简单的方法处理一下! ? 规定,分享展示的应该在 128KB 以内,同时默认展示比例为 5:4,这样和尚默认的很多是竖直的,只会展示一部分。 (); mCanvas.restore(); return mBitmap; } 和尚测试时发现,很多的尺寸大和宽高比并非固定的,为了适配整体展示效果,当宽高比于1 时,根据高度来计算整体绘制 Bitmap 宽,Bitmap 可以根据需求展示相应的本地资源或网络,宽高可以直接设置 5:4 大,和尚测试 width = 300; height = 240 整体效果较为合适 ,所以需要先绘制,再判断是否超过 128KB。

    1.1K61

    设置固定比例

    今天一个让在任何容器都保持固定比例的方法。 有时我们的并不是同一个比例,但是我们需要设置保持一个固定的比例,在里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设置css的宽为一个固定值,然后高为固定值一半就行了 ,我只要设置列表的宽度,Cell里面宽度和高度就定下来了。 首先我百度到两种方法: 一、调用js操作DOM 在内无法直接操作DOM,但是也是提供了接口的:wxml节点息API 1.没有封装组件时,我们可以在js文件中的onShow方法中使用: onShow :{{height}}'></image> 此时,当我们设置父视的宽为任意值,都会保持2:1的比例。

    3.4K20

    干货 | 长按保存

    浏览器打开h5页面如果是img标签的话,长按会弹出保存的选项。但是里面不可以,需要自己写这个功能。 这个功能有两个点,一个是长按,一个是保存到本地。 1. 关于长按的解释,有两种: ? 因此我们选用 bindlongpress 事件 2. 保存接口 同样提供了保存的接口,是wx.saveImageToPhotosAlbum() ? 3. ② 保存的路径参数,不支持网络路径,而在我们渲染页面时,用到的有很大可能是网络路径,这时候我们需要先把网络路径转为可用的本地路径,wx.getImageInfo()方法可以满足需要 ? 4.

    2.2K20

    ----gallery slider(轮播)组件

    DEMO下载 先上效果: ? 总结: scroll-view组件的作用是可以触发触摸滑动 swiper组件的作用是制作自动切换,形成轮播 navigator组件的作用是给每个添加链接 主要是scroll-view和swiper

    22430

    一键保存多张

    sucai_zs/images/20191121093322-2.png' }] }], percent: 0, schedule: false }, // 下载到本地相册 } }, fail: (err) => { wx.showToast({ title: '保存失败

    1.2K50

    引用we-cropper裁切

    /utils/weCropper/we-cropper.min.js' const device = wx.getSystemInfoSync() // 获取设备息 const width = device.windowWidth 20200516105950-2.png', }, onLoad: function (options) { this.initWeCropper() }, // 初始化weCropper插件 20000 }) }) .on('imageLoad', (ctx) => { wx.hideToast() }) }, //选择 touchMove(e) { this.cropper.touchMove(e) }, touchEnd(e) { this.cropper.touchEnd(e) }, // 获取链接

    81520

    相关产品

    • 智能扫码

      智能扫码

      智能扫码(IS)为您提供便捷快速的扫码 SDK 服务,提供微信同款扫码服务,智能、快速、稳定、安全。智能扫码针对多码、大图小码、模糊识别等不同场景做了针对性的优化,提供最精准最快速的扫码服务。

    相关资讯

    热门标签

    扫码关注云+社区

    领取腾讯云代金券